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

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

### 例子

<div class="profile">
  <h2>個人資料</h2>
</div>
<div class="education">
  <h2>學歷</h2>
</div>

.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` 來設定樣式

整體可以調整為：

<div class="container">
  <h2 class="title">個人資料</h2>
</div>
<div class="container">
  <h2 class="title">學歷</h2>
</div>

.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://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)