第九章：綜合專案：設計你的個人檔案頁面

這是一個集大成的綜合專案！我們將運用至今為止學到的所有 HTML 和 CSS 技巧，來打造一個專業、美觀且能適應不同裝置（電腦、平板、手機）的個人檔案頁面。這個專案的重點在於「設計」與「版面配置」。

• 語意化 HTML 結構: 練習使用 `
  `, `

  `, `

  `, `
• CSS 變數與全域樣式: 在 `:root` 或 `body` 中設定基礎的顏色、字體，讓整體風格保持一致性，並易於修改。
• 進階版面設計技巧:
  • 負邊距 (Negative Margin): 學習如何使用 `margin-top: -5rem;` 這樣的技巧，做出頭像疊在封面照片上的酷炫效果。
  • 定位 (Positioning): 透過 `position: relative;` 和 `position: absolute;` 的搭配，可以讓我們更自由地控制元素在頁面上的位置。
  • Flexbox 與 Grid 綜合應用: 我們會同時使用這兩種排版工具，Flexbox 用於單行或單列的對齊（如個人資訊區），Grid 則用於二維的網格佈局（如專案列表）。
• 響應式網頁設計 (RWD):
  • 這是本章最重要的核心！我們將會使用 `@media (min-width: 768px)` 媒體查詢 (Media Query) 來設定「斷點」(breakpoint)。
  • 當螢幕寬度大於 768px 時（通常是平板或電腦），我們會套用不同的 CSS 樣式，例如將垂直排列的頭像和文字，改為水平排列，讓版面在寬螢幕上看起來更舒適。

完成這個專案後，你將擁有一個可以展示給任何人看的線上作品集。讓我們開始動手，打造能代表你的數位名片吧！