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

# 🏅 切版任務 Day27 - Swiper RWD 變換排版、CSS 樣式調整

利用此[模板](https://codepen.io/hexschool/pen/BaqgoVe)，依照下方題目要求，修改 CSS、JS `...` 的部分

### 題目 1
運用 [breakpoints](https://swiperjs.com/swiper-api#param-breakpoints)，嘗試讓 swiper 隨著斷點變換排版：
- 在手機版時呈現單欄排版
- 在 576px 以上時呈現雙欄排版
- 在 768px 以上時呈現三欄排版
> swiper 斷點設定為 mobile first

### 題目 2
運用開發人員工具，觀看分頁按鈕 class 樣式，調整 CSS 樣式：
- 將分頁按鈕調整至距離卡片文字底部 24px
- 一般分頁按鈕背景顏色調整為 `#525252`、透明度（opacity） 1
- 點選分頁按鈕時，按鈕樣式變為：寬高 12px、背景顏色 `#ffffff`

### 整體呈現示意
手機版：
<img src="https://hackmd.io/_uploads/ryVlI_NI2.png" width="300">

576px 以上：

768px 以上：

## 回報流程

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


<!--

解答：
https://codepen.io/hexschool/pen/LYgKVwx

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1| Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/KKGOVzz) |
| 2| Eero#1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/gOBVPYq) |
| 3 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/eYPqJNg) |
| 4 | Jacky7035#9423 | [Codepen](https://codepen.io/adens123/pen/BaqXjyg) |
| 5 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/GRYVojL) |
| 6 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/eYPqJOB) |
| 7 | Kulimusoda#2875 | [Codepen](https://codepen.io/yuch3n_chen/pen/mdzNVPv) |
| 8 | townyuan#2653 | [Codepen](https://codepen.io/townyuan/pen/mdzNVwg) |
| 9 | Rochel#4754 | [Codepn](https://codepen.io/rochelwang1205/pen/qBJeZEw) |
| 10 | Snadra#1987 | [Codepn](https://codepen.io/mlqmhltg/pen/NWOQNxj) |
| 11 | ChaosTu#9311 | [Codepn](https://codepen.io/torotu/pen/WNaVwpZ) |
| 12 | Akira#9996 | [Codepn](https://codepen.io/Akira-Chen/pen/RweXaOp) |
| 13 | JimWang#6134 | [Codepn](https://codepen.io/Jim-Wang-the-selector/pen/qBJeZgO) |
| 14 | snow#0255 | [Codepen](https://codepen.io/snow21723/pen/GRYVqwX) |
| 15 | Hao#2485 | [Codepen](https://codepen.io/Seanfeb16/pen/PoyMGQY) |
| 16 | peihsuan#6315 | [Codepen](https://codepen.io/peihsuanlai/pen/vYVoKaR) |
| 17 | gahwa#3562 | [Codepen](https://codepen.io/gahwa17/pen/BaqXQoQ) |
| 18 | liam9930#4129 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/oNaKBNz?editors=0010) |
| 19 | 翔.#0859 | [Codepen](https://codepen.io/energy95272z/pen/zYmgNZv) |
| 20 | jia yu#8896 | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/MWPNvZv) |
| 21 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/KKGOvGW) |
| 22 | Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/MWPNOWx) |
| 23 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/gOBVzQY) |
| 24 | 浪裡小白龍#6860 | [Codepen](https://codepen.io/Emillo/pen/bGmXxVP) |
| 25 | 姜承#8204 | [Codepen](https://codepen.io/Troy0718/pen/rNqXqdQ) |
| 26 | HsuanTang#1349 | [Codepen](https://codepen.io/HsuanTang/pen/jOegdGa) |
| 27 | David0799#4415 | [Codepen](https://codepen.io/David0799/pen/OJBKKWG) |
| 28 | yoyo#1003 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/rNqXKgb) |
| 29 | Ataraxia#9977 | [Codepen](https://codepen.io/ataraxia8888/pen/YzJmMPL) |
| 30 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/eYQOjdX) |
| 31 | Janet#5784 | [Codepen](https://codepen.io/janetlinnn/pen/WNYNxEJ) |
| 32 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/QWJWmqr) |
|33|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/PoxqjJN)|
| 34 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/xxQGPzB) |
| 35 | weiting#3489 | [Codepen](https://codepen.io/weiting14/pen/oNQjZML) |
| 36 | 兔子#6746 | [Codepen](https://codepen.io/CarrotDetector/pen/PoxPMgO) |
| 37 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/JjeXPyK) |
| 38 | 薇拉#8110 |[Codepen](https://codepen.io/michellecc0522/pen/bGQpGgX)|
| 39 | CMLB0212|[Codepen](https://codepen.io/Chungmin0212/pen/eYQzMeZ)|
| 40 | PoWei#8484 |[Codepen](https://codepen.io/harrison-wei-lai/pen/dyQmRBW)|
| 41 | betty#0693 |[Codepen](https://codepen.io/betty-hu/pen/VwVGPGN?editors=1100)|
| 42 | FiReBrO#0557 |[Codepen](https://codepen.io/firebro42/pen/MWZgoaK)|