---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/28(三) 每日任務
## 題目

更改 CSS 內的程式碼為 SCSS 的寫法
需透過 Codepen 繳交 （設定為 SCSS 模式）


CSS

.header {
  background-size: cover;
  background-position: center center;
  background-image: url(../asset/img/header_desktop.png);
  background-repeat: no-repeat;
}
.header .banner {
  min-height: 420px;
}

.header .menu-bg {
  min-height: 58px;
  background: #ff0000;
  position: relative;
}

.header .menu {
  top: 0;
}

.header .menu ul a {
  display: block;
}
.header .menu ul li{
  color: #fff;
}

.header .menu ul li a:hover {
  font-weight: bolder;
}

.header .banner-title {
  max-width: 460px;
  background: #ff0000;
  color: #fff;
}

.header .main-menu {
  background: #ff0000;
  overflow: hidden;
}
.header .main-menu a:hover {
  background: #ff0000;
}
.header .hamburger-menu {
  display: block;
  float: right;
}
.header .menu-show {
  max-height: 165px;
}
.header .block-md {
  display: block;
}

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


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

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

<!-- 1. 焦糖
Codepen：https://codepen.io/yen-kg/pen/GRWwrpv
-->
<!-- 2. Jasmin
Codepen：https://codepen.io/thejasmin/pen/ExWZEzB?editors=1100
-->

<!-- 3.Alpha
Codepen:https://codepen.io/alphatero/pen/KKmQrQPv
-->

<!-- 4.lumei
Codepen:
https://codepen.io/l_umei/pen/mdmXQpK
-->

<!-- 5. Karen Huang
codepen: https://codepen.io/Coding_Snorlax/pen/wvdyQXO
-->

<!-- 4.yellamoon巫樾
Codepen:https://codepen.io/pwbzvqja/pen/VwbQVBQ
-->

<!-- 5.LiShang
Codepen:https://codepen.io/li-shang/pen/jOmZQpN
-->

<!-- 6.Samli
codepen:https://codepen.io/sam830623/pen/vYmdQzr
--->

<!-- 7.Lina Chen
codepen: https://codepen.io/LinaChen/pen/OJmQaad
-->

<!-- 8. 雷古娜
codepen:https://codepen.io/tinahopo/pen/dyWdQqd -->

<!-- 9.肉鬆
codepen: https://codepen.io/klrkicog/pen/xxdYQNX?editors=0100
-->

<!-- 10. Gui
https://codepen.io/guitimliu/pen/zYwRyYz -->

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

<!-- 12. hellocrab
https://codepen.io/hellocrab/pen/LYyQMpm
-->

<!-- 13. Jean
https://codepen.io/jean-liu/pen/QWvQJaX
-->

<!-- 14.Jun Chan
codepen: https://codepen.io/chujunchan/pen/RwVQENE
-->

<!-- 15. Gill
codepen: https://codepen.io/Gill-Chin/pen/PomQXPv?editors=1100
-->

<!--16. Dory
codepen: https://codepen.io/dorihung/pen/oNWEJBP?editors=0110
-->

<!-- 17. Cate Chang
https://codepen.io/tutz/pen/MWmQZyJ
-->

<!-- 18. curry
https://codepen.io/Ted19851223/pen/PomQXQw
-->
<!-- 19. 陳sam
https://codepen.io/euldpliv/pen/eYWVbKy
-->

<!-- 20. axlrock1021
https://codepen.io/andy1021/pen/WNjMLPp
-->

<!-- 21. yijun
https://codepen.io/sandy3068/pen/QWvQzPv
-->

<!-- 22. KK
https://codepen.io/potatokaka/pen/QWvQzYv?editors=0100
-->

<!-- 23. Irene Wang
codepen:https://codepen.io/irene-wang-the-looper/pen/VwbQgLw
-->

<!--24.童筱涵
codepen:https://codepen.io/hsiaohan/pen/JjNpxjz?editors=0110
-->

<!--25.huanan
codepen:https://codepen.io/hua_nan/pen/rNmJPmo
-->

<!-- 26.kevinhes
codepen:https://codepen.io/dwpwdpad/pen/abWqXwr
-->

<!-- 27.Hi Annie
https://codepen.io/lhohdalu/pen/NWjyoyy
-->

<!-- 28. Joy Cheng
https://codepen.io/joycheng5432/pen/YzVegpr?editors=0110
-->

<!-- 29.阿瓜
https://codepen.io/hoick/pen/BaRYbmG?editors=0100 -->

<!-- 30.群嘉

https://codepen.io/efzdamnp-the-lessful/pen/gOWvEzd?editors=0100
-->

<!-- 31. ZOE WU
https://codepen.io/Zoechiueh/pen/rNmJbBy?editors=0100
-->

<!-- 32. YuriT
CodePen:
https://codepen.io/wenfisht/pen/qBmxwaY
-->

