---
# System prepended metadata

title: "\U0001F3C5 Day 23"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 23

## RWD 基本排版、RWD 排版間距

### 題目

### RWD 基本排版

請複製此 [Codepen](https://codepen.io/hexschool/pen/ZExpovQ) 做出響應式排版：
任務中已提供 HTML 的部分，請同學將 CSS 內有「`...`」部分替換成 CSS 語法，練習將以下版型在**桌機尺寸時設為四個一排**，**平板尺寸時設定為兩個一排**，在**手機尺寸時設定為一個一排**，如圖所示：
>桌機尺寸時設為四個一排

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

>平板尺寸時設定為兩個一排

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

>手機尺寸時設定為一個一排

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


> 需使用 **CSS Reset**

---

### RWD 排版間距
為了讓每個卡片之間都能有間距，可以在卡片左右加上 padding，卡片間的間距就會從兩個 padding 產生出來，此時最左及最右邊的卡片都會多出 padding。
要將最左及最右多出的 padding 消除，就要在卡片外層（整體卡片列表 `.card`）使用 margin 負值回推。
另外，為了讓 container 不會貼齊卡片，container 也需設定左右 padding。
（推擠的值需依照設計稿設定）
以[三四週設計稿](https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/screen/0c592e9b-6edc-48d1-9540-27cef649efb7/specs/)為例，間距寬度為 24px，則推擠的值為 24px/2 = **12px**

<img src="https://i.imgur.com/ZdNE1uw.png" width="300px" style="margin-bottom: 8px">

程式碼範例：
```css=
*, *::before, *::after {
  box-sizing: border-box;
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  /* 依照設計稿 PC 版：
   * 容器寬度為 1296px，因為有設定為 border-box，所以整體寬度需加上左右 padding
   * 整體 container 寬度為 1296px + 12px*2 = 1320px   
   * （關於 box-sizing 觀念可以再回顧 Day7 每日任務）*/
}

.card { /* 卡片列表 */
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
}

.card-item { /* 卡片（寬度設定以 PC 版四個一排為例） */
  width: 25%;
  padding-left: 12px;
  padding-right: 12px;
}

```

請**運用「RWD 基本排版」完成的程式碼**，為卡片之間加上 **24px** 的間距
> 容器寬度：
> 桌機尺寸時為 1296px
> 平板尺寸時為 696px
> 手機尺寸時為 348px
> **需自行調整 container 寬度**


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

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

<!-- 解答：（可以寫在一起，也可以分開提交）
RWD 基本排版：https://codepen.io/hexschool/pen/gOeMNwW 
RWD 基本排版 + 間距：https://codepen.io/hexschool/pen/WNzoydr?editors=1100
-->


回報區
---


|      Discord      |                               CodePen / 答案                               |
|:-----------------:|:--------------------------------------------------------------------------:|
|     薏慈#3795     |             [CodePen](https://codepen.io/its_wang/pen/xxWeGEd)             |
|     𝓛𝓊𝒸𝓎#8635     |             [CodePen](https://codepen.io/lucygirl/pen/PoRbwZR)             |
|   CloThEs#7837    |             [CodePen](https://codepen.io/CloThEsZ/pen/GRxvZNW)             |
|  Iris Huang#6727  |             [CodePen](https://codepen.io/ythuang/pen/XWEeMbR)              |
|    布魯諾#7239    |             [CodePen](https://codepen.io/bruno-yu/pen/ZExXerJ)             |
|   Jamie Wu#9345   |             [CodePen](https://codepen.io/Wu220103/pen/PoRJpQo)             |
|    JackC#0411     |             [CodePen](https://codepen.io/key0329/pen/PoRJpBw)              |
|  Karol-Kuo#5287   |           [CodePen](https://codepen.io/ting-yu-kuo/pen/wvmrJyK)            |
| bonnieli1414#4906 |    [CodePen](https://codepen.io/bonnieli1414/pen/GRxMWeg?editors=1100)     |
|    Clara#1275     |             [CodePen](https://codepen.io/bsupixqu/pen/yLKzMGo)             |
|     咻蹦#1526     |       [CodePen](https://codepen.io/emmasyu/pen/abYLJaj?editors=1100)       |
|     大衛#4869     |             [CodePen](https://codepen.io/exnsrpjc/pen/LYdzWoa)             |
|   Daisy_Li#4231   | [CodePen](https://codepen.io/lidairong-gmail-com/pen/rNdGyZJ?editors=1100) |
|    Arista#5802    |           [CodePen](https://codepen.io/arista-hsieh/pen/YzarVzK)           |
|   WEI_RIO#9342    |       [CodePen](https://codepen.io/wei_wu/pen/oNqGZOO?editors=1100)        |
|   Jenny真#7532    |           [CodePen](https://codepen.io/wei-chen-wu/pen/ExEwWJe)            |
|  Clara Cai#7097   |           [CodePen](https://codepen.io/Clara-Snowy/pen/LYdzyVo)            |
|  christina#6185   |            [Codepen](https://codepen.io/chrisc0210/pen/PoRJmYN)            |
|     L0F0#8733     |               [CodePen](https://codepen.io/l0f0/pen/gOeGWrM)               |
|    toshow#5609    |              [CodePen](https://codepen.io/toshow/pen/MWVEmbX)              |
|     洋蔥#5295     |        [CodePen](https://codepen.io/HSUNA/pen/gOeGmyp?editors=1100)        |
|  PeggyLiao#1552   |     [CodePen](https://codepen.io/PeiJu-Liao/pen/xxWXddN?editors=1100)      |
|    Benson#6763    |             [CodePen](https://codepen.io/kumashow/pen/RwMLVVa)             |
|     小諾#1866     |             [CodePen](https://codepen.io/noichan/pen/QWmqvqQ)              |
|    azami#5986     |              [CodePen](https://codepen.io/azami/pen/BarwRPw)               |
|   LinaChen#1796   |             [CodePen](https://codepen.io/LinaChen/pen/VwXMbRK)             |
|     Ke #1391      |            [Codepen](https://codepen.io/federerke/pen/zYWEwNy)             |
|    Fang #4680     |      [Codepen](https://codepen.io/std95174/pen/dymVWJo?editors=0100)       |
|     威爾#1694     |             [CodePen](https://codepen.io/WILL_Wu/pen/VwXMWwP)              |
|    黑白兔#0684    |            [CodePen](https://codepen.io/johnny329/pen/xxWXrOV)             |
|   Amberhh#2465    |             [CodePen](https://codepen.io/Amberhh/pen/BarwZwq)              |
|    連小艾#0791    |            [Codepen](https://codepen.io/bolaslien/pen/WNzZOdm)             |
|     小白#2406     |            [CodePen](https://codepen.io/gracewhite/pen/abYLWdX)            |
|     QOO#8446      |             [CodePen](https://codepen.io/QOOQOOQ/pen/VwXMbXe)              |
|     鴨鴨#9822     |      [Codepen](https://codepen.io/qrvrqvxv-the-selector/pen/OJvxgYq)       |
|   Amberhh#2465    |       [Codepen](https://codepen.io/Amberhh/pen/BarwZwq?editors=0110)       |
|     威0#6919      |     [Codepen](https://codepen.io/n0918679182/pen/vYReZMr?editors=1100)     |
|   Leo Song#8278   |      [Codepen](https://codepen.io/sunnylaba/pen/dymVRxm?editors=1100)      |
|   Fanglin #4054   |           [CodePen](https://codepen.io/flynn841028/pen/PoRJKPg)            |
|    Chi#7605     |             [Codepen](https://codepen.io/YoChi84/pen/ZExXJLe)               |
|    leeli#6423     |             [Codepen](https://codepen.io/leelilee/pen/KKoXvzV?editors=1100)               
| 黃士桓#7654 | [codenPen](https://codepen.io/shr-huan-huang/pen/PoRJKKM) |
| LHchien33#6232 | [CodenPen](https://codepen.io/lin_chien/pen/mdxBMvb) |
|int#7518|[Codepen](https://codepen.io/intHuang/pen/GRxMMmq)|
|yuyu#6310|[Codepen](https://codepen.io/yuyu0905/pen/ZExXXej?editors=1100)|
|WEI#0797|[Codepen](https://codepen.io/wei-z/pen/PoRJJdj?editors=1100)|
|Barret#1119|[CodePen](https://codepen.io/barret0720/pen/NWYaajv)|
|Henry#7386|[CodePen](https://codepen.io/h1nr9/pen/mdxBqEq)|
|阿翰 #1984|[CodePen](https://codepen.io/JohnHan05/pen/LYdzjMM?editors=1100)|
|zera#6060|[codePen](https://codepen.io/zera-tseng/pen/wvmrdYp)|
|雷雷#7844|[codePen](https://codepen.io/lei-yi-jie/pen/ExEwbXK)|
|Van.CS #2067|[Codepen](https://codepen.io/fbacojji-the-selector/pen/jOzGaGR?editors=1100)|
|Melon #0380|[Codepen](https://codepen.io/BalaFang/pen/KKoXyyj)|
|Vian #7338|[Codepen](https://codepen.io/vianwu31/pen/JjLrOwJ?editors=1100)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/ExEvWrG)|
|Winnie Wu#5468|[Codepen](https://codepen.io/Pooh-Wu/pen/BarwJYy?editors=1100)|
|ajhappy#6488|[Codepen](https://codepen.io/ajhappy5438/pen/dymVZXv)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/oNqGEeN)|
|Hsiu#8767|[Codepen](https://codepen.io/amy-hsiu/pen/MWVEQVq)|
|鑫鑫#4346|[Codepen](https://codepen.io/Neil1024/pen/MWVEVJM?editors=1100)|
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/jOzGzjO?editors=1100)|
| Yunei#6323 |[Codepen](https://codepen.io/Yunei/pen/PoRJRMV)|
| ssozr#4680 |[codepen](https://codepen.io/ssozr/pen/qBoPYzL)|
| Vera#5592 |[codepen](https://codepen.io/skvera/pen/mdxBKLr)|
| yuchenye#6119 |[codepen](https://codepen.io/yuchen/pen/VwXMdEa)|
| NeilLin#3009 |[codepen](https://codepen.io/a0071421/pen/PoRJBme)|
| 我是泇吟 #5189 | [Codepen](https://codepen.io/hexschool/pen/WNzoydr?editors=1100) |
| Yuan962#5897 | [Codepen](https://codepen.io/Jasmine-Liao/pen/yLKzqzm)|
|    YU #0618    |[CodePen](https://codepen.io/yoken_/pen/xxWXJxG)|
 |yu魚#1330   |  [CodePen](https://codepen.io/Yu_yu/pen/YzarLrd)|
 |Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/QWmqJMY)|
