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

## 說明

### overflow 可控制會溢出區塊的內容

overflow 屬性具有以下值：

visible- 默認。溢出不會被剪裁。內容呈現在元素框外
hidden - 溢出被剪裁，其餘內容將不可見
scroll - 裁剪溢出，並添加滾動條以查看其餘內容
auto - 與 類似scroll，但僅在必要時添加滾動條

### white-space 決定如何處理元素內的空白字元

white-space 常用屬性具有以下值：

normal - 連續的空白字元會被合併，換行字元被視為空白字元
nowrap - 對待空白字元的方式跟 normal 一樣，且會強制不換行
pre - 連續的空白字元都會被保留

[範例連結](https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text_white-space)

## 題目

實作第六週版型捲動 navabr

需透過 Codepen 繳交 （載入 Bootstrap CSS：https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css ）


HTML

<div class="nav-scroller">
  <nav class="container nav" aria-label="Secondary navigation">
    <a class="nav-link active" aria-current="page" href="#">音樂</a>
    <a class="nav-link" href="#">戲劇</a>
    <a class="nav-link" href="#">設計</a>
    <a class="nav-link" href="#">藝術</a>
    <a class="nav-link" href="#">美食</a>
    <a class="nav-link" href="#">旅遊</a>
    <a class="nav-link" href="#">電影</a>
    <a class="nav-link" href="#">親子</a>
    <a class="nav-link" href="#">期間限定</a>
  </nav>
</div>

CSS

.nav-scroller {
    height: 2.75rem; /* 隱藏下方捲軸 */
    overflow-y: hidden; 
    border-bottom: 1px solid #707070;
}
.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    ; /* 隱藏下方捲軸 */
    overflow-x:...;
    white-space: ...;
}

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


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

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

<!-- 1.

-->
<!-- 2. Jasmin
Codepen：https://codepen.io/thejasmin/pen/PoWjejL?editors=1111
-->

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

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

<!--5. Jean
Codepen：https://codepen.io/jean-liu/pen/JjNwNzE
-->

<!-- 6. Vic
codepen: https://codepen.io/hsuan333/pen/YzVdVgE
-->

<!-- 7.肉鬆
codepen: https://codepen.io/klrkicog/pen/zYwywQq
-->

<!-- 8.kevinhes
codepen: https://codepen.io/kevinhes/pen/PomXjwy
-->

<!-- 9.lumei
codepen: https://codepen.io/l_umei/pen/WNjLOQq
-->

<!--10. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/KKmbqqp?editors=1100
-->

<!-- 11. 雷古娜
https://codepen.io/tinahopo/pen/bGWOWyO -->

<!-- 12. 群嘉
condepen:https://codepen.io/efzdamnp-the-lessful/pen/VwbqWbx?editors=1100
-->

<!-- 13. youting
codepen: https://codepen.io/youtingluo/pen/xxdmrrX?editors=1100
-->

<!-- 14. Gill
codepen: https://codepen.io/Gill-Chin/pen/VwbqWzd
-->

<!-- 15. kk
codepen: https://codepen.io/potatokaka/pen/zYwyzwZ?editors=0100
-->

<!-- 16. jen
codepen: https://codepen.io/jenwu/pen/dyWwRmj
-->

<!-- 17. 陳sam
codepen :https://codepen.io/euldpliv/pen/QWvzgxj
-->

<!-- 18. 大衛
codepen:https://codepen.io/exnsrpjc/pen/XWRogKN
-->

<!-- 19. hellocrab
https://codepen.io/hellocrab/pen/OJmrgwK
-->

<!-- 20.Sam li
codepen:https://codepen.io/sam830623/pen/VwbqWxG
-->

<!-- 21. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/MWmZoVb
-->

<!-- 22. curry
https://codepen.io/Ted19851223/pen/rNmozBY
-->

<!-- 23. Sz
https://codepen.io/szyln/pen/XWRoamE
-->

<!-- 24. 蔡明達
Codepen: https://codepen.io/bmzpfyxe/pen/NWpegvz?editors=1100
-->

<!-- 25. Tori
Codepen: https://codepen.io/hayen/pen/PomxyRa?editors=1100
-->

<!-- 26. Gui
https://codepen.io/guitimliu/pen/dyWwzWE -->

<!-- 27. yellamoon
https://codepen.io/pwbzvqja/pen/JjNwrYj -->

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

<!-- 29. Wilson Han
Codepen: https://codepen.io/wi0821/pen/ZEKVaEG
-->

<!-- 30. huanan
Codepen: https://codepen.io/hua_nan/pen/qBmLVEj
-->

<!-- 31. Cate Chang
Codepen: https://codepen.io/tutz/pen/rNmoYxL
-->