<!-- 33. SihLe Huang
code:https://codepen.io/bugbug777/pen/jOmZRmr?editors=1100
-->

<!-- 34. 魚魚
codepen: https://codepen.io/YuYu_29/pen/ZEKrZeK?editors=0100
-->

<!-- 35. anna
codepen: https://codepen.io/annhys/pen/yLbvWdw?editors=0100
-->

<!-- 36. Fleur
codepen: https://codepen.io/swwlee/pen/OJmjqLL
-->

<!-- 37. KatieZhao
https://codepen.io/katiezhao/pen/LYyQKOL?editors=1100
-->

<!-- 38. Tsai 明達
CodePen: https://codepen.io/bmzpfyxe/pen/WNjNJBG?editors=0100
-->

<!--39. 阿和
codepen:https://codepen.io/shnny/pen/poPLoNm?editors=0100
-->

<!--40. Meng
codepen:https://codepen.io/MGHN/pen/GRmExgg
-->

<!-- 41. WilsonHan
codepen:https://codepen.io/wi0821/pen/wvdmawo
-->
<!-- 42. Tina Yen
codepen:https://codepen.io/tlorfrnl-the-typescripter/pen/jOmzEmr?editors=1100
-->

<!-- 43. Jamie
codepen:https://codepen.io/JamieChenWs/pen/QWvmbGO
-->

<!-- 44. Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/poPLjoG
-->

<!-- 45. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/KKmopLr?editors=0110
-->

<!-- 46.沈依蓉
https://codepen.io/lilyoa/pen/rNmdMQJ
-->

<!-- 47.Riley
https://codepen.io/jjpxbprd/pen/gOWeGrP
-->

<!-- 48.Calon
https://codepen.io/Calon0118/pen/QWvmBvz?editors=0100
-->

<!-- 49.jameskrauser
https://codepen.io/jameskrauser/pen/QWvmZBQ?editors=0100

-->

<!-- 50.Jim Hwang
https://codepen.io/jimh1129/pen/YzVadbM

-->

<!-- 51.Benson
https://codepen.io/polarBear712/pen/abWYPej
-->

<!-- 52. Alberto
https://codepen.io/AlbertoLL/pen/vYmRMQP
-->

<!-- 53. Oober
https://codepen.io/xtsjrjdv/pen/poPVENJ
-->
<!-- 54. Una(點子數位)
https://codepen.io/xbsapbas-the-vuer/pen/gOWzwBN?editors=0100
-->
<!-- 55. 文文
https://codepen.io/chiawen81/pen/yLbjMNy?editors=1100
-->

<!-- 56. irene
CodePen：https://codepen.io/lohas1107/pen/eYWrPbL?editors=0100
-->

<!-- 57. Elaine Liu
https://codepen.io/elaine7598/pen/MWmGNjw?editors=1100
-->
<!-- 58. Shani
https://codepen.io/ShaniMa/pen/gOWKwMK -->

<!-- 59. Tori
CodePen： https://codepen.io/hayen/pen/VwbdPXK?editors=0100
-->

<!--60. jimmyFang
https://codepen.io/pohxiqqo/pen/WNjyWBe
-->

<!-- 61. 三隻小貓
https://codepen.io/bagelover/pen/MWmBWqZ
-->

<!-- 62. Yurie
https://codepen.io/_u_jung/pen/poPZVRY?editors=0100
-->

<!-- 63. Jessie Cheng
https://codepen.io/JessieMosbi/pen/rNmrrmZ
-->

<!-- 64. ellie
https://codepen.io/hsu-yu/pen/YzVjdoa
-->

<!-- 65. WA
https://codepen.io/ldddl/pen/LYyJyqB
-->

<!-- 66. 袁祥恩
https://codepen.io/ovfxsavp-the-bashful/pen/eYWLLJx
-->

<!-- 67. Min Chun Tsai
https://codepen.io/Tsai0926/pen/eYWQOod
-->

<!-- 68.Page
https://codepen.io/kanawin821/pen/vYmQLvy
-->

<!-- 68.Erin Huang
https://codepen.io/ErinHuang/pen/BaRPRye
-->

<!-- 69.ted31539
https://codepen.io/Ted31539/pen/BaRGGGN?editors=0110
-->

<!-- 70. Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/WNjYBby
-->

<!-- 71.陳品宏
https://codepen.io/wtka/pen/abWPYpW
-->

<!-- 72. shanglin
https://codepen.io/rmovuagr-the-selector/pen/wvdRNGP
-->

<!-- 73. YOYO
https://codepen.io/lumedkle/pen/dyWLQPY?editors=0110
-->

<!-- 74. Joe Kuo
https://codepen.io/alertislow/pen/bGWyjxv
-->
<!--75.Keep
https://codepen.io/keep-/pen/YzQOJZm
-->