---
tags: 大學生體驗營 - 2021 夏季班
---
# 7/28(三) 每日任務

## 題目

練習 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/eqsmebaz-the-selector/pen/gOWvQKB
-->

<!-- 2.黃彩雲
Codepen: https://codepen.io/corin19/pen/LYyQXae -->

<!-- 3.羿宣
Codepen： https://codepen.io/Ann828/pen/WNjMYgV?editors=1100 -->

<!-- 4.蕭絜云
Codepen: https://codepen.io/cloudy_77/pen/ExmQGPb -->

<!-- 5. 黃珮雯
Codepen: https://codepen.io/pwh_27/pen/mdmXaRg -->

<!-- 6. 小胖
Codepen: https://codepen.io/a1073315/pen/eYWVbye -->

<!-- 7. Jack
Codepen: https://codepen.io/JackChen89/pen/eYWVbMe -->

<!-- 8. 人中
Codepen: https://codepen.io/renchong2424/pen/mdmXajb -->

<!--9.廖奕慈
Codepen:https://codepen.io/yiciLiao/pen/LYyQXXO?editors=1100 -->

<!-- 10. Steve
Codepen: https://codepen.io/steve5631/pen/RwVQdGj
-->

<!-- 11. 黃郁芳
Codepen: https://codepen.io/YuFang0323/pen/ExmQMWK -->

<!-- 12. Genie
Codepen: https://codepen.io/hcliii/pen/eYWVXWN -->

<!-- 13. Iris
Codepen: https://codepen.io/hungyen/pen/bGWLJoV
-->

<!-- 14.Cloudia
Codepen: https://codepen.io/hkps87/pen/xxdYepz -->

<!-- 15. 莊承叡
Codepen：https://codepen.io/Ray_ty39/pen/QWvQRzB?editors=1100
-->

<!--16. 小松
Codepen:
https://codepen.io/120061203/pen/VwbQoVO
-->

<!-- 17. 廖仕雅
CodePen: https://codepen.io/sophia0121/pen/poPaMOw
-->

<!-- 18. JT
Codepen: https://codepen.io/jsht-the-animator/pen/MWmVWog
-->

<!-- 19. 劉永琦
Codepen: https://codepen.io/wjsvypvv-the-decoder/pen/xxdWwwZ -->

<!-- 20. 謝旻臻
Codepen: https://codepen.io/julia20010828/pen/ZEKxbbd?editors=0110 -->

<!-- 21. 德德
Codepen: https://codepen.io/Chiouder/pen/oNWqjeW?editors=0100 -->

<!-- 22. 辰
Codepen: https://codepen.io/dnangelapril/pen/abWYvRJ
-->

<!-- 24. 薰
Codepen: https://codepen.io/chiaoshin/pen/ExmEgjX -->