|  楓之聲#6945 |[CodePen](https://codepen.io/sshane258/pen/XWEeoKR)|
|  狸貓#5863 |[CodePen](https://codepen.io/tanuki320/pen/eYMGwzw)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/KKoXjqE)|
|Potatolee#7749|[Codepen](https://codepen.io/potatoleee/pen/rNdGEvV)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/RwMjwrV)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/ExEbjPe)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/KKoyVJa)
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/NWYwWPM?editors=1100)|
|逸川#6319|[CodePan](https://codepen.io/bryanlin8911/pen/NWYwrbB)|
|kancheng#3915|[CodePan](https://codepen.io/kancheng/pen/LYdOLKL)|
|YI#0863|[CodePan](https://codepen.io/YI0305/pen/bGvYYGa?editors=0100)|
|yo_yo#2678|[CodePan](https://codepen.io/djmliogn-the-flexboxer/pen/oNqoqbb)|
|Pony#6778|[CodePan](https://codepen.io/Pony0303/pen/zYWPLdY)|
|Tuhacrt#0008|[CodePan](https://codepen.io/Tuhacrt/pen/poLdxer)|
|Tori#1248|[CodePan](https://codepen.io/FlyTori/pen/oNqoaLm)|
|IreneY #0086| [Codepen](https://codepen.io/HalfPlannedJourney/pen/rNdYqmv)|
|Deborah#0033| [Codepen](https://codepen.io/deborah-tsai/pen/JjLOQvX?editors=1100)|
|Carrie #2750| [Codepen](https://codepen.io/carrie-wang/pen/xxWPvEd)|
|mei#8421| [Codepen](https://codepen.io/Shila-Chen/pen/RwMxNbQ)|
|鉦勝 #8333| [Codepen](https://codepen.io/atckmax823/pen/vYRpOOM?editors=1100)|
|piha#9987|[Codepen](https://codepen.io/pihahaha/pen/mdxpdXM)|
|得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/yLKpgwW)|
|wlc#4877|[CodePen](https://codepen.io/arxmyifs/pen/GRxyryE?editors=1100)|
|Cream#3449|[CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/QWmarob?editors=1100)|
|aki|[codepen](https://codepen.io/aki168/pen/MWVrXQO)|
|家洋#6999|[codepen](https://codepen.io/aa235553756/pen/WNzdyyR)|
|choubree#4350 |[Codepen](https://codepen.io/BreeChou/pen/MWVQaVz)|
|Cliff#4606 |[Codepen](https://codepen.io/Cliff_hex/pen/zYWRdBG?editors=1100)|
|艾草#4830 |[Codepen](https://codepen.io/jmkhsutp/pen/dymdQvb?editors=0100)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/YzaemJY)
|rueee#7997|[codepen](https://codepen.io/Jull-C/pen/vYRRWBw)
|Jumpye#8601|[codepen](https://codepen.io/Jumpye/pen/NWYMKEP)
|suihsilan#9485|[codepen](https://codepen.io/suihsilan/pen/ExELyWR)
|kevin8349#6131|[codepen](https://codepen.io/kun8349/pen/wvmjyzR)
|hua#9099|[Codepen](https://codepen.io/LHua/pen/dymeLWY)|
|紙飛機#1335|[Codepen](https://codepen.io/paperplanea/pen/OJvEmvB)|
|肉魚#2149|[Codepen](https://codepen.io/zoechen13/pen/PoRBPWg)|
|Manson許#2295|[Codepen](https://codepen.io/oupbzfxq-the-scripter/pen/ZExMeNj)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/XWEyQGe?editors=1100)|
|NathanJames#8120|[Codepen](https://codepen.io/ufo060204/pen/LYdXKpV)|
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/wvmRKxX)|
|郭芙蘭#6374|[CodePen](https://codepen.io/flora_Kuo/pen/ZExwbym)|
|鎔瑄#8578|[CodePen](https://codepen.io/barbarayou/pen/ZExwOxV)|
|曼曼#8356|[codepen](https://codepen.io/Vanyacheer/pen/GRxeNpY?editors=1100)|
|jin.huang#4666|[codepen](https://codepen.io/Wu220103/pen/PoRJpQo)|
|RuoAn#7124|[codepen](https://codepen.io/LiauRuoAn/pen/QWmPMvx)|
