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

## 題目

請用這週學到的設計模式優化以下的 class 名稱：
不限制使用任何設計模式

HTML

<ul class="product-list">
  <li class="product-item">
	<img class="product-img">
	<h3 class="product-name">Poppy & Barley</h3>
	<h4 class="product-brand">Jo Malone</h4>
	<h4 class="product-price">NT1,380</h4>
	<a class="product-like">...</a>
	<a class="product-cart">...</a>
  </li>
  <li class="product-item">...</li>
  <li class="product-item">...</li>
</ul>

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


<!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/JjRYgve) 沒有一個標準解答，此解答只是範例-->

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

<!-- 1. 小羊
Codepen：
https://codepen.io/eqsmebaz-the-selector/pen/oNWqGpN
-->

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

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

<!--4. 廖奕慈
Codepen: https://codepen.io/yiciLiao/pen/LYydzMV?editors=1010 -->

<!-- 5. 小胖
Codepen: https://codepen.io/a1073315/pen/RwVMLzp -->

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

<!-- 7.邱仲德(德德)
Codepen: https://codepen.io/Chiouder/pen/XWREzxd?editors=1000 -->

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

<!-- 9. Jack
Codepen: https://codepen.io/JackChen89/pen/VwbXQwJ -->

<!-- 10.羿宣
Codepen: https://codepen.io/Ann828/pen/jOmzWRm -->

<!-- 11. Iris
Codepen：https://codepen.io/hungyen/pen/qBmoxLE
-->

<!-- 12.Cloudia
Codepen: https://codepen.io/hkps87/pen/ExmEEZj -->

<!-- 13.薰
Codepen: https://codepen.io/chiaoshin/pen/rNmddKO -->

<!--14.小松
Codepen：https://codepen.io/120061203/pen/LYyddQW
-->

<!--15. 馮旻
Codepen：https://codepen.io/tboqkvhk/pen/oNWqyov
-->

<!-- 16. 廖仕雅
CodePen: https://codepen.io/sophia0121/pen/VwbXQRa?editors=1000 -->

<!-- 17. 辰
CodePen: https://codepen.io/dnangelapril/pen/JjNLawB
-->

<!-- 18. 人中
CodePen: https://codepen.io/renchong2424/pen/VwbXqLX
-->

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

<!-- 21. 謝旻臻
Codepen: https://codepen.io/julia20010828/pen/jOmzJeo?editors=1000
-->

<!-- 22. 莊承叡
Codepen：https://codepen.io/Ray_ty39/pen/OJmvYMM?editors=1000
-->

<!-- 23. Steve
Codepen: https://codepen.io/steve5631/pen/QWvmemy
-->

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

<!-- 25. Genie
Codepen: https://codepen.io/hcliii/pen/qBmYZMe -->

<!-- 26. 劉子瑜
Codepen: https://codepen.io/superfish195/pen/rNmvmZq -->