建立按鈕共用基底
修改檔案：style.css
完成後看見：所有按鈕具有一致尺寸、圓角與字重
第 08 章交棒
定位完成後，開始整理可以重用的外觀
上一章用 relative、absolute 與 fixed 決定小物件跟誰走；本章保留定位結果，只把按鈕與卡片的共同外觀收成 class。
可重複使用的元件
服務
網站內容整理
把複雜資訊改寫成容易閱讀的頁面。
作品
品牌形象頁
用一致視覺呈現品牌個性與主要行動。
聯絡我
請來信 [email protected] 討論合作。
CHAPTER 09 · PRACTICE WORKSPACE
完成可重複套用的按鈕與卡片樣式組
TASK STATUS
修改檔案：style.css
完成後看見：所有按鈕具有一致尺寸、圓角與字重
修改檔案：style.css
完成後看見：兩種按鈕有清楚的行動層級
修改檔案：style.css
完成後看見：作品與服務卡片共用一致邊框及留白
WORKSPACE
已完成 TASK-02；先核對可見結果，再前往 TASK-03。
FOCUS TASK · TASK-03
比較：卡片共同外觀集中管理，作品與服務的文字內容仍由各自 HTML 負責。
現在做：在 Checkpoint 2 的 .component-card 加上 padding: 24px、border: 1px solid #bdc9c2、border-radius: 16px、background: white；重新整理後用 Computed 比較服務卡與作品卡，接著只改文字內容、不改 CSS，確認內容差異仍保留。
預期：完成後能觀察到「作品與服務卡片共用一致邊框及留白」，並說出卡片共同外觀集中管理，作品與服務的文字內容仍由各自 HTML 負責。
證據：用前後截圖或口述比較「作品與服務卡片共用一致邊框及留白」，指出這個小型實驗如何證明卡片共同外觀集中管理，作品與服務的文字內容仍由各自 HTML 負責。
比較：卡片 class 管理元件外觀，網格或容器 class 管理版面排列，責任要分開。
現在做：在 Checkpoint 2 的 DevTools 先把 .component-grid 的 grid-template-columns 暫改成 1fr，再把 .component-card 的 padding 暫改成 32px；重跑比較哪個改動影響卡片排列、哪個只影響卡片內部，最後恢復原值。
預期：完成後能觀察到「作品與服務卡片共用一致邊框及留白」，並說出卡片 class 管理元件外觀，網格或容器 class 管理版面排列，責任要分開。
證據：用前後截圖或口述比較「作品與服務卡片共用一致邊框及留白」，指出這個小型實驗如何證明卡片 class 管理元件外觀，網格或容器 class 管理版面排列，責任要分開。
完成條件：DONE-03：內容可不同的卡片共用一致外觀，且共同規則只需修改一次。
第 08 章交棒
上一章用 relative、absolute 與 fixed 決定小物件跟誰走；本章保留定位結果，只把按鈕與卡片的共同外觀收成 class。
服務
把複雜資訊改寫成容易閱讀的頁面。
作品
用一致視覺呈現品牌個性與主要行動。
請來信 [email protected] 討論合作。
CONTINUE
前往 Solution，依要求完成「建立卡片共用外觀」。