今天的挑戰(zhàn)關(guān)于無(wú)序數(shù)組。
背景知識(shí)
HTML當(dāng)中有一個(gè)特殊的元素，它可以用來(lái)創(chuàng)建一個(gè)無(wú)序數(shù)組(unordered lists)，或者叫做彈孔風(fēng)格的序列。
比如下圖紅框當(dāng)中展示的，就是這樣一個(gè)list。
想要遞減這樣的一個(gè)序列，通過(guò)
作為opening tag，接著緊跟我們想要擺放的每一個(gè)元素。對(duì)于每一個(gè)元素，我們都用
標(biāo)簽進(jìn)行包裹，最后在序列的末尾我們加上一個(gè)
作為closing tag。
我們來(lái)看一個(gè)真實(shí)代碼的例子：
-
- milk
-
- cheese
-
這段代碼創(chuàng)建的就是上圖當(dāng)中展示的例子。
題意
去除掉HTML代碼當(dāng)中最后兩個(gè)p標(biāo)簽，并且創(chuàng)建一個(gè)無(wú)序數(shù)組，包含貓咪最喜歡的三樣?xùn)|西。
要求
- 創(chuàng)建一個(gè)ul標(biāo)簽
- 你需要在ul標(biāo)簽當(dāng)中創(chuàng)建三個(gè)li元素
- 你的ul標(biāo)簽需要有一個(gè)closing tag
- 你的li標(biāo)簽每一個(gè)都需要有closing tag
- 你的li標(biāo)簽不能僅包含空格或?yàn)榭?/li>
編輯器
CatPhotoApp
-
-
Click here to view more cat photos.
-
-
-
-
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
-
Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
-
解法
這次的挑戰(zhàn)主要是教我們學(xué)會(huì)使用ul標(biāo)簽，ul標(biāo)簽在網(wǎng)頁(yè)當(dāng)中非常常用，結(jié)合CSS我們可以使用出各種炫酷的效果。包括網(wǎng)頁(yè)的各種導(dǎo)航欄或者是其他形式的序列都可以用它來(lái)實(shí)現(xiàn)。
我們只需要依照題目的要求去除掉最后兩個(gè)段落，然后加上ul標(biāo)簽，并且在其中隨意寫上一項(xiàng)即可。
CatPhotoApp
-
-
Click here to view more cat photos.
-
-
-
-
-
- milk
-
- cheese
-
- rat
-
-
本文轉(zhuǎn)載自微信公眾號(hào)「TechFlow」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系TechFlow公眾號(hào)。
新聞名稱：小白前端入門筆記之Ul標(biāo)簽創(chuàng)建無(wú)序List
轉(zhuǎn)載來(lái)于：http://uogjgqi.cn/article/djiihhp.html
