練習目標

1. 全頁分三個區段：[1] 區段最小高度為一個螢幕畫面。 [2] 區段的背景設計。
2. header 區：背景影像設計 (留意手機版呈現的位置)。
3. nav 區：[1] 按鈕設計。 [2] 滑入動態設計。 [3] 響應式手機版設計。
4. footer 區：[1] 絕對定位設計。 [2] 內容文字設計。
5. 最大寬度容器與標題1：[1] 最大寬度容器設計。 [2] 標題1 設計 (影像與文字垂直置中對齊)。
6. 標題1前影像動態呈現： @keyframes + animation。
7. ↑TOP 設計：[1] 靜態設計。 [2] 滑鼠滑入 transition 動態設計。
8. #sec2 內容設計：[1] 架構設計(等高問題)。 [2] 影像滑鼠滑入 transition 動態設計。 [3] 陰影設計。 (4) 響應式設計。
9. #sec3 內容設計：[1] 架構設計(Box模型問題)。 [2] 滑鼠滑入 transition 文字動態呈現。 [3] 響應式設計。

了解HTML

了解CSS