Day 12
版型切版：完成主要版面排版

今天的任務是將前幾天完成的設計規格文件與HTML骨架正式轉換成視覺化的網頁版面，也就是俗稱的「切版」工作。切版的核心是利用HTML+CSS將設計稿忠實呈現在瀏覽器上，包含首頁、遊戲畫面與結算頁的基礎排版，並確保在不同裝置上都能維持一致且美觀的效果。這個過程不僅是把圖變成網頁，更是建立之後動畫、遊戲邏輯和互動功能的基礎。

1. 切版前準備
   在正式開始之前，先檢查以下事項，確保開發環境與資源完整：
   設計稿：打開 Day 10 的設計規格文件，確認每個區塊的尺寸、配色與字體大小。
   素材整理：將 LOGO、圖示、背景圖等資源放入 images 資料夾，命名清楚以便引用。
   HTML 檢查：確認 index.html 骨架內的區塊名稱（class、id）是否與設計稿一致，方便直接套用 CSS。

2. CSS 排版策略
   切版的核心是透過 CSS 定義各區塊的定位、間距與對齊方式，以下是主要技術與策略：

版面布局 (Layout)
Flexbox：用於導覽列、遊戲區塊、按鈕排列。
css .site-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #A3D8F4; /* 主色 */ }
CSS Grid：適合複雜遊戲區域，例如翻牌遊戲的卡片網格或迷宮格子。

```css
.game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
```

響應式設計 (RWD)
利用 @media 語法調整手機與平板版面：
css @media (max-width: 768px) { .game-container { padding: 10px; } .logo { font-size: 24px; } }
保持圖片與文字比例，使用 % 或 vw/vh 作為單位，讓畫面隨視窗大小自動縮放。

色彩與字體套用
將 Day 9 設定的配色系統轉換成 CSS 變數，方便全站統一管理：
css :root { --primary-color: #A3D8F4; --secondary-color: #FFB347; --accent-color: #FF6B6B; --bg-color: #FDFDFD; --text-color: #333333; } body { background-color: var(--bg-color); color: var(--text-color); font-family: 'Nunito', '思源黑體', sans-serif; }

3. 主要頁面切版實作
   根據設計稿，完成以下主要區塊排版：
   首頁 (Home)
   LOGO置中顯示，開始遊戲按鈕位於下方，並預留背景圖或動畫的空間。
   使用 Flexbox 讓 LOGO 與按鈕在桌面與手機版都能置中對齊。

遊戲頁面 (Game Scene)
遊戲主體區域（例如卡片區、迷宮區）置於中央，兩側可放計分板與時間倒數。
採用 CSS Grid 排列遊戲元素，方便之後以 JS 動態修改。

結算頁 (Result Screen)
分數顯示區域置中，重新挑戰與返回首頁按鈕使用主色搭配強調色，增加視覺吸引力。
預留動畫效果，例如分數彈跳或背景淡入。

4. 細節優化
   完成主要排版後，進行以下微調：
   間距調整：確保各區塊之間的留白（padding、margin）適中，避免畫面擁擠。
   對齊檢查：檢查不同瀏覽器（Chrome、Safari、Firefox）中的呈現是否一致。
   字體比例：確認標題、內文、按鈕字體大小符合層次需求。
   圖片壓縮：確保圖片檔案不過大，以提升載入速度。

5. 測試與版本管理
   跨裝置測試：在桌機、平板與手機上開啟網頁，確保版面不會跑版。
   Git 提交：完成初步排版後，將最新版本提交到 GitHub：

git add .
git commit -m "Complete main layout with responsive design"

今日成果
經過 Day 12 的努力，我們已經完成遊戲網站的主要視覺排版，首頁、遊戲頁與結算頁都能在瀏覽器中呈現出清晰的結構與美觀的排版。雖然此階段的頁面還沒有互動功能，但已經提供了一個可視化的框架，方便接下來直接加入CSS 動畫、JavaScript 事件監聽以及遊戲邏輯。