已作答 0 / 15 題
HTML 基礎
1. 建立一個包含 h1 標題和兩個 p 段落的網頁
HTML 基礎
2. 建立一個有序清單（ol），列出你最喜歡的三種食物
HTML 標籤
3. 建立一個包含圖片和超連結的頁面：顯示一張圖片（https://picsum.photos/300/200），下方放一個連結寫「查看更多」
HTML 標籤
4. 建立一個自我介紹頁面：h1 寫你的名字、一段用 strong 和 em 標記重點的段落、一個無序清單列出 3 項技能
CSS 樣式
5. 建立一個 h1 標題，文字顏色為藍色、置中對齊、字型大小 36px
CSS 樣式
6. 建立三個 div，分別用紅、綠、藍三種背景色，每個 div 裡面放一段白色文字，要有 padding 和圓角
排版
7. 用 display: flex 建立一個水平導覽列，包含 4 個連結，間距 gap: 20px，背景用淺灰色
排版
8. 用 flex 做三張等寬的商品卡片（水平排列），每張卡片有邊框、圓角、padding，裡面放商品名稱和價格
響應式
9. 做一個兩欄版面，使用 flex-wrap: wrap，讓寬度不夠時自動變成上下排列。左欄放主要內容，右欄放側邊欄
綜合
10. 做一個完整的網頁：header（深色背景、白字、網站名稱置中）、三欄商品卡片（用 flex 排列）、footer（灰色小字置中）。加分題：讓卡片在窄螢幕時自動變成垂直排列
HTML 標籤
11. 建立一個 HTML 表格（table），包含表頭列和兩行資料：欄位為「品名」和「價格」
CSS 樣式
12. 建立一個按鈕，背景漸層色（從藍到紫）、白色文字、圓角 8px、padding 12px 24px
排版
13. 用 CSS 讓一個 div 在頁面中水平和垂直都置中（使用 flex）
HTML 基礎
14. 建立一個語意化的文章結構：使用 article、h2 標題、兩個 p 段落、一個 footer 標示作者
CSS 樣式
15. 用 CSS 做一張商品卡片：有陰影（box-shadow）、圓角、hover 時陰影加深的互動效果
確認作答完畢後，點擊交卷