建立花哨的信頭紙

如果您想留下良好的印象,在漂亮的信頭紙上寫信是一個非常好的開始。在本評估中,我們將挑戰您建立一個線上模板來實現這樣的外觀。

先決條件 在嘗試本評估之前,您應該已經完成了本模組中的所有文章。
目標 測試對 CSS 盒子模型和其他與盒子相關的功能(例如實現背景)的理解。

起點

要開始此評估,您應該

  • 建立 HTMLCSS 的本地副本 — 將它們另存為 index.htmlstyle.css,放在新目錄中。
  • 頂部底部徽標 影像的本地副本儲存在與程式碼檔案相同的目錄中。

或者,您可以使用線上編輯器,例如 CodePenJSFiddleGlitch。您可以將 HTML 貼上到其中一個線上編輯器中,然後填寫 CSS。

注意:如果您遇到困難,可以透過我們的 溝通渠道 聯絡我們。

專案簡介

您已獲得建立信頭紙模板所需的檔案。您只需要將這些檔案組合在一起。要做到這一點,您需要

主信函

  • 將 CSS 應用於 HTML。
  • 向信函新增背景宣告,該宣告
    • 將頂部影像固定到信函的頂部
    • 將底部影像固定到信函的底部
    • 在前面兩個背景的頂部新增一個半透明漸變,使信函具有一定的紋理。使其在頂部和底部附近略微變暗,但在中間大部分割槽域完全透明。
  • 新增另一個背景宣告,該宣告僅將頂部影像作為信函頂部的背景,作為不支援先前宣告的瀏覽器的後備方案。
  • 向信函新增白色背景顏色。
  • 向信函新增 1 毫米的頂部和底部實線邊框,顏色與其餘顏色方案保持一致。
  • h1 新增徽標作為背景影像。
  • 向徽標新增濾鏡以使其具有微妙的投影。
  • 現在註釋掉濾鏡,並以另一種(稍微更相容跨瀏覽器)的方式實現投影,該方式仍然遵循圓形影像的形狀。

提示和技巧

  • 請記住,您可以透過首先放置宣告的後備版本,然後放置僅在較新瀏覽器中有效的版本來為舊版瀏覽器建立後備方案。舊版瀏覽器將應用第一個宣告並忽略第二個宣告,而較新瀏覽器將應用第一個宣告,然後使用第二個宣告覆蓋它。
  • 如果您願意,可以為評估建立自己的圖形。

示例

以下螢幕截圖顯示了完成的設計示例

Full A4 page composed of at the top left two triangular shapes, first one is green, second one is red, at the top right darker red trapezoid shape. Below the green triangular, a red circle filled with a green star with white text on it: Awesome company. At the bottom left of the page, darker red trapezoid shape, follow by the two triangular shapes: the red one, then the green one. Above the green triangular shape, black text displaying a postal address.