---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day23 - overflow 選單製作"
tags: [軟體工程師體驗營 - 2024]

---

---
tags: 軟體工程師體驗營 - 2024
---

# 🏅 切版任務 Day23 - overflow 選單製作

觀看此[文章](https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow)了解 overflow 屬性使用方式。

## 題目
嘗試利用偽元素與搭配 overflow 製作出設計稿中的這個區塊：

![](https://imgur.com/G6nwI6a.png)

> - 超出區塊的部分會被覆蓋，可以左右滾動呈現（運用 overflow）
> - hover 的效果可以使用偽元素這種方式呈現下方的底線。
> 
> 呈現示意：
> 
> ![](https://imgur.com/j6tTFWc.png)

可以利用此 [模板](https://codepen.io/jmimiding4104/pen/BaezeLz) 修改註解處的 `...` 的部分練習，
也可以嘗試自己從頭開始練習製作。


## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

<!-- 

解答：
https://codepen.io/jmimiding4104/pen/QWRERLG
-->


回報區
---

| 報數 | Discord 名字  |  Codepen／其他回饋                                                         |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
|  01  | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/KKLNKVR) |
|  02  | Sonia | [Codepen](https://codepen.io/YUJOU/pen/MWdbbxV?editors=1100) |
|  03  | Michelle0417 | [Codepen](https://codepen.io/michelle0417/pen/VwOmWOp) |
| 04 | Meng | [Codepen](https://codepen.io/menglin1203/pen/mdYOMdq)
|  05  | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/BaeQdzO) |
|  06  | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/OJYbjpo) |
|  07  | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/BaeQdmv) |
|  08  | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/MWdbvVa) |
|  09  | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/QWRGqQG) |
|  10  | Mionne | [Codepen](https://codepen.io/neohyntw/pen/QWRGOEa) |
|  11  | Kaya | [Codepen](https://codepen.io/kayaribi/pen/LYobOpw) |
|  12  | Aya | [Codepen](https://codepen.io/NoNameNote/pen/dyEOJXR) |
|  13  | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/BaeQmer?editors=1100) |
|  14  | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/xxNRPBw) |
|  15  | kawa | [Codepen](https://codepen.io/z83xji6/pen/oNRYpzW?editors=1100) |
|  16  | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/VwOmyBX) |
|  17  | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/gOJLoNE)|
|  18  | Ariel | [Codepen](https://codepen.io/ariel0510/pen/KKLNQKV) |
|  19  | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/QWRGQyy)|
|  20  | Emma |[Codepen](https://codepen.io/huang_L/pen/vYwydrq)|
|  21  | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/NWVbYyy) |
|  22  | JY | [Codepen](https://codepen.io/jylee0805/pen/ExzNvVP?editors=1100) |
|  23  | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/PovbyEo)|
|  24  | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/abrBBoV)|
|  25  | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/LYoRwzz)|
|  26  | Yini Chen | [Codepen](https://codepen.io/CYini/pen/RwmozGW)|
|  27  | boin | [Codepen](https://codepen.io/boinji/pen/MWdbMrq)|
|  28  | Zander | [Codepen](https://codepen.io/chuangmaster/pen/gOJgrjY) |
|  29  | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/YzbNWwK) |
|  30  | peggy | [Codepen](https://codepen.io/peggy0419/pen/rNgjMrx) |
|  31  | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/pomRdQZ) |
|  32  | macihuang | [Codepen](https://codepen.io/macy1215/pen/mdYWdYO) |
|  33  | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/WNBpZqr) |
|  34  | 勾小勻 | [Codepen](https://codepen.io/easonpan0904/pen/KKLNKVR) |
|  35  | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/QWRgMZm)|
|  36  | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/NWVpKox)|
|  37  | Anna  | [Codepen](https://codepen.io/Anna-Teng/pen/ZENaOaE)|
|  38  | Amy(咂摳)  | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/rNgYEYN?editors=1100)|
|  39  | hao jing  | [Codepen](https://codepen.io/hjxu/pen/yLWpwQr?editors=1101)|
|  40  | Jainee  | [Codepen](https://codepen.io/Jainee0110/pen/yLWjmbQ)|
| 41 | ChrisLin | [Codepen](https://codepen.io/vllzfzco-the-reactor/pen/MWddLvY) |

---

<!--
|  num  | user | [Codepen]() |
-->