【Day 26】— 入門 JavaScript 網頁架設：CSS Flex & Grid 版面

2025 iThome 鐵人賽

DAY 26

Modern Web

Modern Web × AI《拖延怪日記》：語錄陪伴擺脫拖延系列第 26 篇

17th鐵人賽

connielin07

2025-09-10 19:50:55

74 瀏覽

分享至

摘要
今天用 Flexbox 與 CSS Grid 重新整理頁面結構：工具列橫向排好、任務安排區塊與歷史頁更清晰，加入基本 RWD 與一致的按鈕/表單外觀，讓作品看起來更像產品而不是雛型。

為什麼要做排版美化？

可讀性：把資訊分群、工具列橫向對齊，減少視覺噪音。
維護性：抽離 inline style，集中到 styles.css，後續調整更容易。
擴充性：先建立可延伸的網格，再接續 Day 27（色彩/元件風格）。

學習重點

Flexbox：做出可換行的工具列（搜尋/排序/匯出…）。
Grid：任務安排三格（早/中/晚）穩定排列，拖放更好瞄準。
RWD：字級、間距、容器寬度與控件大小在小螢幕也好用。
可近性（a11y）細節：焦點樣式、aria-live、[hidden] 行為一致。

核心流程

連結全站樣式
在 <head> 引入 styles.css，全頁即套用一致外觀。
工具列
統一使用 .toolbar 作為「搜尋/排序/匯出」等橫向容器，必要時自動換行。
任務安排
.time-grid 使用 CSS Grid 排 3 欄、.time-slot 提供拖放高亮。
歷史回顧
維持單欄自然文流；還沒顯示時不佔位（[hidden]）。

實作

假設已具備：

Day 4–5 → readRecords / writeRecords / addRecord（紀錄存取基礎）
Day 12 → showPage()（頁面切換骨架、進場畫面）
Day 13–16 → 表單提交、精神引導、小測驗、任務安排 MVP（含拖曳）
Day 18 → 溫暖總結與分享（renderArrangementSummary()、#btnShare）
Day 20–21 → 統計圖表與趨勢（Chart.js 載入、回退清單）
Day 22–25 → 匯出工具、雲端備份、AI 語錄清單（quote wall）

HTML：連結全站樣式 + 為工具列補上 class
新增於 <head>

<!-- [Day26-NEW] 全站樣式 -->
<link rel="stylesheet" href="styles.css" />

把以下三個工具列 <div> 補上 class="toolbar"
語錄牆工具列（#quoteWallSection）：

<!-- [Day26-CHANGED] 加上 .toolbar -->
<div class="toolbar" style="display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;">
  ...
</div>

任務回顧工具列（歷史頁排序/篩選）：

<!-- [Day26-CHANGED] 加上 .toolbar -->
<div class="toolbar">
  <h3>任務回顧</h3>
  <label for="sortSelect">排序：</label>
  <select id="sortSelect">...</select>

  <label for="filterSelect">篩選：</label>
  <select id="filterSelect">...</select>
</div>

安排完成後的動作列（分享）：

<!-- [Day26-CHANGED] 加上 .toolbar -->
<div id="postArrangeActions" class="toolbar" style="display:flex; gap:.5rem; margin-top:.5rem;">
  <button id="btnShare" type="button">分享挑戰給好友</button>
</div>

註：style="..." 仍先保留以免破版，實際顯示會被 CSS 覆蓋；你也可以在確認無誤後移除 inline style。

CSS：新增 styles.css
新增一個 styles.css 檔（與 index.html 同層）。以下是一個乾淨、可延伸的起手版，涵蓋：變數、排版、工具列、格線、RWD、拖曳高亮與表單/按鈕一致性。

/* ========== [Day26-NEW] 全站樣式：styles.css ========== */
/* CSS 變數（可於 Day 27 調色用） */
:root {
  --bg: #fafafa;
  --card: #ffffff;
  --text: #222;
  --muted: #677;
  --border: #e6e6e6;
  --primary: #3b82f6;   /* 按鈕主色 */
  --primary-600: #2563eb;
  --focus: #94c0ff;
  --radius: 12px;

  --maxw: 1080px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
}

/* 任何 hidden 元素都強制不佔位（避免被後續 display 覆蓋） */
[hidden] { display: none !important; }

/* Reset（簡化版） */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.5;
}

