---
# System prepended metadata

title: "\U0001F3C5 Day 2｜JSX 屬性練習"
tags: [2023 React 入門攻略工作坊]

---

呈昨天提到的，在撰寫 React 會大量使用到 JSX 的部分，除了基本的樣板以外，今天也持續介紹常見的 JSX 使用，一起來練習看看吧！
### JSX 最外層只能有一個根元件
一個元件不能返回多個元素，就像一個函數不能返回多個值一樣。
錯誤示範：
```jsx=
const element = <h2> Hello！</h2><h2> 你好！</h2>
```
正確示範：
```jsx=
const element = <div><h2> Hello！</h2><h2> 你好！</h2></div>
```

### JSX 中的 class
在 JSX 同樣可以加入 class 來指定樣式，但要注意屬性名稱需改為 className。
例如：
```jsx=
const element = <div className="card"><h2> Hello！</h2><h2> 你好！</h2></div>
```

### JSX 中的屬性代入
在 JSX 中需要被視為 JavaScript 處理的部分，都需要使用大括號 {} 包住。
例如：
```jsx=
const imgUrl = "https://i.pravatar.cc/150?img=38";
<img src={imgUrl} />
```

### JSX 中的 style
在 JSX 中使用 style 設定樣式，需在大括號內使用物件的方式設定，物件內的樣式屬性用駝峰命名法（camelCase）撰寫。

例如：
```jsx=
const element = <div style={
  {
    backgroundColor: 'black',
    color: 'white'
  }
 }>
    <h2> Hello！</h2><h2> 你好！</h2>
</div>
```

### JSX 中的 for
在 JSX 中使用到 for 屬性時，需注意要將屬性名稱改為 htmlFor。
例如：
```jsx=
<label htmlFor="firstName">名字：</label>
<input id="firstName" type="text"/>
```

## 題目

### 練習一
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/yLKLRaN)，並撰寫 JSX 完成以下畫面：
<img src="https://i.imgur.com/dxF40uI.png" width="300"/>

