如何用Ul標(biāo)簽創(chuàng)建無序List

這篇文章主要介紹“如何用Ul標(biāo)簽創(chuàng)建無序List”，在日常操作中，相信很多人在如何用Ul標(biāo)簽創(chuàng)建無序List問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何用Ul標(biāo)簽創(chuàng)建無序List”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

背景知識

HTML當(dāng)中有一個特殊的元素，它可以用來創(chuàng)建一個無序數(shù)組(unordered lists)，或者叫做彈孔風(fēng)格的序列。

比如下圖紅框當(dāng)中展示的，就是這樣一個list。

想要遞減這樣的一個序列，通過

作為opening tag，接著緊跟我們想要擺放的每一個元素。對于每一個元素，我們都用

標(biāo)簽進(jìn)行包裹，最后在序列的末尾我們加上一個

作為closing tag。

我們來看一個真實(shí)代碼的例子：

<ul>   <li>milk</li>   <li>cheese</li> </ul>

這段代碼創(chuàng)建的就是上圖當(dāng)中展示的例子。

題意

去除掉HTML代碼當(dāng)中最后兩個p標(biāo)簽，并且創(chuàng)建一個無序數(shù)組，包含貓咪最喜歡的三樣?xùn)|西。

要求

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 創(chuàng)建一個ul標(biāo)簽

3. 你需要在ul標(biāo)簽當(dāng)中創(chuàng)建三個li元素

4. 你的ul標(biāo)簽需要有一個closing tag

5. 你的li標(biāo)簽每一個都需要有closing tag

6. 你的li標(biāo)簽不能僅包含空格或?yàn)榭?/p>

編輯器

<h3>CatPhotoApp</h3> <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>

解法

這次的挑戰(zhàn)主要是教我們學(xué)會使用ul標(biāo)簽，ul標(biāo)簽在網(wǎng)頁當(dāng)中非常常用，結(jié)合CSS我們可以使用出各種炫酷的效果。包括網(wǎng)頁的各種導(dǎo)航欄或者是其他形式的序列都可以用它來實(shí)現(xiàn)。

我們只需要依照題目的要求去除掉最后兩個段落，然后加上ul標(biāo)簽，并且在其中隨意寫上一項(xiàng)即可。

<h3>CatPhotoApp</h3> <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>

到此，關(guān)于“如何用Ul標(biāo)簽創(chuàng)建無序List”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！