---
# System prepended metadata

title: 第二週小組任務

---

# 第二週小組任務

## Flex 題目

| No. | 題目名稱     | 負責組員      | Codepen                                                                      |
| --- | ------------ | ------------- | ---------------------------------------------------------------------------- |
| 1   | 並排卡片     | Rex Chu       | [Codepen](https://codepen.io/rex_chu/pen/LYQbeXE)                            |
| 2   | 雙欄排版     | Raymond       | [Codepen](https://codepen.io/manshun-lam/pen/PoQbBQr)                        |
| 3   | 雙欄選單設計 | Mojito        | [Codepen](https://codepen.io/vu3xk41997/pen/XWZpyLe)                         |
| 4   | 表頭表尾設計 | Cheng-Yu#1813 | [Codepen](https://codepen.io/ball77111/pen/PoQWpBG)                          |
| 5   | 常見三種排版 | 笑笑#8811     | [Codepen](https://codepen.io/laugh0403/pen/qBxRmrO)                          |
| 6   | 圖文並排     | QTPie#7874    | [Codepen](https://codepen.io/gaiyjjhk-the-scripter/pen/MWQJjor?editors=1100) |
| 7   | 首頁橫幅排版 | KK309#7037    |   [Codepen](https://codepen.io/taeloxol/pen/QWQdPQv)       |
| 8   | 圖文並排設計 | Ning#6363     | [Codepen](https://codepen.io/fangninglin/pen/qBxqzzJ)                        |
| 9   | 訂單明細     | Doraine       | [Codepen](https://codepen.io/amiinu/pen/ExQNbmw?editors=1100)                |
| 10  | 產品列表     | Stacey#1720   | [Codepen](https://codepen.io/oranggggggge/pen/bGLRObQ?editors=1100)


## 檢核點
### 關卡共同注意點：

1. CSS 命名語意化
2. 外層 .wrap 可以設定 width, margin: 0 auto 讓版面水平置中
3. 連結都要記得加上 hover 效果，以提升使用者體驗哦
4. 區塊盡量不要寫死高度，如需留白可以使用 padding
5. 不要直接在 HTML 標籤上設定 CSS 樣式，因為一個網頁上有很多 h2, p，若寫死的話之後會需要互相覆蓋比較麻煩且不好管理。
6. 元素本身就是由上到下排列，所以內層（標題、內文）的區塊就不需要設定 flex。例如：第一關的三個區塊、第五關的中間區塊

### 部分關卡重點：

* 關卡五：
    * 第三個區塊建議使用 row-reverse，這樣就不需要調整 HTML 結構順序
* 關卡十：
    * 甜點類別非列表內容，請不要包在 ul li 中




## Discord討論
![](https://i.imgur.com/frELcXA.png)

![](https://i.imgur.com/lhAWtih.png)

![](https://i.imgur.com/3GIE6x7.png)
