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

## 題目

請用這週學到的設計模式優化以下的 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：
-->

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

<!-- 2. 大衛
codepen: https://codepen.io/pen/?editors=1010
-->

<!--3. Cheng Pei-hsuan
Codepen: https://codepen.io/PaCheng/pen/VwWLyxO
-->

<!-- 4. Lina Chen
codepen: https://codepen.io/LinaChen/pen/RwgPxjX
-->

<!-- 5. 雷古娜
codepen: https://codepen.io/tinahopo/pen/vYZOpjo -->

<!-- 6. YuriT
codepen: https://codepen.io/wenfisht/pen/dyRoJQB -->

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

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

<!-- 9. Jun Chan
codepen: https://codepen.io/chujunchan/pen/ExXjQgJ -->

<!-- 10. curry
codepen: https://codepen.io/Ted19851223/pen/eYRNVEx -->

<!-- 11. Sz
https://codepen.io/szyln/pen/YzQXedZ
-->

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

<!-- 13. Gill
codepen: https://codepen.io/Gill-Chin/pen/eYRNMmY-->

<!-- 14. peter.chen
codepen: https://codepen.io/JIAN-RONG/pen/VwWLXMy?editors=1000
-->

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

<!-- 16. Joe Kuo
CodePen: https://codepen.io/alertislow/pen/vYZOzYQ
-->

<!-- 17.沈依蓉
https://codepen.io/pen/?editors=1100
-->

<!-- 18. ZOE WU
https://codepen.io/Zoechiueh/pen/LYLpbaG?editors=1010
-->

<!-- 19. Gui
https://codepen.io/guitimliu/pen/OJgNxLK -->

<!-- 20. Joy Cheng
codepen https://codepen.io/joycheng5432/pen/NWgRGBa
-->

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

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