建立花哨的信頭紙
如果您想留下良好的印象,在漂亮的信頭紙上寫信是一個非常好的開始。在本評估中,我們將挑戰您建立一個線上模板來實現這樣的外觀。
| 先決條件 | 在嘗試本評估之前,您應該已經完成了本模組中的所有文章。 |
|---|---|
| 目標 | 測試對 CSS 盒子模型和其他與盒子相關的功能(例如實現背景)的理解。 |
起點
專案簡介
您已獲得建立信頭紙模板所需的檔案。您只需要將這些檔案組合在一起。要做到這一點,您需要
主信函
- 將 CSS 應用於 HTML。
- 向信函新增背景宣告,該宣告
- 將頂部影像固定到信函的頂部
- 將底部影像固定到信函的底部
- 在前面兩個背景的頂部新增一個半透明漸變,使信函具有一定的紋理。使其在頂部和底部附近略微變暗,但在中間大部分割槽域完全透明。
- 新增另一個背景宣告,該宣告僅將頂部影像作為信函頂部的背景,作為不支援先前宣告的瀏覽器的後備方案。
- 向信函新增白色背景顏色。
- 向信函新增 1 毫米的頂部和底部實線邊框,顏色與其餘顏色方案保持一致。
徽標
- 向 h1 新增徽標作為背景影像。
- 向徽標新增濾鏡以使其具有微妙的投影。
- 現在註釋掉濾鏡,並以另一種(稍微更相容跨瀏覽器)的方式實現投影,該方式仍然遵循圓形影像的形狀。
提示和技巧
- 請記住,您可以透過首先放置宣告的後備版本,然後放置僅在較新瀏覽器中有效的版本來為舊版瀏覽器建立後備方案。舊版瀏覽器將應用第一個宣告並忽略第二個宣告,而較新瀏覽器將應用第一個宣告,然後使用第二個宣告覆蓋它。
- 如果您願意,可以為評估建立自己的圖形。