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

## OOCSS

### 題目
練習 OOCSS：嘗試將以下 alert CSS 拆為樣式與結構

alert CSS

.alert{
  position: relative;
  color: #004085;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  background-color: #cce5ff;
  border: 1px solid transparent;
  border-radius: .25rem;
  border-color: #b8daff;
}    

## 回報流程

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


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

回報區
---

| Discord | CodePen / 答案 |
|:--------------:|:-----------------------------------------------------------------:|
| CloThEs#7837 | [Codepen](https://codepen.io/CloThEsZ/pen/rNdXgMo) |
| 布魯諾#7239 | [Codepen](https://codepen.io/bruno-yu/pen/NWYQVRw?editors=0110) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/WNzVBjM) |
| LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/rNdXgmP) |
| Amberhh #2465 | [Codepen](https://codepen.io/Amberhh/pen/RwMXmLo) |
| azami#5986 | [CodePen](https://codepen.io/azami/pen/OJvKYvx) |
| aka 南港大石怪 | [codepan](https://codepen.io/wei-nie/pen/LYdwoKR) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/OJvKeLZ) |
| Potatolee#7749 | [codePen](https://codepen.io/potatoleee/pen/JjLgQPK?editors=1100) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/ExEqBjP) |
| PeggyLiao#1552 |[CodePen](https://codepen.io/PeiJu-Liao/pen/gOeVJVv)|
|zera#6060|[codepen](https://codepen.io/zera-tseng/pen/LYdwogN)|
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/qBoezqr) |
|WEI_RIO#9342|[codepen](https://codepen.io/wei_wu/pen/eYMqwgN?editors=1100)|
| LHchien33#6232 |[Codepen](https://codepen.io/lin_chien/pen/WNzVqdq)|
| Hsiu#8767 |[Codepen](https://codepen.io/amy-hsiu/pen/LYdwKdz)|
| JackC#0411 |[Codepen](https://codepen.io/key0329/pen/RwMXzJB)|
| QOO#8446 |[Codepen](https://codepen.io/QOOQOOQ/pen/yLKmdKN)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/LYdwwYm)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/wvmVVGB)|
| yuyu#6310 |[Codepen](https://codepen.io/yuyu0905/pen/zYWggLa)|
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/bGMbGMJ)|
|L0F0#8733|[Codepen](https://codepen.io/l0f0/pen/eYrOmxr?editors=1100)|
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/xxjKbMm?editors=1100)|
|大衛#4869|[Codepen](https://codepen.io/exnsrpjc/pen/JjvPRdp)|
| Clara#1275 | [Codepen](https://codepen.io/bsupixqu/pen/RwybGmN) |
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/bGMbaEb)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/KKRPQKX?editors=1100)|
|我是泇吟#5189|[CodePen](https://codepen.io/kljuqbxs/pen/oNdvajr)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/gOzYQMo) |
| 雷雷#7844 | [CodePen](https://codepen.io/lei-yi-jie/pen/poVzQem) |
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/OJZLrEP)|
|Benson#6763|[codepen](https://codepen.io/kumashow/pen/oNdvmLr)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/PoeYLje?editors=1100)|
|Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/KKRKgeg)|
|IreneY#0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/LYmYOZN)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/ExLaWbm)|
|黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/XWqJVva)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/MWGwoyG?editors=0110)|
|Vera#5592|[Codepen](https://codepen.io/skvera/pen/abGyXay)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/MWGOWMO)|