網站規劃
把需求整理成清楚的頁面結構。
最小可執行實驗
Mobile First 與 Media Query
先以手機單欄開始；視窗寬度達到 760px 後，服務卡變成三欄，聯絡區塊變成雙欄。
操作方式
- 先把瀏覽器寬度調到約 390px，確認服務卡是單欄。
- 再調到 768px，確認服務卡變三欄、聯絡區塊變雙欄。
- 按 Tab，確認連結、輸入框與按鈕都有清楚的 focus 外框。
服務卡片
視覺設計
建立一致、容易閱讀的版面。
前端製作
把設計轉成可操作的網頁。
內容整理
讓訪客快速找到重要資訊。
響應式調整
讓手機、平板與桌機都能使用。
上線檢查
確認連結、鍵盤操作與窄版畫面。
聯絡我們
這個區塊與右側表單共用同一個響應式版面。
跳到聯絡表單驗收證據
- 390px：服務卡與聯絡區塊都是單欄。
- 768px：服務卡三欄、聯絡區塊雙欄。
- 左右拖曳視窗時沒有水平捲軸。
- 鍵盤 Tab 可以看見目前 focus。