---
# System prepended metadata

title: "\U0001F3C5 Day 27"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
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)|

