比較項目	Reveal.js 翻頁式	瀑布式卡片
瀏覽方式	一次看一頁	所有內容在同一頁
切換方式	按鍵切換	滾動瀏覽
HTML 結構	<section>	<div class="card">
適合場景	正式演講簡報	教學、作品集展示
需要框架	需載入 Reveal.js	純 HTML + CSS 即可

觀察重點

• 卡片排列：多張卡片整齊排列在頁面上
• 篩選功能：頂部有分類標籤可快速篩選
• 格狀排版（Grid Layout）：卡片以網格方式呈現，自動適應寬度
• 滾動瀏覽：往下滾動可看到更多卡片

操作步驟

1打開 VS Code

2點選「新增檔案」（或按 Ctrl + N）

3將檔案命名為 my-card-page.html

4輸入基本的 HTML 結構

5按 Ctrl + S 儲存

一張卡片的基本結構

<div class="card">
    <h2>第一張卡片</h2>
    <p>卡片內容</p>
</div>

結構拆解

• <div> = division（區塊），像收納盒把東西包在一起
• class="card" 是卡片的「名字」，方便 CSS 找到它來美化
• <h2> 是卡片標題
• <p> 是卡片內文

多張卡片範例

<div class="card">
    <h2>自我介紹</h2>
    <p>大家好，我是阿亮老師</p>
</div>

<div class="card">
    <h2>我的興趣</h2>
    <p>寫程式、教學、喝咖啡</p>
</div>

<div class="card">
    <h2>學習目標</h2>
    <p>學會用 AI 做出好看的網頁</p>
</div>

關鍵 CSS 屬性

.card {
    background: white;       /* 白色背景 */
    max-width: 800px;        /* 最寬 800px */
    margin: 30px auto;       /* 置中 */
    padding: 40px;           /* 內距 */
    border-radius: 16px;     /* 圓角 */
    box-shadow:
      0 4px 15px rgba(0,0,0,0.1);  /* 陰影 */
}

屬性說明

怎麼打開？

1在任何網頁上按右鍵

2選擇「檢查」（或按 F12）

你會看到什麼？

• 左半邊：HTML 原始碼 — 網頁的骨架結構
• 右半邊：CSS 樣式 — 每個元素的外觀設定

偷學技巧

• 找找看 border-radius 的值是多少
• 看看 box-shadow 怎麼設定的
• 觀察別人用了什麼顏色和字體

版面結構規劃

為什麼要先畫草圖？

• 把腦中的想法「具象化」
• 讓 AI 更清楚你要什麼
• 避免來回修改浪費時間
• 不需要畫得漂亮，能看懂就好

Prompt 要點

• 架構：單頁式 HTML，CSS 內嵌（不需外部檔案）
• 內容區塊：Hero 大標題 + 目錄區 + 6-8 張卡片 + Footer
• 純 CSS：不需要任何 JavaScript 框架

視覺要求

• 藍紫漸層背景
• 卡片圓角（border-radius: 16px）
• 卡片陰影（box-shadow）
• 響應式設計（手機也能正常顯示）

動畫要求

• 使用 Intersection Observer 實現滾動動畫
• 卡片滾動到畫面時淡入浮現

AI 回傳結果

• AI 通常會回傳 200-500 行的 HTML 程式碼
• 包含完整的 HTML 結構 + CSS 樣式
• 可能還包含 JavaScript 動畫效果

操作步驟

1找到 AI 回覆中的程式碼區塊

2點擊「複製」按鈕一鍵複製

3回到 VS Code 貼上程式碼

檢查清單

• 1滾動所有卡片 — 內容是否完整顯示？
• 2縮小視窗測手機 — 響應式有沒有正常運作？
• 3點擊目錄連結 — 能否正確跳到對應區域？
• 4檢查動畫 — 滾動時卡片有沒有淡入效果？

發現問題怎麼辦？

告訴 AI 修正！用文字描述你看到的問題：

「第三張卡片的標題超出邊界了，
請幫我修正讓它自動換行。」

「手機版本時，兩欄變成一欄，
但圖片太大了，請縮小。」