--- tags: 網頁切版直播班 - 2022 夏季班 --- # 🏅 Day 27 ## 錨點練習 網頁中的 id 在實務上不會拿來寫樣式用，但是他卻有個神奇功能，錨點。他能讓你的網頁在內部自由的跳轉，以下是錨點的練習，大家試著完成看看吧！ 記得加上 CSS Reset ### 題目 錨點練習：練習在 nav a 的 href 加上連結，來連到各區塊 HTML ```htmlembedded= <body> <nav class="nav"> <h1><a href="#" class="logo"><img src="https://www.filepicker.io/api/file/tNa2so2RRMuedpc2yydt" alt="logo" width="100"></a></h1> <ul class="nav-list"> <li class="nav-item"><a class="nav-link" href="#">首頁</a></li> <li class="nav-item"><a class="nav-link" href="#">個人</a></li> <li class="nav-item"><a class="nav-link" href="#">學歷</a></li> <li class="nav-item"><a class="nav-link" href="#">技能</a></li> </ul> </nav> <div class="container"> <section id="header" class="mb-3"> <img class="banner" src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/student-week1/banner.png" alt=""> </section> <section id="profile" class="mb-3"> 個人資料區塊 </section> <section id="edu" class="mb-3"> 學歷區塊 </section> <section id="skills" class="mb-3"> 技能區塊 </section> </div> </body> ``` CSS ```css= .nav{ background-color: #e8eeea; padding: 0 10px; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center; } .nav-list{ display: flex; } .nav-link{ text-decoration: none; color: #00cc99; padding: 5px 10px; } .container{ width:900px; margin: 0 auto; } .mb-3{ margin-bottom: 300px; } ``` ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答：https://codepen.io/hexschool/pen/abYZgyb --> 回報區 --- | Discord | CodePen / 答案 | |:-----------------:|:-------------------------------------------------------------------:| | Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/oNqpaYa) | | 小白#2406 | [CodePen](https://codepen.io/hexschool/pen/abYZgyb) | | CloThEs#7837 | [CodePen](https://codepen.io/CloThEsZ/pen/rNdJObX) | | 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/RwMQrbZ) | | JarDar#6980 | [codepen](https://codepen.io/jardarpen/pen/JjLpGjX) | | StellaHsu#2687 | [codepen](https://codepen.io/stella950114/pen/qBoxbEN?editors=1000) | | 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/xxWYZbZ?editors=1010) | | YC#2522 | [CodePen](https://codepen.io/YCLu/pen/VwXQejW) | | bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/eYMVJZY?editors=1000) | | WEI_RIO#9342 | [CodePen](https://codepen.io/wei_wu/pen/NWYyxvo?editors=1000) | | 𝓛𝓊𝒸𝓎#8635 | [CodePen](https://codepen.io/lucygirl/pen/mdxXVMx) | | 洋蔥#5295 | [CodePen](https://codepen.io/HSUNA/pen/xxWYZrR?editors=1000) | | Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/yLKvevL) | | PeggyLiao#1552 | [CodePen](https://codepen.io/PeiJu-Liao/pen/mdxXVKj?editors=1000) | | L0F0#8733 | [CodePen](https://codepen.io/l0f0/pen/PoRQZyX) | | YI#0863 | [CodePen](https://codepen.io/YI0305/pen/dymdGEe) | | 黑白兔#0684 | [CodePen](https://codepen.io/johnny329/pen/eYMVZJv) | | LHchien33#6232 | [CodePen](https://codepen.io/lin_chien/pen/BarYKjX) | | Karol-Kuo#5287 | [CodePen](https://codepen.io/ting-yu-kuo/pen/LYdQNxB) | | Clara Cai#7097 | [CodePen](https://codepen.io/Clara-Snowy/pen/bGvLpvp) | | 阿翰 #1984 | [Codepen](https://codepen.io/JohnHan05/pen/XWEZdZZ?editors=1000) | | Benson#6763 | [Codepen](https://codepen.io/kumashow/pen/KKoQVYp) | | Yuna Huang#2692 | [Codepen](https://codepen.io/Yuna1002/pen/NWYyNLR?editors=1100) | | 小諾#1866 | [Codepen](https://codepen.io/noichan/pen/bGvLpzw) | | Hsiu#8767 | [Codepen](https://codepen.io/amy-hsiu/pen/dymdXbx) | | yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/XWEZdQY) | | 威0#6919 | [Codepen](https://codepen.io/n0918679182/pen/LYdQZyP) | | ssozr#4680 | [codepen](https://codepen.io/ssozr/pen/KKoQMWo) | | JackC#0411 | [Codepen](https://codepen.io/key0329/pen/eYMVzWQ) | | azami#5986 | [CodePen](https://codepen.io/azami/pen/qBoxNXW) | | Arista#5802 | [CodePen](https://codepen.io/arista-hsieh/pen/GRxQqQr) | | Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/eYMVzxa) | | 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/RwMQGaL) | | Daisy_Li#4231 | [CodePen](https://codepen.io/lidairong-gmail-com/pen/PoRQGpa) | | yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/xxWYEWq?editors=1100) | | Barret#1119 | [CodePen](https://codepen.io/barret0720/pen/ZExrByy) | | WEI#0797 | [CodePen](https://codepen.io/wei-z/pen/XWEZNqZ) | | SASIMI#5099 | [CodePen](https://codepen.io/sashimi1327/pen/vYRJpWq) | | 雷雷#7844 | [CodePen](https://codepen.io/lei-yi-jie/pen/NWYydXX) | | LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/NWYydmz) | | suihsilan#9485 | [CodePen](https://codepen.io/suihsilan/pen/xxWYqdE?editors=1010) | | Ke#1391 | [Codepen](https://codepen.io/federerke/pen/NWYypzm) | | int#7518 | [Codepen](https://codepen.io/intHuang/pen/RwMQVPq?editors=1010) | | Joyce#3790 | [Codepen](https://codepen.io/joycehuang/pen/XWEZRXg?editors=1100) | | zera#6060 | [codepen](https://codepen.io/zera-tseng/pen/LYdQbMq) | | 我是泇吟 #5189 | [CodePen](https://codepen.io/kljuqbxs/pen/RwMQVYX) | | RayChen#6088 | [codepen](https://codepen.io/raychen1996/pen/jOzZwVY) | | 鉦勝 #8333 | [codepen](https://codepen.io/atckmax823/pen/ZExryXq?editors=1000) | | 鴨鴨#9822 | [Codepen](https://codepen.io/qrvrqvxv-the-selector/pen/dymdRQM) | | Ryan Chiang#6649 | [Codepen](https://codepen.io/ryanchiang/pen/PoRQKYE?editors=1100) | | choubree #4350 | [codepen](https://codepen.io/BreeChou/pen/NWYyvGL) | | Melon #0380 | [Codepen](https://codepen.io/BalaFang/pen/gOevxOX) | | Yunei#6323 | [Codepen](https://codepen.io/Yunei/pen/ZExrJbd) | | Sentiments#4883 | [codepen](https://codepen.io/bruno-yu/pen/RwMQrbZ) | | YU #0618 | [Codepen](https://codepen.io/yoken_/pen/OJvQOvg) | | Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/MWVQjOW) | | Wei-Ting#7691 | [Codepen](https://codepen.io/hellowei-ting/pen/QWmQOPB) | | Yuan962#5897 | [Codepen](https://codepen.io/Jasmine-Liao/pen/JjLpMvW)| | 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/JjLppvB) | | NeilLin#3009 | [Codepen](https://codepen.io/a0071421/pen/PoRQygq) | | 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/ExEQOgO) | | christina#6185 |[Codepen](https://codepen.io/chrisc0210/pen/vYRdvBg) | Potatolee#7749 |[Codepen](https://codepen.io/potatoleee/pen/ZExrwzW)| | 咻蹦#1526 |[Codepen](https://codepen.io/emmasyu/pen/PoRQXgx?editors=1100)| |Fang #4680|[Codepen](https://codepen.io/std95174/pen/rNdJobL)| |yo_yo#2678|[Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/wvmyObp)| |Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/qBoxGYy)| |Vian#7338|[Codepen](https://codepen.io/vianwu31/pen/RwMQzpP)| |hungya#0773|[Codepen](https://codepen.io/hungya777/pen/rNdJEKo)| |IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/mdxXNXX)| |QOO #8446|[Codepen](https://codepen.io/QOOQOOQ/pen/eYMMpZM?editors=1100)| | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/wvmmKrJ?editors=1100) | |sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/yLKKOqg) |鎔瑄#8578|[codepen](https://codepen.io/barbarayou/pen/VwXXEjQ?editors=1100) | |家洋#6999|[codepen](https://codepen.io/aa235553756/pen/oNqdXwp)| |Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/XWEqKXV)| |kevin#6131|[Codepen](https://codepen.io/kun8349/pen/KKoRomW)| |mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/abYGYRQ)| |阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/abYGjdq)| |艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/wvmjEwJ)| |Vera#5592|[Codepen](https://codepen.io/skvera/pen/poLVYKr)| |紙飛機#1335|[Codepen](https://codepen.io/paperplanea/pen/qBoKvoy)| |Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/NWYzXrg)| |Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/ExEpjBZ?editors=1100)| |Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/vYRaNLa)| |Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/mdxGJKB)| |piha#9987|[CodePen](https://codepen.io/pihahaha/pen/RwMYayg)| |Tuhacrt#0008|[CodePen](https://codepen.io/Tuhacrt/pen/abYaKZr)| |Pony#6778|[codepen](https://codepen.io/Pony0303/pen/yLKxZZw)| |狸貓#5863|[codepen](https://codepen.io/tanuki320/pen/abYRoQz)| |yuchenye#6119|[codepen](https://codepen.io/yuchen/pen/jOzeBaM)| |Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/vYRVwrG)| |kancheng#3915|[codepen](https://codepen.io/kancheng/pen/yLKQGrg)| |Rena#6249|[codepen](https://codepen.io/aureate0116/pen/poLqpwo)| |郭芙蘭#6374|[codepen](https://codepen.io/flora_Kuo/pen/dymaygX?editors=1100)| |Deborah#0033|[codepen](https://codepen.io/deborah-tsai/pen/NWYoqXr)| |Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/mdxvOro)| |jin.huang#4666|[CodePen](https://codepen.io/haha1196/pen/RwMOXgG)| |toshow#5609|[CodePen](https://codepen.io/toshow/pen/KKoYOOJ)| |NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/eYrpRvK)| |RuoAn#7124|[CodePen](https://codepen.io/LiauRuoAn/pen/ExLNpJW)|