---
# System prepended metadata

title: "\U0001F3C5 Day 26 - 錨點練習"
tags: [網頁切版直播班 - 2023 夏季班]

---

網頁中的 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|kuanju27|[CodePen](https://codepen.io/Eero-Chiao/pen/oNQJNqo)|
|02|hebin.|[Codepen](https://codepen.io/landyhsiao776/pen/qBQLBoX)|
|03|Yu|[Codepen](https://codepen.io/yuch3n_chen/pen/VwVqwxQ?editors=1100)|
|04|銀光菇|[Codepen](https://codepen.io/genesynthesis/pen/ExOGxRZ) |
|05|Berlin|[Codepen](https://codepen.io/3qberlin/pen/QWJzWZL) |
|06|cest_jessie|[Codepen](https://codepen.io/itsjessiechen/pen/NWEeWBZ) |
|07|DoryH#0526|[Codepen](https://codepen.io/dorihung/pen/mdQadzG)|
|08|Ann Chou#0146|[Codepen](https://codepen.io/annchou_illu/pen/GRwPRww)|
|09|小夏|[Codepen](https://codepen.io/michaelhsia/pen/oNQJNQE?editors=1100)|
|10|lychee_kk|[Codepen](https://codepen.io/kakakala/pen/BaGvaGE)|
| 11 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/WNYLNaV) |
| 12 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/eYQbYxd) |
| 13 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/ExOGxeW) |
|14|Moreene|[CodePen](https://codepen.io/Moreene/pen/wvQRvOL)|
|15|hannahTW|[CodePen](https://codepen.io/hangineer/pen/MWzZWxe?editors=1111)|
| 16 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/mdQadgQ) |
| 17 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/VwVqwNd?editors=1100) |
| 18 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/GRwPRLP?editors=1100) |
| 19 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/wvQRBwV) |
| 20 | SmallP | [Codepen](https://codepen.io/smallp/pen/XWyoJJg) |
| 21 | deli0529 | [Codepen](https://codepen.io/delichaomoon/pen/VwVqYvE) |
| 22 | awei | [Codepen](https://codepen.io/hong-wei/pen/dyQwPMq) |
| 23 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/PoxXwov) |
| 24 | m_m | [Codepen](https://codepen.io/minnn7716/pen/gOQQLeG) |
| 25 | judy123 | [Codepen](https://codepen.io/hsuantsong/pen/MWzZYJp) |
| 26 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/QWJzwvE) |
| 27 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/OJarPpJ?editors=0100) |
| 28 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/abQPzwG) |
| 29 | 依依 | [Codepen](https://codepen.io/Rita-Yang/pen/NWEePyr?editors=1100) |
| 30 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/YzRdPjo) |
| 31 | townyuan | [Codepen](https://codepen.io/townyuan/pen/ExOGaOe) |
| 32 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/JjewddV) | 
| 33 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/GRwPJZq?editors=1100) |
| 34 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/poQqJyL?editors=1100) |
| 34 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/KKrbpye) |
| 36 | hance__kao | [Codepen](https://codepen.io/HanceKao/pen/RwqEWwZ?editors=1100) |
| 37 | shcopy | [Codepen](https://hackmd.io/22plXkRORYS6hTS6bN-8tw) |
| 38 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/JjewGop) |
| 39 | Cura | [Codepen](https://codepen.io/curalin/pen/ExOGPPb) |
| 40 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/eYQbJdR) |
| 41 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/QWJzENY) |
| 42 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/NWEerrE) |
| 43 | Lianne.. | [Codepen](https://codepen.io/Elaina-L/pen/jOQXrMJ?editors=1100) |
| 44 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/YzRdWmj?editors=1100) |
| 45 | Paul#7426| [CodePen](https://codepen.io/paul-1997/pen/wvQRzKw?editors=0100)|
|46| Eden |[Codepen](https://codepen.io/iseden/pen/WNYLGgo)|
| 47 | yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/zYMyKya)|
| 48 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/QWJzKPv) |
| 49 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/XWyoNrP) |
| 50 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/vYQvyLO) |
| 51 | markchen_ | [Codepen](https://codepen.io/Mark-JJchen/pen/bGQOgEx) |
| 52 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/WNYLpdx?editors=1100) |
| 53 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/gOQZWWL) |
| 54 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/wvQRPMX?editors=1100) | |55 | Randy | [Codepen](https://codepen.io/landy510/pen/MWzZrgy?editors=0100) |
| 56 | rjjq | [Codepen](https://codepen.io/rjjq/pen/BaGvJYy) |
| 57 | .icesam | [Codepen](https://codepen.io/icesam/pen/RwqEQVr) |
| 58 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/jOQXZLZ)|
| 59 | Martin | [Codepen](https://codepen.io/markyourpage/pen/yLQGvrG)|
| 60 | Uli | [Codepen](https://codepen.io/uli1313/pen/zYMyWJK?editors=1100)|
| 61 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/NWEeMXx) |
| 62 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/ZEmVoqX) |
| 63 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/gOQdozm)|
| 64 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/GRwPBZO) |
| 65 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/GRwPBLY) |
| 66 | runweiting | [Codepen](https://codepen.io/weiting14/pen/ExOGOPa) |
| 67 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/qBQLLVK) |
| 68| hsuhsusophie7338 | [Codepen](https://codepen.io/hsuhsusophie/pen/RwqEdXB) |
| 69 | 墨莉 | [Codepen](https://codepen.io/hoku0306/pen/XWyOJGZ?editors=1100) |
| 70 | tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/vYQbLZQ) |
| 71 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/poQGNed) |
| 72 | kimlemon0720  | [Codepen](https://codepen.io/znohmess-the-builder/pen/XWyOZPo) |
| 73 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/GRwzdmP) |
| 74 | 阿賀#3700 | [Codepen](https://codepen.io/landyhsiao776/pen/qBQLBoX) |
| 75 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/poQGZRq) |
| 76 | EY | [Codepen](https://codepen.io/EY-chen/pen/YzRBjeV) |
| 77 | wind | [Codepen](https://codepen.io/wind7y/pen/wvQNQPj) |
| 78 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/wvQNOZY) |
| 79 | Aritan1931 | [Codepen](https://codepen.io/Aritan/pen/MWzLdav) |
| 80 | Sinsaki225 | [Codepen](https://codepen.io/a8322342/pen/GRweJrR?editors=1010) |
| 81 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/yLQwYex) |
| 82 | Long | [Codepen](https://codepen.io/Loonng/pen/GRweEbQ) |
| 83 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/VwVNKXy) |
| 84 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/YzRMveB) |
| 85 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/BaGEPEJ) |
| 86 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/WNYabqJ) |
| 86 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/OJaKJJe) |
| 87 | .rainielin | [Codepen](https://codepen.io/Yunchian-Lin/pen/JjegMYz) |
|88|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/abQeQra)|
| 89 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/dyQxaQZ) |
| 90 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/LYMPPGZ) |
| 91 | WA | [Codepen](https://codepen.io/ldddl/pen/eYbYgVd) |
| 92 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/NWeqYRz) |
| 93 | peggy3169 | [Codepen](https://codepen.io/peggylai/pen/eYbpGNE?editors=1100) | 
| 94 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/yLGeYox?editors=1100) |
| 95 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/GRPomzg) |
| 96 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/XWoXqqd) |
| 97 | ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/LYMLZBR) |
| 98 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/MWZQWej) |
| 99 | 楓 | [Codepen](https://codepen.io/maplestartend/pen/OJqPQbJ) |

---

- 快速複製格式：

```markdown!
| 0 | user | [Codepen]() |
```
