STUDENT HTML DOCUMENT

第 07 章練習答案對照

先自己完成 Checkpoint 2,再用這張表定位卡住的 TASK。答案對照用來找位置,不用來整份覆蓋。

任務完成標記修改檔案修改位置可見結果
TASK-01DONE-01style.css.project-grid作品卡片依寬度自動排成多欄
TASK-02DONE-02style.css.project-grid卡片之間留有整齊空隙
TASK-03DONE-03style.css.project-link長網址會換行且不超出卡片

第 06 章的 Flex 版面以新的「卡片牆」作品區接棒;四個階段都會顯示「第 06 章交棒」與本地 #project-details 目標,練習連結不使用 href="#"

六個 microLab 的比較位置:TASK-01 是「欄數 vs 卡片寬度」與「auto-fit vs 固定欄數」;TASK-02 是「gap vs padding」與「Grid vs Flex」;TASK-03 是「overflow-wrap vs overflow hidden」與「長網址 vs 一般文字」。每個實驗都要留下操作前後與 selector/computed style 證據。

標準答案保留網址全文,不用 overflow:hidden 把問題藏起來;TASK-04 另要求新增至少四筆真實卡片資料,並以寬版、窄版與長標題證明 Grid 規則可轉移。