四段合併｜AI 產生 CSS 展示頁

每段皆提供「沙箱預覽」與「可複製原始碼」，方便課堂示範與對照。

A. 純 HTML 無 CSS（對照組）

完全不含樣式，作為與 AI 產生 CSS 後的效果對比。

提示：這是以 <iframe srcdoc> 沙箱方式嵌入，確保四段互不干擾。

B. 淺色設計（example.html）— AI 產生 CSS v1

在純 HTML 基礎上加入「淺色卡片、版面網格、圖片與圖說」等 CSS。

C. 深色強化（example_ver.html）— AI 產生 CSS v2

加入深色主題、Hero 區塊、Pill 導覽、陰影與漸層背景。

D. 基本＋課表樣式（example1.html）— AI 產生表格 CSS

在基本結構上，加入表格的邊框、斑馬紋、表頭底色等樣式。