---
# System prepended metadata

title: "\U0001F3C5 Day 9 - 練習 Emmet 語法"
tags: [網頁切版直播班 - 2024 夏季班]

---

# 🏅 Day 9 - 練習 Emmet 語法

請練習將以下圖中的排版利用 Emmet 語法寫出來，回報時請寫 Emmet 語法，例如：
```
h1{標題}+p{Lorem ipsum dolor sit!}...
```

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


>ithome 之 logo 的連結為```https://ithelp.ithome.com.tw/storage/image/logo.svg```

---

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
（也可以將答案直接貼至「回報區」）

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

<!-- 解答：
h1{標題}+(p>lorem4)+img[src="https://ithelp.ithome.com.tw/storage/image/logo.svg
"]+h2{副標題}+(ul>li{$}*3)+h2{副標題}+(p>lorem4)
-->
回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/NWZKPog)|
| 2 | Angela_la |[Codepen](https://codepen.io/Angela-the-builder/pen/LYowzOZ?editors=1100)|
| 3 | Kiwi |[Codepen](https://codepen.io/kiwi1113/pen/oNrvgKv)|
| 4 | yoishere |[Codepen](https://codepen.io/yoishere/pen/LYKPEKw?editors=1010)|
| 5 | Mars |[Codepen](https://codepen.io/MarsKuo/pen/VwJZLwL)|
| 6 |Hailey|[Cordpen](https://codepen.io/sxbokfja-the-flexboxer/pen/QWXLbLa)
| 7 | GAVI | [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/XWLrbWo) |
| 8 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/bGPbNyR) |
| 9 | Theodore | [Codepen](https://codepen.io/GustavoFringgg/pen/ZEdzGQm) |
| 10 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/JjQPogQ) |
| 11 | Mike | [Codepen](https://codepen.io/mike2049/pen/KKjPpaB?editors=1100) |
| 12 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/WNqevRz?editors=1000) |
| 13 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/bGPbdWL) |
| 14 | han | [Codepen](https://codepen.io/iamHanCheng/pen/xxNjBvN) |
| 15 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme) |
| 16 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/zYQgLxB) |
| 17 | fan_fan | [Codepen](https://codepen.io/fan1102/pen/rNEBVpE) |
| 18 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/rNEBVPN) |
| 19 | ray | [Codepen](https://codepen.io/rayychenn/pen/PorYPoa) |
| 19 | 爆漿 | [Codepen](https://codepen.io/dhpsxzwh-the-decoder/pen/gONYagd) |
| 20 | Yolanda | [Codepen](https://codepen.io/vcscqrtz-the-animator/pen/LYKPpGy) |
| 21 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/mdZbewj?editors=1010) |
| 23 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/BagBNXP)| 
| 24 | Po Wei |[Codepen](https://codepen.io/Po-Wei-Lai/pen/oNrvjrM)| 
| 25 | Jainee |[Codepen](https://codepen.io/Jainee0110/pen/RwzbrPO)| 
| 26 | lunlun0514 |[Codepen](https://codepen.io/f5badapple/pen/oNrvbBJ)| 
| 27 | 泊岸 |[Codepen](https://codepen.io/qoq77416416/pen/RwzbrKz?editors=1100)| 
| 28 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/GRbKowo)|
| 29 | w | [Codepen](https://codepen.io/Wei-the-sasster/pen/yLdBOLE?editors=1000) |
| 30 | david1819 | [Codepen](https://codepen.io/David-Lin-the-vuer/pen/KKjPzKo) |
| 31 |OSN|[Codepen](https://codepen.io/osncodepen/pen/wvLwMRg)|
| 32 |皮皮|[Codepen](https://codepen.io/rainbow-the-reactor/pen/ZEdzWMN)|
| 33 |hoyiiiii|[Codepen](https://codepen.io/hoyii/pen/ExBYKOj)|
| 34 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/oNrvxKZ) |
| 35 | Chloe_墨 | [Codepen](https://codepen.io/ChloeTseng1026/pen/zYVOqjO)|
| 36 | chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/zYVOBxr) |
| 37 | KUN. | [Codepen](https://codepen.io/barry91205/pen/BagBzYb) |
| 38 | jasonlin| [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/QWXLEJw) |
| 39 | Jim | [Codepen](https://codepen.io/JimChou/pen/NWZKroW) |
| 40 | Enzo | [Codepen](https://codepen.io/JasonHo_HYC/pen/WNqexmb) |
| 41 | 嚼勁 | [Codepen](https://codepen.io/James520284/pen/MWMgjwp) |
| 42 | kawa | [Codepen](https://codepen.io/z83xji6/pen/QWXLKrv?editors=1010) |
| 43 | AuraTao| [Codepen](https://codepen.io/AURATAO/pen/ZEdzpmo) |
| 44 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/OJeLbXm) |
| 45 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/VwJZmjv) |
| 46 | Glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/yLdBVJq?editors=1100) |
| 47 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/zYVOoBX) |
| 48 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/wvLwoXm?editors=1000) |
| 49 | 火腿 | [Codepen](https://codepen.io/tvuyjvwh-the-typescripter/pen/GRbKNxE) |
| 50 | 小咪 | [Codepen](https://codepen.io/iloveu3000x/pen/GRbKNLy) |
| 51 | MY | [Codepen](https://codepen.io/ahmomoz/pen/yLdBgYm?editors=1010) |
| 52 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/PorYWjy)|
| 53 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/VwJZpZE) |
| 54 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/wvLwJgK?editors=1010) |
| 55 | KevinHuang | [Codepen](https://codepen.io/qw-huang/pen/BagBRjR) |
| 56 | emmayo | [Codepen](https://codepen.io/emmayo/pen/VwJZbme) |
| 57 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/YzoKVrG) |
| 58 | neoyo | [Codepen](https://codepen.io/Neo-oo/pen/eYwOWeX) |
| 59 | hao jing | [Codepen](https://codepen.io/hjxu/pen/WNqeEKp?editors=1010) |
| 60 | 俊 | [Codepen](https://codepen.io/jun12079/pen/xxoKZve) |
| 61 | Kim | [Codepen](https://codepen.io/kim0101__/pen/zYVOEPV) |
| 62 | TONY名彤 | [Codepen](https://codepen.io/Ming-Tung-Chien/pen/MWMgyQx) |
| 63 | wind | [Codepen](https://codepen.io/wind7y/pen/PorYOLg) |
| 64 | Darius_TszYing| [Codepen](https://codepen.io/bekgnohe-the-selector/pen/OJeLzBN) |
| 65 | n913239 | [Codepen](https://codepen.io/n913239/pen/ZEdzrvw) |
| 66 | ㄚ華| [Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/rNEBJQX?editors=1100) |
| 67 | N7 | [Codepen](https://codepen.io/neohyntw/pen/xxoKzqv) |
| 68 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/GRbKGwv) |
| 69 | skyderry | [Codepen](https://codepen.io/hvvjvkva-the-sasster/pen/OJeLwYY) |
| 70 | 咖 | [Codepen](https://codepen.io/daru-Ga/pen/NWZKONv?editors=1010) |
| 71 | smallr1229 | [Codepen](https://codepen.io/Smallr/pen/QWXLzov) |
| 72 | icesea25 | [Codepen](https://codepen.io/icesea25/pen/bGPbJMp) |
| 73 | lianne.. | [Codepen](https://codepen.io/Elaina-L/pen/dyBbBmZ) |
| 74 | 超立方體Andy |[Codepen](https://codepen.io/Andy-Yu-the-scripter/pen/eYwYmNg)|
| 75 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/RwzwWJy) |
| 76 | Enn | [Codepen](https://codepen.io/enntang/pen/bGPGeEj) |
| 77 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/JjQjKYX) |
| 78 | xcx100 | [Codepen](https://codepen.io/c13026/pen/ZEdEOBz) |
| 79 | .sytiny | [Codepen](https://codepen.io/emma6542/pen/JjQjyqe?editors=1100) |
| 80 | Noelle | [Codepen](https://codepen.io/NoelleKH/pen/RwzwLQR?editors=1000) |
| 90 | Toro | [Codepen](https://codepen.io/andawu/pen/JjQjLKX?editors=1100) |
| 91 | Eason | [Codepen](https://codepen.io/eulvmmbq-the-typescripter/pen/poXoQRY?editors=1010) |
| 92 | Steven1220 | [Codepen](https://codepen.io/Steven1220/pen/xxoxQqZ) |
| 93 | jamesct34 | [Codepen](https://codepen.io/JCT34/pen/Poroxyd) |
| 94 | iamcan | [Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/qBzBwJy?editors=1000) |
| 95 | MYP | [Codepen](https://codepen.io/pmyfr/pen/YzoPqqo) |
| 96 | Matt BB | [Codepen](https://codepen.io/mm3248965/pen/NWZPpdQ?editors=1010) |
| 97 | 小草尼 | [Codepen](https://codepen.io/niiiiiiiiiima/pen/eYwmeQY) |
| 98 | macihuang | [Codepen](https://codepen.io/macy1215/pen/wvQXGmv) |
| 99 | 深海 | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/KKjwGrZ) |
| 100 | 610 | [Codepen](https://codepen.io/YI-LING-LIU/pen/BagNBNy) |
| 101 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/dyBombb) |
| 102 | chris | [Codepen](https://codepen.io/chrischen666/pen/zYVGyqv?editors=1000) |
| 103 | zen | [Codepen](https://codepen.io/zen742937/pen/qBzdvqe) |
| 104 | Lobinda | [Codepen](https://codepen.io/Lobinda/pen/JjQdqGL) |
| 105 | 小翎 |[CodePen](https://codepen.io/debbielin/pen/YzoXmNr?editors=1000)|
| 106 | xiang |[CodePen](https://codepen.io/XIANG-XIANG/pen/JjQYdPO)|
| 107 | Yunya | [Codepen](https://codepen.io/cookie1515/pen/ExBVjav) |
| 108 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/eYwpZvR) |
| 109 | 白夜 | [Codepen](https://codepen.io/Wei903/pen/LYKpMGN) |
| 110 | 地瓜 | [Codepen](https://codepen.io/huangtzuchin/pen/ZEdYaad) |
| 111 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/JjQYwBE?editors=1010) |
| 112 | qet1717 | [Codepen](https://codepen.io/gwteqexi-the-bold/pen/MWMybva) |
| 113 | atien0816 | [Codepen](https://codepen.io/Ben-Atien/pen/jOjqQOW?editors=1100) |
| 114 | LKP | [Codepen](https://codepen.io/qtghjujs-the-sasster/pen/XWLdOdb?editors=1100) |
| 115 | Show21 | [Codepen](https://codepen.io/t10026706/pen/MWMjaga?editors=1000) |
| 116 | Chieh | [Codepen](https://codepen.io/Chieh_/pen/OJeReGK?editors=1000) |
| 117 | eddiesun0526 | [Codepen](https://codepen.io/Eddie0526/pen/WNqoYBN)|
| 118 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/VwJPdpw)|
| 119 | Toung | [Codepen](https://codepen.io/Toung/pen/poXPrjX) |
| 120 | Emma | [Codepen](https://codepen.io/Emma0919/pen/jOjwqXm) |
| 121 | lynee1211 | [Codepen](https://codepen.io/ntibaiss-the-solid/pen/OJejrQQ) |
| 122 | 星雨 | [Codepen](https://codepen.io/ybxyuhcv-the-solid/pen/gONxyPW?editors=1010) |
| 123 | Judy | [Codepen](https://codepen.io/yangchi/pen/JjQOGmo) |
| 124 | ji3di | [Codepen](https://codepen.io/jwuuhtxh-the-builder/pen/zYVWypP) |
| 125 | dd_501 | [Codepen](https://codepen.io/daiyy97/pen/PorBQbv) |
| 126 | Haru | [Codepen](https://codepen.io/yology/pen/abgPXad) |
| 127 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/NWZJZvE?editors=1000) |
| 128 | Lotte | [Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/LYKvXWN?editors=1100) |

<!--
    | No | Discord | [Codepen]() |
-->
