設計個人簡介頁面

透過你在過去幾節課中學到的知識，你應該能夠使用 CSS 格式化簡單的文字文件，併為它們新增自己的樣式。本次評估將給你一個機會來實踐。

先決條件 在嘗試此評估之前，您應該已經學習了本模組中的所有文章，並且對 HTML 基礎知識有所瞭解（學習 HTML 簡介）。
目標 體驗一些 CSS 並測試您新獲得的知識。

起點

您可以在下面的即時編輯器中工作，或者可以 下載起始檔案 在您自己的編輯器中使用。這是一個包含 HTML 和起始 CSS（在文件頭部）的單頁面。如果您願意，您可以在建立本地計算機上的示例時將此 CSS 移動到單獨的檔案中並連結到它。

注意：您可以在此頁面上的互動式編輯器或線上編輯器（如 CodePen、JSFiddle 或 Glitch）中嘗試解決方案。

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

專案簡介

以下即時示例顯示了一個使用 CSS 樣式化的個人簡介。使用的 CSS 屬性如下——每個屬性都連結到 MDN 上的屬性頁面，這將為您提供更多使用示例。

在互動式編輯器中，您會發現一些已就位的 CSS。這使用元素選擇器、類和偽類選擇文件的部分內容。對這個 CSS 進行以下更改

  1. 使用 CSS 顏色關鍵字 hotpink 將一級標題設定為粉紅色。
  2. 為標題新增一個 10px 點狀的 border-bottom，使用 CSS 顏色關鍵字 purple。
  3. 將二級標題設定為斜體。
  4. 為用於聯絡資訊的 ul 設定 #eeeeee 的 background-color 和 5px 實線紫色 border。使用一些 padding 將內容從邊框推開。
  5. 使連結在懸停時變為 green。

提示和技巧

  • 使用 W3C CSS 驗證器 捕獲 CSS 中意外的錯誤——您可能錯過的錯誤——以便您可以修復它們。
  • 之後，嘗試在 MDN CSS 參考 中查詢此頁面上未提及的一些屬性，並大膽嘗試！
  • 請記住，這裡沒有錯誤答案——在這個學習階段，您可以盡情享受樂趣。

示例

您最終應該得到類似此影像的內容。

Screenshot of how the example should look after completing the assessment.