CHAPTER 09 · PRACTICE WORKSPACE

可重複使用的按鈕與卡片元件

完成可重複套用的按鈕與卡片樣式組

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

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

建立按鈕共用基底

修改檔案:style.css

完成後看見:所有按鈕具有一致尺寸、圓角與字重

TASK-02稍後處理

建立主要與次要按鈕變體

修改檔案:style.css

完成後看見:兩種按鈕有清楚的行動層級

TASK-03稍後處理

建立卡片共用外觀

修改檔案:style.css

完成後看見:作品與服務卡片共用一致邊框及留白

WORKSPACE

本階段實作區

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

可重複使用的元件

查看作品聯絡我

服務

網站內容整理

把複雜資訊改寫成容易閱讀的頁面。

作品

品牌形象頁

用一致視覺呈現品牌個性與主要行動。

聯絡我

請來信 hello@example.com 討論合作。

CONTINUE

開始 TASK-01

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

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