---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/25(三) 每日任務

## 題目
練習 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;
}    

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/yLaYVNx?editors=1111) -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/dyvepMG
-->

<!-- 1. 肉鬆
Codepen: https://codepen.io/klrkicog/pen/WNObrgX
-->

<!-- 2. Lina Chen
Codepen: https://codepen.io/LinaChen/pen/jOwEWvZ
-->

<!-- 3. 雷古娜
Codepen: https://codepen.io/tinahopo/pen/zYzxrXX
-->

<!--4. Cheng pei-hsuan
Codepen: https://codepen.io/PaCheng/pen/vYmMvaV
-->

<!-- 5, Gill
codepen:https://codepen.io/Gill-Chin/pen/dyRPMXp
-->

<!-- 6.大衛
codpen:https://codepen.io/exnsrpjc/pen/GREgZNv?editors=1100
-->

<!-- 7.lumei
codpen:https://codepen.io/l_umei/pen/RwgNaKg
-->

<!-- 8.Cate Chang
codpen:https://codepen.io/tutz/pen/dyRPMNO
-->

<!-- 9. Tori
codpen: https://codepen.io/hayen/pen/VwWYaYj?editors=1100
-->

<!-- 10. 陳sam
codepen:https://codepen.io/euldpliv/pen/yLXyOzr
-->

<!-- 11.WilsonHan
codepen:https://codepen.io/wi0821/pen/gORbrBz
-->

<!-- 12.Jean
codepen:https://codepen.io/jean-liu/pen/eYRmZbN
-->

<!-- 13.kevinhes
codepen: https://codepen.io/kevinhes/pen/vYZEGMd
-->

<!-- 14.peter.chen
codepen: https://codepen.io/JIAN-RONG/pen/qBjEZGm
-->

<!-- 15. Sz
https://codepen.io/szyln/pen/qBjENwM
-->

<!-- 16. curry
https://codepen.io/Ted19851223/pen/ZEyYBag
-->

<!-- 17. 群嘉
codepen:https://codepen.io/efzdamnp-the-lessful/pen/LYLEbvL
-->

<!-- 18. Gui
https://codepen.io/guitimliu/pen/abwzpOJ -->

<!-- 19. Jun Chan
codepen:https://codepen.io/chujunchan/pen/wveBJaG
-->

<!-- 20. 沈依蓉
https://codepen.io/lily-oa/pen/QWgwgzN?editors=0100
-->

<!-- 21. hellocrab
https://codepen.io/hellocrab/pen/XWgJaMY
-->

<!-- 22.黃士桓
https://codepen.io/shr-huan-huang/pen/powvpjP?editors=1100
-->

<!-- 23.Joe Kuo
https://codepen.io/alertislow/pen/XWgJEaM
-->

<!-- 24. Sihle Huang
code : https://codepen.io/bugbug777/pen/jOwEJXW?editors=1100
-->

<!-- 25. YuriT
code : https://codepen.io/wenfisht/pen/gORbJGG
-->

<!-- 26. 蔡明達
CodePen: https://codepen.io/bmzpfyxe/pen/NWgKQZB?editors=1100
-->

<!-- 27. Erin Huang
https://codepen.io/ErinHuang/pen/qBjdYvw
-->

<!-- 28. ZOE WU
https://codepen.io/Zoechiueh/pen/RwgWRMM?editors=1100
-->

<!-- 29. AKI
https://codepen.io/akichen27/pen/KKqMmNz
-->

<!--30. Joy Cheng
https://codepen.io/joycheng5432/pen/MWojarX
-->

<!--31. kk
https://codepen.io/potatokaka/pen/gORwooo
-->

<!--32. Tina yen
codepen:https://codepen.io/tlorfrnl-the-typescripter/pen/XWgjVGX
-->

<!--33. jimmyFang
https://codepen.io/pohxiqqo/pen/KKqaoBa?editors=1100
-->