CHAPTER 12 · PRACTICE WORKSPACE

RWD:版面、圖片與手機導覽

在 320px 到桌機寬度都可閱讀、可操作的作品集

01 Starter 0/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

讓圖片跟著容器縮放

修改檔案:style.css

完成後看見:320px 寬度不再出現圖片造成的水平捲動

TASK-02稍後處理

設定由內容決定的卡片斷點

修改檔案:style.css

完成後看見:手機一欄、較寬畫面兩欄

TASK-03稍後處理

讓手機導覽可換行且好點擊

修改檔案:style.css

完成後看見:導覽不溢出,每個連結保有足夠內距

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼,再從 TASK-01 開始修改。

綠色作品集示意圖
圖片要完整留在容器內。

活動頁

清楚整理活動資訊。

品牌頁

呈現品牌故事。

聯絡頁

提供可使用的聯絡入口。

CONTINUE

開始 TASK-01

下載版只包含 Starter;完成本頁操作後,請回線上教材進入 Checkpoint 1。

回到本頁 Starter 工作區(進入 Checkpoint 1 請回線上教材)