新手困境
學完基礎標籤卻無從下手，面對複雜頁面不知該用什麼元素、如何佈局。
核心技巧：善用開發者工具
Chrome DevTools (F12) / IE F12 是最佳學習利器：
- Elements 面板：即時檢視 DOM 結構、CSS 樣式、盒模型。
- 即時編輯：雙擊 HTML/CSS 直接修改，立即見效，無需刷新。
- Copy → Copy styles / outerHTML：快速取得片段供參考。
實作步驟建議
- 打開 hao123，啟用 DevTools，啟用「選取元素」圖示 (Ctrl+Shift+C)。
- 點擊頁面區塊，觀察對應 HTML 結構與 CSS 類別。
- 在本地建立
index.html + style.css，先寫大框架（header, nav, main, footer）。
- 逐區塊複製參考結構，調整 class 名稱、樣式，邊改邊看效果。
- 遇到 Flex/Grid、定位、偽元素等進階技巧，隨查隨學（MDN、CSS-Tricks）。
關鍵 CSS 概念補充
- 盒模型：
box-sizing: border-box 統一尺寸計算。
- Flexbox：一維佈局神器，
display:flex; justify-content: space-between。
- Grid：二維佈局，適合整頁分區。
- 響應式：媒體查詢
@media (max-width: 768px)。
總結
模仿是最快上手途徑。DevTools 讓你「所見即所得」拆解真實網站，配合邊改邊看，比死記標籤語法有效百倍。
