---
# System prepended metadata

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

---

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

## 整合相同樣式
相同樣式設定，可以嘗試統一使用一個 class 命名，整合樣式。
可以簡化程式碼、增加程式碼的可讀性以及複用性。

### 例子

```htmlembedded=
<div class="profile">
  <h2>個人資料</h2>
</div>
<div class="education">
  <h2>學歷</h2>
</div>
```
```css=
.profile, .education {
  width: 1200px;
  margin: 0 auto;
}

.profile h2, .education h2 {
  font-size: 32px;
  line-height: 48px;
}
```
以此程式碼為例，
可以將 `.profile`, `.education` 統一命名為 `.container` ，
`.profile h2`, `.education h2` 可以另外命名一個 class 像是：`.title` 來設定樣式

整體可以調整為：
```htmlembedded=
<div class="container">
  <h2 class="title">個人資料</h2>
</div>
<div class="container">
  <h2 class="title">學歷</h2>
</div>
```
```css=
.container {
  width: 1200px;
  margin: 0 auto;
}

.title {
  font-size: 32px;
  line-height: 48px;
}
```

### 題目
請嘗試將此 [Codepen](https://codepen.io/hexschool/pen/dymyoLw) 中相同的樣式整合。

提示：
- 各區塊都有 `width: 1200px; margin: 0 auto;` 的設定
- h2 標題的文字樣式相同
- 有兩種文字顏色，可以分別命名兩個 class 運用
- 各區塊 span 樣式相同（文字、margin）



## 回報流程

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

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

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


回報區
---


|       Discord       |                                  CodePen / 答案                                  |
|:-------------------:|:--------------------------------------------------------------------------------:|
|    薏慈#3795    |                [CodePen](https://codepen.io/its_wang/pen/xxWzbwe) 
|    嗶嗶羊#8042    |                [CodePen](https://codepen.io/mazizlte-the-typescripter/pen/yLKapEY?editors=1100) 
|    Anna Liu#3794    |                [CodePen](https://codepen.io/anna618/pen/ExEggXZ)                 |
|      小鐵#2814      |                 [CodePen](https://codepen.io/xiron/pen/wvmzGXo)                  |
|      𝓛𝓊𝒸𝓎#8635      |                [CodePen](https://codepen.io/lucygirl/pen/gOePPKP)                |
|     布魯諾#7239     |                [CodePen](https://codepen.io/bruno-yu/pen/LYdZoNX)                |
|   Iris Huang#6727   |                [CodePen](https://codepen.io/ythuang/pen/NWYrVdR)                 |
|       YC#2522       |                  [CodePen](https://codepen.io/YCLu/pen/YzaWbZo)                  |
|     pidder#7315     |               [CodePen](https://codepen.io/pidderliao/pen/QWmERGd)               |
|   Karol-Kuo#5287    |              [CodePen](https://codepen.io/ting-yu-kuo/pen/LYdZoza)               |
|     Clara#1275      |         [CodePen](https://codepen.io/bsupixqu/pen/ZExONyv?editors=1100)          |
|  bonnieli1414#4906  |       [CodePen](https://codepen.io/bonnieli1414/pen/wvmWbrz?editors=1100)        |
|     JackC#0411      |                [CodePen](https://codepen.io/key0329/pen/qBoNGov)                 |
|      洋蔥#5295      |           [CodePen](https://codepen.io/HSUNA/pen/OJvXYjM?editors=1100)           |
|    Daisy_Li#4231    |    [codepen](https://codepen.io/lidairong-gmail-com/pen/dymXEWL?editors=1100)    |
|      威爾#1694      |                [CodePen](https://codepen.io/WILL_Wu/pen/QWmERBM)                 |
|    WEI_RIO#9342     |          [CodePen](https://codepen.io/wei_wu/pen/rNdLgRq?editors=1100)           |
|    Jenny真#7532     |        [CodePen](https://codepen.io/wei-chen-wu/pen/MWVedXV?editors=1100)        |
|      Hsiu#8767      |                [CodePen](https://codepen.io/amy-hsiu/pen/YzaWbby)                |
|    LinaChen#1796    |                [CodePen](https://codepen.io/LinaChen/pen/WNzxBxG)                |
|     peter.chen#     |         [CodePen](https://codepen.io/JIAN-RONG/pen/oNqLrxj?editors=1100)         |
|      Sin#0040       |          [CodePen](https://codepen.io/sophmfyt-the-sasster/pen/mdxEYZE)          |
|       Van.CS        |   [Codepen](https://codepen.io/fbacojji-the-selector/pen/ZExOdOV?editors=1100)   |
|      PeggyLiao      |        [CodePen](https://codepen.io/PeiJu-Liao/pen/yLKJdoG?editors=1100)         |
|      群嘉#3943      |          [CodePen](https://codepen.io/efzdamnp-the-lessful/pen/XWEKLNw)          |
|   LHchien33#6232    |               [CodePen](https://codepen.io/lin_chien/pen/mdxEZxM)                |
|      小諾#1866      |                [CodePen](https://codepen.io/noichan/pen/vYRKqaZ)                 |
|      狸貓#5863      |               [CodePen](https://codepen.io/tanuki320/pen/Barzgrr)                |
|      yuyu#6310      |         [CodePen](https://codepen.io/yuyu0905/pen/WNzxqdK?editors=1100)          |
|      威0#6919       |              [CodePen](https://codepen.io/n0918679182/pen/wvmWLYx)               |
|     Aritan#1931     |                 [CodePen](https://codepen.io/Aritan/pen/VwXjJNW)                 |
|      小白#2406      |               [CodePen](https://codepen.io/gracewhite/pen/yLKJWoz)               |
|      小樽#3151      |               [CodePen](https://codepen.io/tzuen-liou/pen/jOzrgLO)               |
|    Jamie Wu#9345    |                [CodePen](https://codepen.io/Wu220103/pen/vYRKozV)                |
|      zera#6060      |               [CodePen](https://codepen.io/zera-tseng/pen/ZExOgZe)               |
|     Melon#0380      |                [CodePen](https://codepen.io/BalaFang/pen/OJvXKGK)                |
|   我是泇吟 #5189    |                [CodePen](https://codepen.io/kljuqbxs/pen/rNdLXgz)                |
|     Mylène#2481     |              [Codepen](https://codepen.io/hamajibashi/pen/abYZexE)               |
|      鴨鴨#9822      |   [CodePen](https://codepen.io/qrvrqvxv-the-selector/pen/QWmKLLN?editors=1100)   |
|     leeli #6243     |         [CodePen](https://codepen.io/leelilee/pen/GRxqVba?editors=1100)          |
|     黃士桓#7654     |      [codePen](https://codepen.io/shr-huan-huang/pen/ZExpzWX?editors=1100)       |
|      大衛#4869      |         [codePen](https://codepen.io/exnsrpjc/pen/dympbyQ?editors=1100)          |
|    JarDar #6980     |               [codepen](https://codepen.io/jardarpen/pen/RwMGbaz)                |
|      QOO #8446      |          [codepen](https://codepen.io/QOOQOOQ/pen/WNzxVBQ?editors=1100)          |
|      Kiwi#9804      |                [Codepen](https://codepen.io/kiwi1113/pen/BarLBmz)                |
|       YI#0863       |          [Codepen](https://codepen.io/YI0305/pen/yLKaBZK?editors=1100)           |
|     Benson#6763     |                [Codepen](https://codepen.io/kumashow/pen/QWmKWEr)                |
|      yu魚#1330      |                 [CodePen](https://codepen.io/Yu_yu/pen/vYRXBvO)                  |
|    Tuhacrt#0008     |                [CodePen](https://codepen.io/Tuhacrt/pen/ZExpEMd)                 |
|    CloThEs#7837     |           [CodePen](https://codepen.io/bogwdnxx-the-sans/pen/YzaGPzE)            |
|   Winnie Wu#5468    |          [CodePen](https://codepen.io/Pooh-Wu/pen/yLKayVy?editors=1100)          |
|   suihsilan#9485    |               [CodePen](https://codepen.io/suihsilan/pen/bGvwGvK)                |
|      LINK#1933      |                [CodePen](https://codepen.io/miyayoe/pen/OJvRPQq)                 |
|     Henry#7386      |                 [CodePen](https://codepen.io/h1nr9/pen/BarLydb)                  |
|      雷雷#7844      |               [CodePen](https://codepen.io/lei-yi-jie/pen/wvmzvJp)               |
|      熊二#3824      |                [CodePen](https://codepen.io/BeckLai/pen/PoRGwxv)                 |
|      Chi#7605       |                [Codepen](https://codepen.io/YoChi84/pen/WNzGbgb)                 |
|    IreneY #0086     |           [Codepen](https://codepen.io/HalfPlannedJourney/pen/OJvRPEG)           |
|  JingXuanLin #3371  |               [CodePen](https://codepen.io/YouShuang/pen/oNqzXxQ)                |
|     SASIMI#5099     |              [CodePen](https://codepen.io/sashimi1327/pen/vYRXOmq)               |
|    ajhappy#6488     |              [Codepen](https://codepen.io/ajhappy5438/pen/bGvwVqL)               |
|    Fanglin#4054     |        [Codepen](https://codepen.io/flynn841028/pen/wvmzapz?editors=1100)        |
|     Joyce#3790      |        [Codepen](https://codepen.io/joycehuang/pen/zYWKvRO?editors=1100)         |
|   浪裡小白龍#6860   |                 [Codepen](https://codepen.io/Emillo/pen/eYMdJBJ)                 |
|  Ryan Chiang#6649   |        [Codepen](https://codepen.io/ryanchiang/pen/jOzMWbo?editors=1100)         |
|      int#7518       |         [Codepen](https://codepen.io/intHuang/pen/ExEgPPg?editors=1100)          |
|    RayChen#6088     |              [Codepen](https://codepen.io/raychen1996/pen/OJvRMre)               |
|     Yunei#6323      |                 [Codepen](https://codepen.io/Yunei/pen/oNqzbRM)                  |
|     ssozr#4680      |                 [Codepen](https://codepen.io/ssozr/pen/RwMGrEE)                  |
| 此暱稱已被使用#6514 |               [Codepen](https://codepen.io/pnjle6587/pen/xxWEVwj)                |
|      咻蹦#1526      |                [Codepen](https://codepen.io/emmasyu/pen/yLKaemV)                 |
|    Wei-Ting#7691    |             [Codepen](https://codepen.io/hellowei-ting/pen/jOzMqPM)              |
|  Yuna Huang #2692   |         [Codepen](https://codepen.io/Yuna1002/pen/rNdMxZy?editors=1100)          |
|      肉魚#2149      |               [Codepen](https://codepen.io/zoechen13/pen/BarLKwK)                |
|     Halla #0431     | [Codepen](https://codepen.io/wawykddh-the-typescripter/pen/mdxrEer?editors=1100) |
|    Yuan962#5897     |              [Codepen](https://codepen.io/Jasmine-Liao/pen/ExEggvZ)              |
|      阿蘇#8531      |         [Codepen](https://codepen.io/susu8327/pen/KKoggRp?editors=1100)          |
|     Jason1#2538     |          [CodePen](https://codepen.io/jotwxezb-the-encoder/pen/ZExpOmd)          |
|     阿基基#2557     |                [Codepen](https://codepen.io/JIJI_GNI/pen/abYmBzq)                |
|     hungya#0773     |         [Codepen](https://codepen.io/hungya777/pen/NWYRROK?editors=1100)         |
|       Ke#1391       |               [Codepen](https://codepen.io/federerke/pen/GRxjNWK)                |
|     楓之聲#6945     |               [Codepen](https://codepen.io/sshane258/pen/jOzMVKw)                |
|      Vera#5592      |                 [Codepen](https://codepen.io/skvera/pen/RwMGKmL)                 |
|      YU #0618       |                 [CodePen](https://codepen.io/yoken_/pen/qBoarbr)                 |
|    NeilLin#3009     |                [CodePen](https://codepen.io/a0071421/pen/VwXKMOw)                |
|    Amberhh#2465     |          [CodePen](https://codepen.io/Amberhh/pen/zYWKEbm?editors=0110)          |
|     鉦勝 #8333      |        [CodePen](https://codepen.io/atckmax823/pen/yLKaPBj?editors=1100)         |
|   Andy Hung#3335    |              [CodePen](https://codepen.io/andyhung0723/pen/WNzGdeL)              |
|   Leo Song #8278    |         [Codepen](https://codepen.io/sunnylaba/pen/JjLRMoR?editors=1100)         |
|      Vian#7338      |                [Codepen](https://codepen.io/vianwu31/pen/PoRGENB)                |
|     黑白兔#0684     |               [Codepen](https://codepen.io/johnny329/pen/xxWEpdq)                |
|     jin.huang#4666     |               [Codepen](https://codepen.io/HJ7878/pen/jOzMZKm?editors=1100)                |
|     skypassion5000#4151     |               [Codepen](https://codepen.io/skypassion5000/pen/YzaGaWw?editors=1100)                |
|     Pony#6778     |               [Codepen](https://codepen.io/Pony0303/pen/ExEgePK)                |
|     Susie(軒)#6181     |               [Codepen](https://codepen.io/Codeleaf/pen/MWVjzJq) 
 Shuo#1596    |               [Codepen](https://codepen.io/chiangchungshuo/pen/mdxrQxW)                |
 | Sentiments#4883 | [codepen](https://codepen.io/Sentiments/pen/ExEgdrd)             |
 | --------------- | ---------------------------------------------------------------- |
 | Manson許 #2295  | [Codepen](https://codepen.io/oupbzfxq-the-scripter/pen/WNzGLQL)  |
 | 鑫鑫#4346       | [CodePen](https://codepen.io/Neil1024/pen/BarLbQR?editors=1100)  |
 | Fang #4680      | [CodePen](https://codepen.io/std95174/pen/KKoNwJw)               |
 | mickey#8745     | [CodePen](https://codepen.io/weizhetseng/pen/YzapPmj)            |
 | YaWen#2752      | [CodePen](https://codepen.io/yuwendy/pen/MWVbagQ)                |
 | 阿翰 #1984      | [CodePen](https://codepen.io/JohnHan05/pen/yLKVegm?editors=1100) |
 | Clara Cai#7097  | [CodePen](https://codepen.io/Clara-Snowy/pen/dymOMdw)            |
 | 得源#8355       | [CodePen](https://codepen.io/aglgvsie/pen/ExENgby)               |
 | choubree#4350   | [CodePen](https://codepen.io/BreeChou/pen/VwXmmzq)               |
 | kevin#6131      | [CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/gOeLmMv)   |
 | kancheng#3915   | [CodePen](https://codepen.io/kancheng/pen/dymOvgJ)               |
 | christina#6185  | [Codepen](https://codepen.io/chrisc0210/pen/oNqYdYB)             |
 | Carrie#2750     | [CodePen](https://codepen.io/carrie-wang/pen/GRxrJEz)            |
 | toshow#5609     | [CodePen](https://codepen.io/toshow/pen/gOegaOb)                 |
 | Nini Chen#5790  | [CodePen](https://codepen.io/ninistyle/pen/QWmdbyL?editors=1100) |
 | 柏PO #5617      | [CodePen](https://codepen.io/apo_1798/pen/xxWgRZr)               |
  | sophiee #7015      | [CodePen](https://codepen.io/sophiee2727/pen/dymNZPa)            |
  | 瑞瑞#4605      | [CodePen](https://codepen.io/tsai-li-ting/pen/qBoRpNO)
  | erwin阿瀚#5422      | [CodePen](https://codepen.io/yohey03518/pen/JjLEemq)
  | bakiii #2652 | [codepen](https://codepen.io/aki168/pen/LYdxqOQ)|
  |hua#9099|[Codepen](https://codepen.io/LHua/pen/BarWajN)|
  |jeter#8014|[Codepen](https://codepen.io/gi-tai-she/pen/GRxWaeP?editors=1100)|
  |紙飛機#1335|[Codepen](https://codepen.io/paperplanea/pen/WNzpqZx?editors=1100)|
  |EmilyLin#0526|[Codepen](https://codepen.io/c199615/pen/rNdmaNr?editors=1100)|
|WEI#0797|[Codepen](https://codepen.io/wei-z/pen/qBomKor)|
|艾草#4830|[Codepen](https://codepen.io/jmkhsutp/pen/VwXWjEq?editors=1000)|
|Charles_Sin|[Codepen](https://codepen.io/charlessin/pen/QWmgQYo)|
|Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/LYdLopE?editors=1100)|
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/YzaQbVp)|
|Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/JjLyyxz)|
|Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/MWVvEVL)|
|Joketurtle#1457|[Codepen](https://codepen.io/Joketurtle/pen/xxWLYPx)|
|rueee#7997|[Codepen](https://codepen.io/Jull-C/pen/GRxOKYN)|
|ROKA#4051|[Codepen](https://codepen.io/chengchiaoyi/pen/JjLOjzN?editors=1100)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/NWYXKZa)|
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/rNdpNWb)|
|鎔瑄#8578|[Codepen](https://codepen.io/barbarayou/pen/gOevMLw?editors=1100) |
|Jumpye#8601|[Codepen](https://codepen.io/Jumpye/pen/qBoxadN?editors=1100) |
|RuoAn#7124|[Codepen](https://codepen.io/LiauRuoAn/pen/eYMMWxE?editors=1100)|
|CJ07#0176|[Codepen](https://codepen.io/cjtseng07/pen/XWEEPMv?editors=1100)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/qBoJJdv?editors=1100)|
|NathanJames#8120|[Codepen](https://codepen.io/ufo060204/pen/jOzQVKZ)|
|KT Hsieh#2861|[CodePen](https://codepen.io/KTHsieh/pen/ZExwGEL)
|心幻羽#0056|[CodePen](https://codepen.io/linglingsyu/pen/LYdvwyE)