小白前端入門筆記之Ul標簽創建無序List
今天的挑戰關于無序數組。
背景知識
HTML當中有一個特殊的元素,它可以用來創建一個無序數組(unordered lists),或者叫做彈孔風格的序列。
比如下圖紅框當中展示的,就是這樣一個list。
想要遞減這樣的一個序列,通過
作為opening tag,接著緊跟我們想要擺放的每一個元素。對于每一個元素,我們都用
標簽進行包裹,最后在序列的末尾我們加上一個
作為closing tag。
我們來看一個真實代碼的例子:
- <ul>
- <li>milk</li>
- <li>cheese</li>
- </ul>
這段代碼創建的就是上圖當中展示的例子。
題意
去除掉HTML代碼當中最后兩個p標簽,并且創建一個無序數組,包含貓咪最喜歡的三樣東西。
要求
- 創建一個ul標簽
- 你需要在ul標簽當中創建三個li元素
- 你的ul標簽需要有一個closing tag
- 你的li標簽每一個都需要有closing tag
- 你的li標簽不能僅包含空格或為空
編輯器
- <h2>CatPhotoApp</h2>
- <main>
- <p>Click here to view more <a href="#">cat photos</a>.</p>
- <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
- <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
- <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
- </main>
解法
這次的挑戰主要是教我們學會使用ul標簽,ul標簽在網頁當中非常常用,結合CSS我們可以使用出各種炫酷的效果。包括網頁的各種導航欄或者是其他形式的序列都可以用它來實現。
我們只需要依照題目的要求去除掉最后兩個段落,然后加上ul標簽,并且在其中隨意寫上一項即可。
- <h2>CatPhotoApp</h2>
- <main>
- <p>Click here to view more <a href="#">cat photos</a>.</p>
- <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
- <ul>
- <li>milk</li>
- <li>cheese</li>
- <li>rat</li>
- </ul>
- </main>
本文轉載自微信公眾號「TechFlow」,可以通過以下二維碼關注。轉載本文請聯系TechFlow公眾號。