/* 主容器寬度 */
body > section,
#recordFormSection,
#historySection,
#taskScheduleSection,
#resonanceScreen {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-4);
}

/* 卡片化區塊（常見 section） */
#recordFormSection,
#moodTestSection,
#moodDecisionSection,
#taskScheduleSection,
#historySection,
#resonanceScreen {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* 標題層級 */
h1, h2, h3 {
  margin: .2em 0 .6em;
}
.muted {
  color: var(--muted);
}

/* 表單與按鈕的一致性 */
input[type="text"],
input[type="search"],
select,
button {
  font: inherit;
}
input[type="text"],
input[type="search"],
select {
  padding: .5rem .6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  min-height: 2.25rem;
}
input:focus,
select:focus,
button:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

button {
  padding: .5rem .8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
button:hover { background: #f7f7f7; }
button:disabled { opacity: .6; cursor: not-allowed; }

#submitBtn,
#btnStartNow,
#btnShare,
#btnBackupNow,
#btnExportJSON,
#btnExportCSV,
#btnExportQuoteJSON {
  background: var(--primary);
  color: #fff;
  border-color: transparent;
}
#submitBtn:hover,
#btnStartNow:hover,
#btnShare:hover,
#btnBackupNow:hover,
#btnExportJSON:hover,
#btnExportCSV:hover,
#btnExportQuoteJSON:hover {
  background: var(--primary-600);
}

/* 工具列（水平置中 + 可換行） */
.toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

/* 語錄清單與歷史清單的 list 間距 */
#quoteList,
#historyList,
#moodStatsList,
#moodTrendList {
  padding-left: 1.25rem;
}
#quoteList li,
#historyList li {
  margin: .4rem 0;
}

/* 任務安排：格線與拖曳高亮 */
.time-grid {
  display: grid !important; /* 覆蓋內嵌 style */
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-top: .5rem;
}
.time-slot {
  min-height: 56px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: #fff;
  padding: .5rem;
}
.time-slot.dropping {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* 任務卡 */
#taskCard {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: .5rem !important;
  background: #fff !important;
}

/* 歷史頁：使用 Grid 重排多區塊 */
#historySection { display: block; }
#quoteWallSection { margin-top: 1rem; }

/* 讓「任務回顧（排序/篩選＋列表）與語錄牆」各自成塊 */
#quoteWallSection { order: 1; }
#historySection > .toolbar,
#historySection > ul,
#exportSection,
#cloudBackupSection {
  order: 2;
}

/* Canvas 容器高度（保險） */
#moodChartWrap,
#moodTrendWrap,
#moodPieWrap {
  position: relative;
}
#moodChartWrap { height: 260px !important; max-width: 680px; }
#moodTrendWrap { height: 260px !important; max-width: 680px; }
#moodPieWrap   { height: 240px !important; max-width: 560px; }

/* 進場畫面與回訪卡片的間距微調 */
#revisitIntro > div { margin: .5rem 0; }

驗證

進場畫面：只有進場卡可見。
工具列：縮小視窗，搜尋/排序/按鈕能換行、不溢出。
任務安排：三格等寬，卡片拖進去會出現淺色外框高亮。
圖表容器：即使 CDN 載入稍慢，區塊高度穩定、不跳動。
可近性：切換分頁焦點明顯；控制元件有焦點外框。

常見錯誤 & 排查

樣式沒生效
- 是否在 <head> 正確加入 <link rel="stylesheet" href="styles.css">？
- 確認路徑與檔名大小寫一致；清除瀏覽器快取再重整。
工具列擠成一團
外層要有 .toolbar；避免內部再寫 display:block!important; 覆蓋。
Grid 三欄失效
.time-grid 需存在，且未被 inline style 覆蓋（已用 !important 覆蓋，可以在確認無誤後移除 inline style。）。
拖曳高亮沒效果
- Day 17 的 dragover / dragleave / drop 有加/移除 .dropping 嗎？
- 使用的元素是否是 .time-slot（或具備對應選取器）？
Chart 區高度怪異
#moodChartWrap / #moodTrendWrap / #moodPieWrap 的高度已在 CSS 固定；若你曾在 JS 動態改高，建議移除以避免衝突。
歷史區塊一開始就占位
確認 historySection 起始有 hidden，且 CSS 有 [hidden]{display:none!important;}。