# 🏅 Day 26 - 錨點練習 網頁中的 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 / 答案 | |:---:|:-------:|:--------------:| | 01 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/jOjMZXR) | | 02 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/abgBxeP) | | 03 | han |[Codepen](https://codepen.io/iamHanCheng/pen/rNEWbXr)| | 04 | NocabWang(培根) |[Codepen](https://codepen.io/PeihanWang/pen/LYKboYK?editors=1100)| | 05 | Ariel |[Codepen](https://codepen.io/ariel0510/pen/Porbvjp)| | 06 | Kiwi |[Codepen](https://codepen.io/kiwi1113/pen/NWZbVgw)| | 07 | Theodore |[Codepen](https://codepen.io/GustavoFringgg/pen/JjQbqpj)| | 08 | fendy1223 |[Codepen](https://codepen.io/fendy1223/pen/abgBrGo)| | 09 | yoishere |[Codepen](https://codepen.io/yoishere/pen/GRbNayW)| | 10 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/ExBNzBa) | |11|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/vYqyqOJ)| | 12 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/oNrYROz)| | 13 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/BagQgLO)| | 14 | Sammy |[Codepen](https://codepen.io/fsczdlla-the-bold/pen/XWLNLNm)| | 15 | 陳小廷 |[Codepen](https://codepen.io/ting1124/pen/vYqyqZp)| | 16 | Hedwig |[Codepen](https://codepen.io/adirehfz-the-encoder/pen/BagQXLB?editors=1100)| | 17 | n913239 |[Codepen](https://codepen.io/n913239/pen/rNEjBZg)| | 18 | Dolce_墨 |[Codepen](https://dolcetseng.github.io/vite-training/26.html)| | 19 | Mike |[Codepen](https://codepen.io/mike2049/pen/dyBNyZV?editors=1100)| | 20 | MY |[Codepen](https://codepen.io/ahmomoz/pen/wvLgBpK)| | 21 | Jim |[Codepen](https://codepen.io/JimChou/pen/JjQEoMB)| | 22 | hao jing |[Codepen](https://codepen.io/hjxu/pen/eYwgmVe)| | 23 | lunlun0514 |[Codepen](https://codepen.io/f5badapple/pen/MWMJweX?editors=1100)| | 24 | kawa |[Codepen](https://codepen.io/z83xji6/pen/jOjyPep)| | 25 | Sonia |[Codepen](https://codepen.io/YUJOU/pen/qBzROmR?editors=1100)| | 26 | brucelee0629 |[Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/oNrBNap)| | 27 | Kaya |[Codepen](https://codepen.io/kayaribi/pen/JjQEXGV)| | 28 | 嚼勁先生 |[Codepen](https://codepen.io/James520284/pen/BagpZQV)| | 29 | lianne._. |[Codepen](https://codepen.io/Elaina-L/pen/gONgRRz)| | 30 | 泊岸 |[Codepen](https://codepen.io/qoq77416416/pen/YzoNxxd?editors=1100)| | 31 | PoWei |[Codepen](https://codepen.io/Po-Wei-Lai/pen/NWZdwoV)| | 32 | jimmy.0706 |[Codepen](https://codepen.io/JimmyMao/pen/RwzKMKL)| | 33 | YiJing(怡靜)|[Codepen](https://codepen.io/YijingC/pen/WNqRzEL?editors=1100)| | 34 | wind |[Codepen](https://codepen.io/wind7y/pen/dyBNeLr)| | 35 | Kerwin |[Codepen](https://codepen.io/kerwin/pen/poXRGQZ)| | 36 | KUN. |[Codepen](https://codepen.io/barry91205/pen/WNqpeZE)| | 37 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/PorpYaW?editors=1100)| | 38 | Chuang |[Codepen](https://codepen.io/uidoytjq-the-solid/pen/yLdMyBN)| | 39 | GAVI|[Codepen](https://codepen.io/qbafldcv-the-scripter/pen/xxoqbdP?editors=1000)| | 40 | 俊|[Codepen](https://codepen.io/jun12079/pen/ExBWZjq)| | 41 | yaoling.liang |[Codepen](https://codepen.io/Yao-Ling-L-/pen/YzoZdEj)| | 42 | chris |[Codepen](https://codepen.io/chrischen666/pen/qBzmZGz?editors=1100)| | 43 | jerry_66983 |[Codepen](https://codepen.io/Barry-C/pen/KKjmJZW?editors=1100)| | 44 | Chieh |[Codepen](https://codepen.io/Chieh_/pen/ZEdKPrw?editors=1100)| | 45 | Antonio |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/mdZmYgJ)| | 46 | EdHuang |[Codepen](https://codepen.io/yide1986/pen/QWXgmMO)| | 47 | xcx100 |[Codepen](https://codepen.io/c13026/pen/GRbEdoM)| | 48 | glen_69515 |[Codepen](https://codepen.io/glenyaochih/pen/LYKLXxK)| | 49 | Amy(咂摳) |[Codepen](https://codepen.io/nnxucgmc-the-builder/pen/qBzjgax?editors=1100)| | 50 | jasonlin |[Codepen](https://codepen.io/gfswkraq-the-reactor/pen/MWMoMZP)| | 51 | Toung | [Codepen](https://codepen.io/Toung/pen/jOjLRMp) | 52 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/mdZBPdX) | 53 | emmayo | [Codepen](https://codepen.io/emmayo/pen/poXWamy) | 54 | Emma |[Codepen](https://codepen.io/Emma0919/pen/oNrGPbN)| | 55 | 野鴿 |[Codepen](https://codepen.io/HoshinoSyouta/pen/eYwVEzG)| | 56 | Enn |[Codepen](https://codepen.io/enntang/pen/MWMVbdx)| | 57 | Ana |[Codepen](https://codepen.io/Ana-Wu/pen/qBzovyr)| | 58 | Kim |[Codepen](https://codepen.io/kim0101__/pen/BagrMKL?editors=1100)| | 59 | 小翎 |[Codepen](https://codepen.io/debbielin/pen/wvLjZEw?editors=1000)| | 60 | OSN |[Codepen](https://codepen.io/osncodepen/pen/oNrMwbK)| | 61 | tung |[Codepen](https://codepen.io/ru-ching/pen/abgRwbq)| | 62 | 深海 |[Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/MWMzZLz)| | 63 | macihuang |[Codepen](https://codepen.io/macy1215/pen/RwzEXRX)| | 64 | Lotte |[Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/MWMNQme?editors=1100)| | 65 | Jack |[Codepen](https://codepen.io/kxbhixte-the-sasster/pen/poMzrjK?editors=1100)| | 66 | zen |[Codepen](https://codepen.io/zen742937/pen/XWvryZq)| | 67 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/pvoOwgp?editors=1000)| <!-- | No | Discord |[Codepen]()| -->