---
# System prepended metadata

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

---

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

## container 容器應用
通常網頁的主要內容都會放在 container 裡，為了讓視覺瀏覽可以專注在網頁中心。
> 設計稿外層 1920px 為瀏覽器邊界示意，並非整體 body、容器的寬度
> ![](https://i.imgur.com/lEkZFaf.png)


### 觀看 container 的範圍
1. 點選設計稿右側 `</>` icon
   ![](https://i.imgur.com/mvxhBlj.png)

2. 將右側欄滑至最下方「布局網格」
   ![](https://i.imgur.com/DzXL1pv.png)
   
   點選右上按鈕開啟

3. 可以觀看到被藍色區塊覆蓋的部分就是 container 的範圍
   ![](https://i.imgur.com/FUfvf67.png)


### 計算 container 的寬度
以[第二週設計稿](https://xd.adobe.com/view/27f2c1f7-6c48-42b5-a5fa-6db8eec461a5-72a1/specs/)為例

**計算方式一：**
![](https://i.imgur.com/E71kHEG.png)
<img src="https://i.imgur.com/6mJ3VaY.png" width="500px">

總共有 12 列（藍色區塊）x 一列 78px + 11 個間隔 x 一個間隔寬為 24px = **1200px**

**計算方式二：**
用設計稿邊界 1920px 減去兩側邊距 360px

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

1920px - 360px*2 = **1200px**

### 容器實際運用
設定 .container 寬度並搭配 `margin: 0 auto;` 讓整體內容可以放在畫面中間，水平置中

### 題目
請複製此 [Codepen](https://codepen.io/hexschool/pen/bGveoLq)，補上 `...` 的部分
> 容器寬度為第二週設計稿的容器寬度



## 回報流程

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

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

<!-- 解答：https://codepen.io/hexschool/pen/wvmWrOq -->


回報區
---


|      Discord      |                           CodePen / 答案                            |
|:-----------------:|:-------------------------------------------------------------------:|
|     薏慈#3795     |         [CodePen](https://codepen.io/its_wang/pen/poLZyjQ)          |
|     Anna Liu#3794     |         [CodePen](https://codepen.io/anna618/pen/MWVmxbj)          |
|     小鐵#2814    |         [CodePen](https://codepen.io/xiron/pen/dymWaQV)          |
|     𝓛𝓊𝒸𝓎#8635     |         [CodePen](https://codepen.io/lucygirl/pen/yLKJEWq)          |
|   CloThEs#2406    |         [CodePen](https://codepen.io/CloThEsZ/pen/VwXpNXj)          |
|     小白#2406     |        [CodePen](https://codepen.io/gracewhite/pen/GRxmMbw)         |
|    布魯諾#7239    |         [CodePen](https://codepen.io/bruno-yu/pen/dymWZWq)          |
|   Amberhh#2465    |          [CodePen](https://codepen.io/Amberhh/pen/ZExKayK)          |
|  Clara Cai#7097   | [CodePen](https://codepen.io/Clara-Snowy/pen/qBomVjK?editors=1100)  |
|      YC#2522      |           [CodePen](https://codepen.io/YCLu/pen/eYMWeeE)            |
|    JackC#0411     |          [CodePen](https://codepen.io/key0329/pen/xxWdPPj)          |
|     L0F0#8733     |           [CodePen](https://codepen.io/l0f0/pen/eYMWeyE)            |
|     Hsiu#8767     |         [CodePen](https://codepen.io/amy-hsiu/pen/GRxmOyb)          |
|    黃士桓#7654    |      [codePen](https://codepen.io/shr-huan-huang/pen/YzaVEYB)       |
|  Iris Huang#6727  |          [CodePen](https://codepen.io/ythuang/pen/LYdyOQJ)          |
|    azami#5986     |           [CodePen](https://codepen.io/azami/pen/dymWZmw)           |
|  christina#6185   |        [Codepen](https://codepen.io/chrisc0210/pen/LYdyOBX)         |
|     威爾#1694     |          [CodePen](https://codepen.io/WILL_Wu/pen/GRxmOxV)          |
|    Benson#6763    |         [CodePen](https://codepen.io/kumashow/pen/NWYjwzN)          |
|    Clara#1275     |         [CodePen](https://codepen.io/bsupixqu/pen/dymWZew)          |
|     洋蔥#5295     |    [CodePen](https://codepen.io/HSUNA/pen/wvmdPEM?editors=1100)     |
| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/ZExKawa?editors=1100) |
|   Jenny真#7532    | [CodePen](https://codepen.io/wei-chen-wu/pen/qBomVzg?editors=1100)  |
|   Tuhacrt#0008    |          [CodePen](https://codepen.io/Tuhacrt/pen/JjLNOQw)          |
|   WEI_RIO#9342    |    [CodePen](https://codepen.io/wei_wu/pen/ZExKagr?editors=1100)    |
|     Sin#0040      |   [CodePen](https://codepen.io/sophmfyt-the-sasster/pen/oNqWpjr)    |
|     大衛#4869     |         [CodePen](https://codepen.io/exnsrpjc/pen/eYMWyzj)          |
|  Karol-Kuo#5287   |        [CodePen](https://codepen.io/ting-yu-kuo/pen/NWYjXpv)        |
|      YI#0863      |          [CodePen](https://codepen.io/YI0305/pen/VwXbyaZ)           |
|     QOO#8446      |          [CodePen](https://codepen.io/QOOQOOQ/pen/ExEmoZr)          |
|    黑白兔#0684    |         [CodePen](https://codepen.io/johnny329/pen/yLKbpPE)         |
|     int#7518      |         [Codepen](https://codepen.io/intHuang/pen/JjLNMpg)          |
|     小諾#1866     |          [Codepen](https://codepen.io/noichan/pen/NWYjXYw)          |
| JingXuanLin#3371  |         [CodePen](https://codepen.io/YouShuang/pen/mdxmpRV)         |
|    楓之聲#6945    |         [CodePen](https://codepen.io/sshane258/pen/mdxmpQR)         |
|    hungya#0773    |         [CodePen](https://codepen.io/hungya777/pen/wvmdpOp)         |
|  PeggyLiao#1552   |  [CodePen](https://codepen.io/PeiJu-Liao/pen/MWVmQWR?editors=1100)  |
|    Yunei#6323     |           [CodePen](https://codepen.io/Yunei/pen/OJvmQbZ)           |
|   Jamie Wu#9345   |         [CodePen](https://codepen.io/Wu220103/pen/OJvmQOw)          |
|   Daisy_Li#4231   |    [CodePen](https://codepen.io/lidairong-gmail-com/pen/MWVmQBY)    |
|     威0#6919      |        [Codepen](https://codepen.io/n0918679182/pen/yLKbvWY)        |
|    Arista#5802    |       [Codepen](https://codepen.io/arista-hsieh/pen/LYdydEQ)        |
|   LinaChen#1796   |         [Codepen](https://codepen.io/LinaChen/pen/PoRmRqL)          |
|  Ron Liang#7277   |          [Codepen](https://codepen.io/ron-go/pen/jOzmzGr)           |
|    JarDar#6980    |         [codepen](https://codepen.io/jardarpen/pen/KKomovM)         |
|  jin.huang#4666   |   [codepen](https://codepen.io/haha1196/pen/VwXbXzV?editors=1100)   |
|   IreneY #0086    |    [codepen](https://codepen.io/HalfPlannedJourney/pen/PoRmRQY)     |
|    toshow#5609    |          [CodePen](https://codepen.io/toshow/pen/GRxmxxb)           |
|     溡月#2553     |      [Codepen](https://codepen.io/winterwinterpu/pen/qBomoJJ)       |
|     yu魚#1330     |           [CodePen](https://codepen.io/Yu_yu/pen/XWEREQq)           |
|     群嘉#3943     |   [CodePend](https://codepen.io/efzdamnp-the-lessful/pen/MWVmGYr)   |
|    SASIMI#5099    |        [CodePen](https://codepen.io/sashimi1327/pen/WNzRZWw)        |
|    阿翰 #1984     |         [CodePen](https://codepen.io/JohnHan05/pen/zYWwjwy)         |
|  Yuna Huang#2692  |         [CodePen](https://codepen.io/Yuna1002/pen/rNdmvPb)          |
|     雷雷#7844     |        [CodePen](https://codepen.io/lei-yi-jie/pen/abYWGMo)         |
|    Henry#7386     |           [CodePen](https://codepen.io/h1nr9/pen/poLPKzq)           |
|   Yuan962#5897    |       [Codepen](https://codepen.io/Jasmine-Liao/pen/WNzjyRY)        |
|  Winnie Wu#5468   |   [CodePen](https://codepen.io/Pooh-Wu/pen/abYWjLq?editors=1100)    |
|  suihsilan#9485   |         [Codepen](https://codepen.io/suihsilan/pen/RwMVBjd)         |
|    Melon#0380     |         [Codepen](https://codepen.io/BalaFang/pen/rNdmrop)          |
|     WEI#0797      |           [Codepen](https://codepen.io/wei-z/pen/ExEmpJR)           |
|     狸貓#5863     |         [Codepen](https://codepen.io/tanuki320/pen/JjLNaWV)         |
|  Sentiments#4883  |        [codepen](https://codepen.io/Sentiments/pen/qBomQmo)         |
|     YU #0618      |          [CodePen](https://codepen.io/yoken_/pen/jOzmQvV)           |
|    ssozr#4680     |           [codepen](https://codepen.io/ssozr/pen/KKombay)           |
|     Shuo#1596     |      [codepen](https://codepen.io/chiangchungshuo/pen/qBomLGd)      |
|     鑫鑫#4346     |         [CodePen](https://codepen.io/Neil1024/pen/ExEmGqY)          |
|     鴨鴨#9822     |   [CodePen](https://codepen.io/qrvrqvxv-the-selector/pen/abYWXzz)   |
|     yuyu#6310     |   [CodePen](https://codepen.io/yuyu0905/pen/NWYjoNB?editors=1100)   |
|     Chi#7605      |      [Codepen](https://codepen.io/YoChi84/pen/bGvWzgj)              |
|     leeli#6243      |      [Codepen](https://codepen.io/leelilee/pen/ExEmrMN?editors=1100)              |
|得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/LYdyobR) |
| Jason1#2538 | [CodePen](https://codepen.io/jotwxezb-the-encoder/pen/WNzjBJP) |
| ajahppy#6488 | [CodePen](https://codepen.io/ajhappy5438/pen/rNdwaNd) |
| mickey#8745 | [CodePen](https://codepen.io/weizhetseng/pen/MWVoYwO) |
|Ke#1391|[Codepen](https://codepen.io/federerke/pen/qBojEpz)|
|choubree#4350|[Codepen](https://codepen.io/BreeChou/pen/vYRZNLa)|
|zera#6060|[Codepen](https://codepen.io/zera-tseng/pen/rNdwOYm)|
| Fanglin#4054 | [CodePen](https://codepen.io/flynn841028/pen/oNqwbGK) |
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/XWEgdNr)|
|Pony#6778|[Codepen](https://codepen.io/Pony0303/pen/MWVoezm)|
|鉦勝#8333|[Codepen](https://codepen.io/atckmax823/pen/wvmeozm?editors=1100)|
|GARBO#6659|[Codepen](https://codepen.io/garbo8130/pen/zYWzNpd)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/BarZZGa)|
| 我是泇吟 #5189 | [Codepen](https://codepen.io/kljuqbxs/pen/eYMRRXE) |
| 咻蹦#1526 | [Codepen](https://codepen.io/emmasyu/pen/qBojXvW) |
| Vian#7338 | [Codepen](https://codepen.io/vianwu31/pen/jOzwYQZ?editors=1100) |
| Vera#5592 | [Codepen](https://codepen.io/skvera/pen/bGvRvpJ) |
| yuchenye#6119 | [Codepen](https://codepen.io/yuchen/pen/yLKXKxV) |
| NeilLin#3009 | [Codepen](https://codepen.io/a0071421/pen/zYWzbQP?editors=1100) |
| Tori1248 | [Codepen](https://codepen.io/FlyTori/pen/gOeRJxG) |
| Nini Chen#5790| [Codepen](https://codepen.io/ninistyle/pen/OJvgKVP?editors=1100) |
| Joyce#3790 | [Codepen](https://codepen.io/joycehuang/pen/wvmqGxj?editors=1100) |
|hua#9099|[Codepen](https://codepen.io/LHua/pen/zYWdBBB)|
|Leo Song#8278|[Codepen](https://codepen.io/sunnylaba/pen/bGvreYy?editors=1100)|
|Van.CS|[codepen](https://codepen.io/fbacojji-the-selector/pen/WNzERbP)|
|肉魚#2149|[codepen](https://codepen.io/zoechen13/pen/gOexGMg)|
|piha#9987|[codepen](https://codepen.io/pihahaha/pen/rNdzpmp)|
|阿蘇#8531|[codepen](https://codepen.io/susu3131/pen/jOzLXgG?editors=1100)|
| LHchien33#6232 |[codepen](https://codepen.io/lin_chien/pen/RwMZdZM)|
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/abYLbYp)|
|曼曼#8356|[codepen](https://codepen.io/Vanyacheer/pen/GRxMJmN?editors=1100)|
|Fang #4680| [Codepen](https://codepen.io/std95174/pen/MWVEKyJ)|
| 柏PO #5617| [CodePen](https://codepen.io/apo_1798/pen/yLKzgwY)|
|kancheng#3915| [CodePen](https://codepen.io/kancheng/pen/NWYwjBv)|
|Deborah#0033| [CodePen](https://codepen.io/deborah-tsai/pen/qBoVogR)|
|Carrie #2750| [CodePen](https://codepen.io/carrie-wang/pen/yLKPddm)|
|mei#8421| [CodePen](https://codepen.io/Shila-Chen/pen/PoREoWK)|
|Cream#3449| [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/VwXyvwv)|
|aki|[codepen](https://codepen.io/aki168/pen/WNzdyxw)|
|rueee#7997|[codepen](https://codepen.io/Jull-C/pen/MWVQmjb)|
|Cliff#4606|[codepen](https://codepen.io/Cliff_hex/pen/vYRdZVy?editors=1100)|
|sophiee#7015|[CodePen](https://codepen.io/sophiee2727/pen/ZExrgWN)
|Jumpye#8601|[codepen](https://codepen.io/Jumpye/pen/BarrmBo?editors=1100)|
|鎔瑄#8578|[codepen](https://codepen.io/barbarayou/pen/eYMMKqG) |
|ROKA#4051|[CodePen](https://codepen.io/chengchiaoyi/pen/MWVVZJL?editors=1100)
|kevin8349#6131|[CodePen](https://codepen.io/kun8349/pen/xxWjpBZ)
|jeter#8014|[CodePen](https://codepen.io/gi-tai-she/pen/abYKNbv?editors=1100)
|紙飛機#1335|[CodePen](https://codepen.io/paperplanea/pen/BarVKee)
|艾芮絲#6060|[codepen](https://codepen.io/wangyingju/pen/JjLBXKY) |
|Manson許#2295|[codepen](https://codepen.io/oupbzfxq-the-scripter/pen/wvmxQvR) |
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/vYRVoVM)|
|Rena#6249 |[CodePen](https://codepen.io/aureate0116/pen/XWEyZoO)|
|RuoAn#7124 |[CodePen](https://codepen.io/LiauRuoAn/pen/YzaRdjJ)|
|Bonnie邦妮#7529 |[CodePen](https://codepen.io/Calista316/pen/ZExmVme)|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/zYWMegX)|
|瑞瑞 #4605|[CodePen](https://codepen.io/tsai-li-ting/pen/gOeZXyv)|
|Velma#1693|[CodePen](https://codepen.io/Ze1225/pen/ZEozxrG)|
|KT Hsieh#2861|[CodePen](https://codepen.io/KTHsieh/pen/wvjapEO)