<!-- 32.zy :https://codepen.io/zy_c/pen/OJmrOpq -->

<!--33.Peggy Tsai
https://codepen.io/hayen/pen/PomxyRa?editors=1100 -->

<!-- 34. YuriT
Codepen: https://codepen.io/wenfisht/pen/YzVdYmw
-->

<!-- 35. Karen Huang
https://codepen.io/Coding_Snorlax/pen/zYwydBa
-->

<!-- 36. Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/LYyMQZp
-->

<!-- 37. 沈依蓉
https://codepen.io/lily-oa/pen/PomXOZx?editors=1100
-->

<!--40. Sihle Huang
code: https://codepen.io/bugbug777/pen/vYmvdOX
-->

<!--41. peter.chen
codepen: https://codepen.io/JIAN-RONG/pen/oNWJqeE?editors=1100
-->

<!-- 42. Elaine Liu
https://codepen.io/elaine7598/pen/GRmPxZX
-->

<!-- 43. Hi Annie
https://codepen.io/lhohdalu/pen/WNjLgXp
-->

<!--44. 阿和
codepen:https://codepen.io/shnny/pen/BaRvqZJ?editors=1100
-->

<!--45. Oober
codepen:https://codepen.io/xtsjrjdv/pen/rNmoqRa?editors=1100
-->

<!--46. Mikan
codepen:https://codepen.io/elaine706/pen/eYWQgaV
-->

<!-- 47. 黃士桓
codepen:https://codepen.io/shr-huan-huang/pen/ExmGOoX
-->

<!-- 48. Jim Hwang
codepen:https://codepen.io/jimh1129/pen/JjNweQv
-->

<!-- 49. Riley
codepen:https://codepen.io/jjpxbprd/pen/qBmLLyw
-->

<!-- 50. Sec
https://codepen.io/Sentiments/pen/KKmbJGE
-->

<!-- 51.Shani
https://codepen.io/ShaniMa/pen/dyWwrNJ -->

<!-- 52. 魚魚
https://codepen.io/YuYu_29/pen/dyWaMWG -->

<!-- 53. una
https://codepen.io/xbsapbas-the-vuer/pen/JjNxKOy -->

<!-- 54.阿瓜
https://codepen.io/hoick/pen/ExmrNda -->

<!-- 55. Jessie Cheng
https://codepen.io/JessieMosbi/pen/KKmJqYV
-->

<!-- 56. yijun
https://codepen.io/sandy3068/pen/jOmdYwV
-->

<!-- 57. Erin Huang
https://codepen.io/ErinHuang/pen/abWXaGj
-->

<!-- 58. Jun Chan
Codepen: https://codepen.io/chujunchan/pen/gOWqZZa?editors=1100
-->

<!-- 59. ellie
https://codepen.io/hsu-yu/pen/rNmPPaZ?editors=1100
-->

<!-- 60. axlrock1021
https://codepen.io/andy1021/pen/MWmxovg

-->

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

<!-- 62. ZOE WU
https://codepen.io/Zoechiueh/pen/wvdOjab?editors=1100
-->
<!-- 63. anna
https://codepen.io/annhys/pen/bGWZQqj?editors=1100
-->

<!--64. Jocelyn
https://codepen.io/enjoyful/pen/LYyaXxR?editors=1100
-->

<!--65. KinHei Shing
https://codepen.io/kinhei-shing/pen/KKmYQpW
-->
<!--66. 袁祥恩
https://codepen.io/ovfxsavp-the-bashful/pen/GRmLPgG?editors=1100
-->

<!--67. Yurie
https://codepen.io/_u_jung/pen/ExmJGZZ
-->

<!--68. YOYO
https://codepen.io/lumedkle/pen/NWjmoEg
-->

<!-- 69. Min Chun Tsai
codepen: https://codepen.io/Tsai0926/pen/GRmLLNX
-->

<!-- 70. Alberto
https://codepen.io/AlbertoLL/pen/GRmaBxm
-->

<!-- 71. Joe Kuo
https://codepen.io/alertislow/pen/ExmBVEB
-->

<!--72.童筱涵
https://codepen.io/hsiaohan/pen/YzVooxP?editors=1100
-->

<!-- 73. WA
https://codepen.io/ldddl/pen/YzVmKqv
-->

<!-- 74. twoz
https://codepen.io/twoz/pen/MWmNjVM?editors=1100
-->

<!-- 75. Sylvia-H
https://codepen.io/Cosmosheart/pen/jOwNGob?editors=1100 -->

<!-- 76. YJ kung
https://codepen.io/bagelover/pen/PojoyGQ
-->

<!-- 77. AKI
https://codepen.io/akichen27/pen/bGRepKp
-->