### 練習二
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/MWzxwZG?editors=0010)，並撰寫 JSX 完成以下畫面：
![](https://hackmd.io/_uploads/SkeEMxuj3.png)

備註：
- 畫面需求的 HTML 格式結構可以參考 HTML 中的註解。



## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 
練習一：
```
// 練習區塊
const element = <div className="card">
 <img src={user.avatar} alt="頭貼" />
  <div className="content">
    <h3><b>{formatName(user)}</b></h3> 
    <p>{user.description}</p> 
    <p className="text-blue">會每天練習 React 1 次！ </p>
  </div>
</div>;
// 區塊結束
```
練習二：
```
// 練習區塊
const element = <form  className="p-4" style={{
          background: "url('https://images.unsplash.com/photo-1600303881706-b8a373dc73c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80') no-repeat",
          backgroundSize: "cover"
        }}>
  <div className="mb-3">
    <label htmlFor="email" className="form-label">Email address</label>
    <input type="email" className="form-control" id="email"/>
  </div>
  <div className="mb-3">
    <label htmlFor="password" className="form-label">Password</label>
    <input type="password" className="form-control" id="password"/>
  </div>
  
  <button type="submit" className="btn">Submit</button>
</form>;
// 區塊結束
```
-->


回報區
---

|  #  |    Discord     |                                                                    CodePen / 答案                                                                     |
|:---:|:--------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------:|
| 01  |      圈圈      |    [練習一](https://codepen.io/wjejfczn-the-bold/pen/xxQeWoG?editors=1010)/[練習二](https://codepen.io/wjejfczn-the-bold/pen/NWEmYQz?editors=1010)    |
| 02  |    Ann Chou    |                      [練習一](https://codepen.io/annchou_illu/pen/ZEmZxmw)/[練習二](https://codepen.io/annchou_illu/pen/xxQeWeb)                      |
| 03  |    MotoRin     |             [練習一](https://codepen.io/sakimoto/pen/poQBVzq?editors=1111)/[練習二](https://codepen.io/sakimoto/pen/PoxgeNQ?editors=1010)             |
| 04  |    Billy.Ji    |                      [練習一](https://codepen.io/yaj55ushydna/pen/WNYWJbg)/[練習二](https://codepen.io/yaj55ushydna/pen/gOQyzLv)                      |
| 05  |      Sui       |            [練習一](https://codepen.io/suihsilan/pen/dyQLmxp?editors=0010)/[練習二](https://codepen.io/suihsilan/pen/gOQyeVG?editors=0110)            |
| 06  |   ryan.chou    |                           [練習一](https://codepen.io/csw8524/pen/xxQejOV)/[練習二](https://codepen.io/csw8524/pen/abQxGmd)                           |
| 07  |     Rochel     |       [練習一](https://codepen.io/rochelwang1205/pen/OJaGZmE?editors=1010)/[練習二](https://codepen.io/rochelwang1205/pen/GRwLdNy?editors=1010)       |
| 08  | stevenchang421 |                          [練習一](https://codepen.io/vwtrpqmm/pen/NWEmMGL)/[練習二](https://codepen.io/vwtrpqmm/pen/VwVNxjb)                          |
| 09  |     yuchih     |                           [練習一](https://codepen.io/hijachu/pen/dyQLmqG)/[練習二](https://codepen.io/hijachu/pen/YzRMaOW)                           |
| 10  |      Leo       |                         [練習一](https://codepen.io/Aruminiya/pen/MWzRGjM)/[練習二](https://codepen.io/Aruminiya/pen/bGQJMrQ)                         |
| 11  |     Wendy3     |                           [練習一](https://codepen.io/wendy03/pen/GRwLdvx)/[練習二](https://codepen.io/wendy03/pen/xxQejPR)                           |
| 12  |   Winnie7033   |                [練習一](https://codepen.io/chou-winnie/pen/MWzRGQW)/[練習二](https://codepen.io/chou-winnie/pen/oNQOdEw?editors=0110)                 |
| 13  |      Aden      |                            [練習一](https://codepen.io/Osases/pen/xxQejMd)/[練習二](https://codepen.io/Osases/pen/BaGExXE)                            |
| 14  |      Iris      |                        [練習一](https://codepen.io/iris831206/pen/RwqOyqJ)/[練習二](https://codepen.io/iris831206/pen/VwVNxqQ)                        |
| 15  |      Lulu      |                          [練習一](https://codepen.io/Lin-Lulu/pen/YzRMLov)/[練習二](https://codepen.io/Lin-Lulu/pen/zYMXjgZ)                          |
| 16  |      Eden      |                            [練習一](https://codepen.io/iseden/pen/OJaGELq)/[練習二](https://codepen.io/iseden/pen/oNQOyjd)                            |
| 17  |     yi0863     |               [練習一](https://codepen.io/YI0305/pen/GRwLGEa?editors=1010)/[練習二](https://codepen.io/YI0305/pen/gOQyKRN?editors=0010)               |
| 18  |     Berlin     |                          [練習一](https://codepen.io/3qberlin/pen/YzRMvxd)/[練習二](https://codepen.io/3qberlin/pen/oNQOyGP)                          |
| 19  |      NoZ       |                   [練習一](https://codepen.io/fgfjgror/pen/jOQRpNw)/[練習二](https://codepen.io/fgfjgror/pen/poQBZzW?editors=0010)                    |
| 20  |     chichi     |                       [練習一](https://codepen.io/chichihuang/pen/RwqOyvJ)/[練習二](https://codepen.io/chichihuang/pen/OJaGZKq)                       |
| 21  |     syuan      |            [練習一](https://codepen.io/Syuan-Lin/pen/VwVNxzz?editors=0010)/[練習二](https://codepen.io/Syuan-Lin/pen/vYQMrEz?editors=0010)            |
| 22  |      AYA       |                        [練習一](https://codepen.io/NoNameNote/pen/JjeVBpg)/[練習二](https://codepen.io/NoNameNote/pen/rNQbrrR)                        |
| 23  |     Jasmin     |                         [練習一](https://codepen.io/thejasmin/pen/zYMXLZy)/[練習二](https://codepen.io/thejasmin/pen/vYQMarK)                         |
| 24  |    Wei_Rio     |                            [練習一](https://codepen.io/wei_wu/pen/qBQwKRY)/[練習二](https://codepen.io/wei_wu/pen/oNQOyBM)                            |
| 25  |     Che1z      |                     [練習一](https://codepen.io/Shih-Min-Hung/pen/VwVNBWY)/[練習二](https://codepen.io/Shih-Min-Hung/pen/BaGEPmR)                     |
| 26  |      汪汪      |                                              [練習一/練習二](https://codepen.io/hunwooooof/pen/BaGELpO)                                               |
| 27  |     Daphne     |                 [練習一](https://codepen.io/DaphneShen/pen/OJaGweO)/[練習二](https://codepen.io/DaphneShen/pen/ExOJpqx?editors=0010)                  |
| 28  |      Andy      |                   [練習一](https://codepen.io/jrprzwsj/pen/GRwLXOx)/[練習二](https://codepen.io/jrprzwsj/pen/RwqOYyM?editors=0010)                    |
| 29  |      羅羅      |                            [練習一](https://codepen.io/bjqs02/pen/zYMXLqm)/[練習二](https://codepen.io/bjqs02/pen/VwVNGEy)                            |
| 30  |  jerry456789   |                   [練習一](https://codepen.io/aria198a/pen/ZEmZMqb)/[練習二](https://codepen.io/aria198a/pen/VwVNGRQ?editors=1010)                    |
| 31  |    rChinnnn    |                          [練習一](https://codepen.io/rChinnnn/pen/eYQoLoz)/[練習二](https://codepen.io/rChinnnn/pen/MWzRqdK)                          |
| 32  |      大頭      |                         [練習一](https://codepen.io/d22495521/pen/RwqOeKE)/[練習二](https://codepen.io/d22495521/pen/wvQZYma)                         |
| 33  |      Yen       |        [練習一](https://codepen.io/TZU-HUANG-YEN/pen/zYMXJbo?editors=0110)/[練習二](https://codepen.io/TZU-HUANG-YEN/pen/RwqOeym?editors=1010)        |
| 34  |  jasperlu005   | [練習一](https://codepen.io/uzzakuyr-the-reactor/pen/VwVNErV?editors=1010)/[練習二](https://codepen.io/uzzakuyr-the-reactor/pen/qBQwJxy?editors=1010) |
| 35  |    LinaChen    |                          [練習一](https://codepen.io/LinaChen/pen/ExOJeJW)/[練習二](https://codepen.io/LinaChen/pen/JjeVaVy)                          |
| 36  |   Carey#1010   |                           [練習一](https://codepen.io/Leo4077/pen/KKrYxRO)/[練習二](https://codepen.io/Leo4077/pen/BaGEqJa)                           |
| 37  |   BalaBambe    |                        [練習一](https://codepen.io/bambe-chen/pen/qBQwQWg)/[練習二](https://codepen.io/bambe-chen/pen/wvQZQao)                        |
| 38  |     Alice      |                         [練習一](https://codepen.io/AliceZhao/pen/KKrYrgy)/[練習二](https://codepen.io/AliceZhao/pen/NWEmERj)                         |
| 39  |   David0799    |                         [練習一](https://codepen.io/David0799/pen/oNQOQgR)/[練習二](https://codepen.io/David0799/pen/ExOJOWr)                         |
| 40  |  ChaosTu#9311  |               [練習一](https://codepen.io/torotu/pen/eYQobmw?editors=1010)/[練習二](https://codepen.io/torotu/pen/rNQboeB?editors=1010)               |
| 41  |      金魚      |                      [練習一](https://codepen.io/cso-goldfish/pen/abQxPGm)/[練習二](https://codepen.io/cso-goldfish/pen/LYXvMqz)                      |
| 42  |    Amberhh     |             [練習一](https://codepen.io/Amberhh/pen/RwqOEOJ?editors=0010) / [練習二](https://codepen.io/Amberhh/pen/jOQRXgO?editors=0010)             |
| 43  |   collinkao    |                       [練習一](https://codepen.io/collin0825/pen/OJaGdyG) / [練習二](https://codepen.io/collin0825/pen/oNQOmzd)                       |
| 44  |     JJ Wu      |              [練習一](https://codepen.io/jesswu/pen/dyQLKQr?editors=1010) / [練習二](https://codepen.io/jesswu/pen/jOQRKJB?editors=1010)              |
| 45  |    smalljie    |                         [練習一](https://codepen.io/smalljie/pen/abQxPPp) / [練習二](https://codepen.io/smalljie/pen/abQxXJV)                         |
| 46  |      瑀君      |                   [練習一](https://codepen.io/yennnnn/pen/oNQOmmm) / [練習二](https://codepen.io/yennnnn/pen/gOQyqJb?editors=1010)                    |
| 47  |    ejchuang    |                         [練習一](https://codepen.io/EJChuang/pen/NWEmJNp) / [練習二](https://codepen.io/EJChuang/pen/qBQwvaw)                         |
| 48  |  davidchengtw  |                       [練習一](https://codepen.io/davidcheng/pen/bGQJzJe) / [練習二](https://codepen.io/davidcheng/pen/abQxMbR)                       |
| 49  |    HsienLu     |                   [練習一](https://codepen.io/Hsienlu/pen/vYQMbbq) / [練習二](https://codepen.io/Hsienlu/pen/vYQMPXE?editors=0010)                    |
| 50  |     王偉青     |                         [練習一](https://codepen.io/lovegull/pen/ExOJroo) / [練習二](https://codepen.io/lovegull/pen/ZEmZPKj)                         |
| 51  |    cataska     |                      [練習一](https://codepen.io/lovecankill/pen/YzRMgZP) / [練習二](https://codepen.io/lovecankill/pen/ZEmZPoq)                      |
| 51  |   rainnping    |                        [練習一](https://codepen.io/rainnping/pen/YzRMgjq) / [練習二](https://codepen.io/rainnping/pen/VwVNRVa)                        |
| 53  |     azami      |                            [練習一](https://codepen.io/azami/pen/VwVNReo) / [練習二](https://codepen.io/azami/pen/qBQwvJB)                            |
| 54  |     HanHan     |                        [練習一](https://codepen.io/Emma-Yang/pen/oNQOOXL) / [練習二](https://codepen.io/Emma-Yang/pen/NWEmOjq)                        |
| 55  |      Zona      |                   [練習一](https://codepen.io/w242920/pen/ExOJMdB) / [練習二](https://codepen.io/w242920/pen/JjeVVPd?editors=0010)                    |
| 56  |    anderson    |                     [練習一](https://codepen.io/goodmanbuild/pen/RwqOOxx) / [練習二](https://codepen.io/goodmanbuild/pen/ExOJJeg)                     |
| 57  |    shangchu    |                     [練習一](https://codepen.io/shangchu0412/pen/XWyQoQj) / [練習二](https://codepen.io/shangchu0412/pen/jOQRdWP)                     |
| 58  |   lingchang    |                       [練習一](https://codepen.io/ling-chang/pen/WNYWJQa) / [練習二](https://codepen.io/ling-chang/pen/OJaGZXZ)                       |
| 59  |      Tian      |                          [練習一](https://codepen.io/ccyy915/pen/MWzRdLv) / [練習二](https://codepen.io/ccyy915/pen/PoxgrYP)                          |
| 60  |      便當      |        [練習一](https://codepen.io/wafjxnde-the-typescripter/pen/QWJPXrQ) / [練習二](https://codepen.io/wafjxnde-the-typescripter/pen/YzRMoEX)        |
| 61  |    LiShang     |                          [練習一](https://codepen.io/LiShang/pen/KKrYJPw) / [練習二](https://codepen.io/LiShang/pen/ZEmZdyj)                          |
| 62  |     Wendy      |                       [練習一](https://codepen.io/siaochanwu/pen/eYQowZr) / [練習二](https://codepen.io/siaochanwu/pen/Poxgrep)                       |
| 63  |     jia yu     |      [練習一](https://codepen.io/fjqxaznl-the-reactor/pen/vYQMqpL) / [練習二](https://codepen.io/fjqxaznl-the-reactor/pen/GRwLbyj?editors=1010)       |
| 64  |      aray      |    [練習一](https://codepen.io/ceqchksj-the-flexboxer/pen/eYQowLb) / [練習二](https://codepen.io/ceqchksj-the-flexboxer/pen/JjeVQVo?editors=1010)     |
| 65  |     黃士桓     |                    [練習1](https://codepen.io/shr-huan-huang/pen/poQBXVK) / [練習2](https://codepen.io/shr-huan-huang/pen/GRwLbzW)                    |
| 66  |       WA       |                [練習1](https://codepen.io/ldddl/pen/xxQeoex?editors=0010) / [練習2](https://codepen.io/ldddl/pen/qBQwzwd?editors=0010)                |
| 67  |   Hanhanbite   |                        [練習1](https://codepen.io/hanhanbite/pen/qBQweEb) / [練習2](https://codepen.io/hanhanbite/pen/ExOJqgj)                        |
| 68  |    kuanju27    |                        [練習1](https://codepen.io/Eero-Chiao/pen/poQBMLX) / [練習2](https://codepen.io/Eero-Chiao/pen/YzRMmOY)                        |
| 69  |   JohnChien    |             [練習1](https://codepen.io/glqwazid-the-selector/pen/zYMXgxO) / [練習2](https://codepen.io/glqwazid-the-selector/pen/oNQOKWB)             |
| 70  |      sora      |                      [練習1](https://codepen.io/hoshisora000/pen/WNYWVLB) / [練習2](https://codepen.io/hoshisora000/pen/oNQOKmG)                      |
| 71  |   PeterChung   |                         [練習1](https://codepen.io/tsang6187/pen/bGQJXMO) / [練習2](https://codepen.io/tsang6187/pen/PoxgMXy)                         |
| 72  |     dgajc      |                            [練習一](https://codepen.io/dgajc/pen/MWzdgdE)/ [練習二](https://codepen.io/dgajc/pen/GRwaRqp)                             |
| 72  |     Kyrie      |                 [練習一](https://codepen.io/KyrieHaveGoodDay/pen/MWzdaLP)/ [練習二](https://codepen.io/KyrieHaveGoodDay/pen/GRwapLW)                  |
| 73  |      Tami      |                [練習一](https://codepen.io/wqsdqbjn-the-vuer/pen/wvQbMMm) / [練習二](https://codepen.io/wqsdqbjn-the-vuer/pen/oNQRbLz)                |
| 74  |      SKey      |                       [練習一](https://codepen.io/Dale-Chien/pen/MWzdKpd) / [練習二](https://codepen.io/Dale-Chien/pen/gOQJPBK)                       |
| 75  |    toshow.     |                    [練習一](https://codepen.io/toshow/pen/KKrLzKK) / [練習二](https://codepen.io/toshow/pen/GRwaZJY?editors=0010)                     |
| 76  |      Kent      |                   [練習一](https://codepen.io/labkunz/pen/gOQJrrZ) / [練習二](https://codepen.io/labkunz/pen/JjeqXEM?editors=1111)                    |
| 77  |   泊岸#3466    |               [練習一](https://codepen.io/qoq77416416/pen/GRwaZow?editors=1010) / [練習二](https://codepen.io/qoq77416416/pen/ZEmNWLB)                |
| 78  |  Melody#7746   |             [練習一](https://codepen.io/jkmqhedd-the-sasster/pen/GRwaoaB) / [練習二](https://codepen.io/jkmqhedd-the-sasster/pen/QWJRNrN)             |
| 79  |    CG#3411     |             [練習一](https://codepen.io/qzmnczik-the-decoder/pen/vYQwGYr) / [練習二](https://codepen.io/qzmnczik-the-decoder/pen/vYQwKEo)             |
| 80  |     sylvia     |             [練習一](https://codepen.io/aqrerdxo-the-sasster/pen/PoxvPyp) / [練習二](https://codepen.io/aqrerdxo-the-sasster/pen/NWEVbMq)             |
| 81  |     Rxzan      |                       [練習一](https://codepen.io/Tzuru-Chen/pen/poQBZOO) / [練習二](https://codepen.io/Tzuru-Chen/pen/zYMXLJQ)                       |
| 82  |      Liam      |                        [練習一](https://codepen.io/liamkkobe/pen/oNQRLXV) / [練習二](https://codepen.io/liamkkobe/pen/vYQwgBq)                        |
| 83  |   PoWei#8484   |                 [練習一](https://codepen.io/harrison-wei-lai/pen/yLQWgyo) / [練習二](https://codepen.io/harrison-wei-lai/pen/RwqmKpN)                 |
| 84  |      阿旭      |                   [練習一](https://codepen.io/qzmnczik-the-decoder/pen/vYQwGYr) / [練習二](https://codepen.io/koei-lu/pen/wvQbgmd)                    |
| 85  |     May L      |                          [練習一](https://codepen.io/may7243/pen/YzRbVqv) / [練習二](https://codepen.io/may7243/pen/qBQGmaV)                          |
| 86  |    變羊魔法    |                       [練習一](https://codepen.io/cssf998811/pen/oNQRWmQ) / [練習二](https://codepen.io/cssf998811/pen/YzRbVBg)                       |
| 87  |    besspeng    |                       [練習一](https://codepen.io/besspengcl/pen/NWEVjex) / [練習二](https://codepen.io/besspengcl/pen/rNQgGOM)                       |
| 88  |   Sabastian    |        [練習一](https://codepen.io/SebastianWei/pen/NWEVaNZ?editors=0010) / [練習二](https://codepen.io/SebastianWei/pen/ExOzbwO?editors=0010)        |
| 89  |     Gimmy      |                                             [練習一](https://codepen.io/TingKan/pen/dyQEZQP) / [練習二]()                                             |
| 90  |      Lin       |           [練習一](https://codepen.io/vseznpoh-the-flexboxer/pen/vYQwzYX) / [練習二](https://codepen.io/vseznpoh-the-flexboxer/pen/bGQyxda)           |
| 91  |    billy_ti    |             [練習一](https://codepen.io/Ti-Show/pen/YzRbqZO?editors=1111) / [練習二](https://codepen.io/Ti-Show/pen/vYQwzmx?editors=1010)             |
| 92  |     地球儀     |                       [練習一](https://codepen.io/dayday1222/pen/ExOzmRo) / [練習二](https://codepen.io/dayday1222/pen/RwqmVvm)                       |
| 93  |    ssshane     |                       [練習一](https://codepen.io/sam6091260/pen/RwqmdaX) / [練習二](https://codepen.io/sam6091260/pen/MWzddJK)                       |
| 94  |     carrie     |                      [練習一](https://codepen.io/echocarriet/pen/WNYBqew) / [練習二](https://codepen.io/echocarriet/pen/rNQgEzv)                      |
| 95  |  hsuhsusophie  |                    [練習一](https://codepen.io/hsuhsusophie/pen/MWzdMOQ ) / [練習二](https://codepen.io/hsuhsusophie/pen/WNYBqzO )                    |
| 96  |      喃喃      |            [練習一](https://codepen.io/VeLario/pen/rNQgXxR?editors=1010 ) / [練習二]( https://codepen.io/VeLario/pen/dyQExZO?editors=1010)            |
| 97  |     Ingrid     |                [練習一](https://codepen.io/ingrid-chi/pen/PoxvgrB) / [練習二](https://codepen.io/ingrid-chi/pen/GRwbJwe?editors=1010)                 |
| 98  |   Nikki.Kang   |                       [練習一](https://codepen.io/Nikki-Kang/pen/GRwbNRd) / [練習二](https://codepen.io/Nikki-Kang/pen/abQgBvB)                       |
| 99  |     shcopy     |                           [練習一](https://codepen.io/shcopy/pen/gOQNLyJ) / [練習二](https://codepen.io/shcopy/pen/gOQNgbV)                           |
| 100 |      Cami      |                         [練習一](https://codepen.io/fayevivi/pen/GRwbrNK) / [練習二](https://codepen.io/fayevivi/pen/eYQwgeM)                         |
| 101 |       RJ       |                      [練習一](https://codepen.io/RJ-S/pen/QWJXdRO) / [練習二](https://codepen.io/RJ-S/pen/poQXegZ?editors=1010)                       |
| 102 |      Kaya      |                                                  [Codepen](https://codepen.io/laron9486/pen/poQXeGB)                                                  |
| 103 |  Johnson3669   | [練習一](https://codepen.io/crpbugqy-the-typescripter/pen/VwVOrKJ) / [練習二](https://codepen.io/crpbugqy-the-typescripter/pen/GRwaONJ?editors=1010)  |
| 104 |     Carole     |           [練習一](https://codepen.io/s892261118/pen/oNQroOK?editors=0010) / [練習二](https://codepen.io/csw8524/pen/abQxGmd?editors=0010)            |
| 105 |     Jie016     |                          [練習一](https://codepen.io/Jie-Kuo/pen/ExOBbop) / [練習二](https://codepen.io/Jie-Kuo/pen/bGQPapo)                          |
| 106 |   yoyo#2678    |    [練習一](https://codepen.io/djmliogn-the-flexboxer/pen/XWyLBMZ) / [練習二](https://codepen.io/djmliogn-the-flexboxer/pen/oNQrMWJ?editors=1010)     |
| 107 |  joanhui#9261  |                          [練習一](https://codepen.io/Joanhui/pen/jOQjXXQ) / [練習二](https://codepen.io/Joanhui/pen/dyQBayW)                          |
| 108 |      精靈      |      [練習一](https://codepen.io/vesbexih-the-bashful/pen/zYMVbXm) / [練習二](https://codepen.io/vesbexih-the-bashful/pen/bGQPJdR?editors=1010)       |
| 109 |    jiun7523    |                        [練習一](https://codepen.io/jiun-jiun/pen/VwVJNNp) / [練習二](https://codepen.io/jiun-jiun/pen/eYQwaNY)                        |
| 110 |      妤ㄦ      |                [練習一](https://codepen.io/bmtuepzo-the-sans/pen/wvQLbWY) / [練習二](https://codepen.io/bmtuepzo-the-sans/pen/JjeQqWW)                |
| 111 |   d05220725    |              [練習一](https://codepen.io/NICK20190621/pen/ZEmgzXb) / [練習二](https://codepen.io/NICK20190621/pen/ZEmgzab?editors=1111)               |
| 112 |     Overy      |   [練習一](https://codepen.io/tupbsair-the-vuer/pen/vYQoBar?editors=0010) / [練習二](https://codepen.io/tupbsair-the-vuer/pen/OJaKLBq?editors=0010)   |
| 113 |     SkyWoW     |                   [練習一](https://codepen.io/WoW-Sky/pen/vYQoYWw) / [練習二](https://codepen.io/WoW-Sky/pen/WNYVNyo?editors=1010)                    |
| 114 |   andychiou    |                    [練習一](https://codepen.io/andychiou1113/pen/ExOqaWJ) / [練習二](https://codepen.io/andychiou1113/pen/xxQvGdR)                    |
| 115 |  Steve Tseng   |                        [練習一](https://codepen.io/hifly0921/pen/zYMQJbq) / [練習二](https://codepen.io/hifly0921/pen/mdQNOVq)                        |
| 116 |      Evan      |                        [練習一](https://codepen.io/evanz1215/pen/YzRmZPz) / [練習二](https://codepen.io/evanz1215/pen/MWzNpaG)                        |
| 117 |  PollyPO_Lee   |                      [練習一](https://codepen.io/pollypo1986/pen/QWJepjq) / [練習二](https://codepen.io/pollypo1986/pen/gOQVmww)                      |
| 118 |     Pocky      |              [練習一](https://codepen.io/lnwjloyh-the-looper/pen/jOQgBzK) / [練習二](https://codepen.io/lnwjloyh-the-looper/pen/VwVopVK)              |
| 119 |      Kai       |               [練習一](https://codepen.io/kaicheng928/pen/GRwVWwE) / [練習二](https://codepen.io/kaicheng928/pen/yLQmMdw?editors=1010)                |
| 120 |    Ataraxia    |                     [練習一](https://codepen.io/ataraxia8888/pen/bGQyqbL) / [練習二](https://codepen.io/ataraxia8888/pen/RwqmpWp)                     |
| 121 |      大衛      |            [練習一](https://codepen.io/exnsrpjc/pen/zYMgXZM?editors=1010) / [練習二](https://codepen.io/exnsrpjc/pen/gOQVyXL?editors=0010)            |
| 122 |      Cami      |                         [練習一](https://codepen.io/irisLife/pen/LYXwoXj) / [練習二](https://codepen.io/irisLife/pen/KKrOLLK)                         |
| 123 |     Ed Hsu     |                           [練習一](https://codepen.io/Ed-Hsu/pen/gOQVVdm) / [練習二](https://codepen.io/Ed-Hsu/pen/BaGXXMw)                           |
| 124 |   Joyce Hsu    |                      [練習一](https://codepen.io/HSUCHIASHIH/pen/WNLeNmG) / [練習二](https://codepen.io/HSUCHIASHIH/pen/eYbOYay)                      |
| 125 |    connieK     |                [練習一](https://codepen.io/plkang3617/pen/zYyOBMR?editors=1010) / [練習二](https://codepen.io/plkang3617/pen/zYyOBgj)                 |
| 126 |      Yin       |                [練習一](https://codepen.io/andy888jam/pen/QWzLqWx) / [練習二](https://codepen.io/andy888jam/pen/JjwPrGd?editors=0010)                 |
| 127 |   小明#4408    |             [練習一](https://codepen.io/ujlylmbv-the-lessful/pen/LYMPzLR) / [練習二](https://codepen.io/ujlylmbv-the-lessful/pen/JjwPOga)             |
| 128 |      owen      |                        [練習一](https://codepen.io/owen-dong/pen/MWZgqbO) / [練習二](https://codepen.io/owen-dong/pen/NWeKEWm)                        |
| 129 |   Emily4869    |                    [練習一](https://codepen.io/aptx4869Emily/pen/zYyYOGQ) / [練習二](https://codepen.io/aptx4869Emily/pen/BavaBpJ)                    |
| 130 |     Mocha      |                  [練習一](https://codepen.io/MochaLee/pen/RwEbJex) / [練習二](https://codepen.io/MochaLee/pen/OJrJLKo?editors=1010)                   |
| 131 |     hungya     |                        [練習一](https://codepen.io/hungya777/pen/dywyyXJ) / [練習二](https://codepen.io/hungya777/pen/KKbKKXp)                        |
| 132 |     curry      |               [練習一](https://codepen.io/Ted19851223/pen/PoXwNaK) / [練習二](https://codepen.io/Ted19851223/pen/PoXwNxJ?editors=1010)                |
| 133 |      Nisa      |                          [練習一](https://codepen.io/Nisa491/pen/vYvEpmb) / [練習二](https://codepen.io/Nisa491/pen/YzdPYPO)                          |
| 134 |  SaturnXVIII   |                      [練習一](https://codepen.io/SaturnXVIII/pen/MWZYZxE) / [練習二](https://codepen.io/SaturnXVIII/pen/WNLbPrj)                      | 
| 135 | Yiren | [練習一](https://codepen.io/Yiren_Liou/pen/yLGNJpd) / [練習二](https://codepen.io/Yiren_Liou/pen/NWeqrze) |
| 136 | Ken | [練習一](https://codepen.io/Ken720053/pen/jOXPVPm) / [練習二](https://codepen.io/Ken720053/pen/dywoOGE) |
| 137 | Lydia | [練習一](https://codepen.io/ling-chen-the-flexboxer/pen/NWeqabd) / [練習二](https://codepen.io/ling-chen-the-flexboxer/pen/OJrVxOb?editors=1010) |
| 138 | AmberLin | [練習一](https://codepen.io/autum55853/pen/wvRaPom) / [練習二](https://codepen.io/autum55853/pen/YzdXEbY) |
| 139 | DavidTsai | [練習一](https://codepen.io/David-Tsai/pen/BavoOWv) / [練習二](https://codepen.io/David-Tsai/pen/XWomPzj) |
| 140 | Jujube | [練習一](https://codepen.io/tendayling/pen/WNLvXjg) / [練習二](https://codepen.io/tendayling/pen/jOXPaad) |
| 141 | 辣椒 | [練習一](https://codepen.io/chilichen118/pen/LYMbZzr) / [練習二](https://codepen.io/chilichen118/pen/JjwbKZZ?editors=1010) |
- 快速複製格式：
```markdown!
| 0 | user | [練習一]() / [練習二]() |
```
