嵌套列表
知識(shí)準(zhǔn)備
-
無序列表（ul）
無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)進(jìn)行標(biāo)記（可以由ul的CSS屬性list-style-type進(jìn)行設(shè)置）
- disc（默認(rèn)，實(shí)心圓）
- square（方形）
- circle（空心圓）
- ……
無序列表始于<ul>標(biāo)簽，每個(gè)列表項(xiàng)始于<li>
代碼實(shí)例
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
-
有序列表（ol）
有序列表與無序列表用法相同沃疮，只是列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記
- decimal （默認(rèn)职辅，數(shù)字）
- lower-roman（小寫羅馬數(shù)字）
- upper-roman（大寫羅馬數(shù)字）
- ……
有序列表始于<ol>標(biāo)簽镇匀，每個(gè)列表項(xiàng)始于<li>標(biāo)簽
代碼實(shí)例
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
作業(yè)題目
嵌套列表
題目分析
這是一個(gè)典型的有序無序嵌套的列表，我們從外到內(nèi)逐層分析免钻。
-
首先最外層JavaScript和Java是一個(gè)典型的無序列表，因此我們首先可以先寫一個(gè)無序列表
<ul>
<li>JavaScript</li>
<li>Java</li>
</ul>
第一步
-
然后在往里走一層崔拥，這里我們應(yīng)該拋開外層的東西极舔，只看里面的東西。對(duì)于每一個(gè)列表項(xiàng)链瓦，它們分別又都包含一個(gè)有序列表拆魏。所以我們?cè)诘谝徊降幕A(chǔ)上在寫一個(gè)有序列表。
<ul>
<li>JavaScript
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
</li>
<li>Java
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
</li>
</ul>
第二步
-
同樣慈俯，將我們之前寫的都忘記渤刃，1.第一章下面是一個(gè)無序列表，但是和之前不同的是這個(gè)無序列表項(xiàng)的標(biāo)記是正方形贴膘，因此我們?cè)谏弦徊交A(chǔ)上再寫一個(gè)正方形標(biāo)記的無序列表就大功告成了卖子！
<ul class="disc"> <li>JavaScript <ol> <li>第一章 <ul class="square"> <li>const</li> <li>let</li> </ul> </li> <li>第二章 <ul class="square"> <li>function</li> <li>object</li> </ul> </li> </ol> </li> <li>Java</li> </ul>需要注意的是這里由于無序列表默認(rèn)是小圓球，因此我們需要用class來指定其樣式刑峡，目前HTML5并不贊成這種方式實(shí)現(xiàn)標(biāo)記洋闽，應(yīng)該用我們之前說過的CSS屬性實(shí)現(xiàn)，這里為了方便展示就用這種方式來實(shí)現(xiàn)
第三步
總結(jié)
可以看到對(duì)于循環(huán)嵌套的列表突梦，我們只需要一層一層拆著看诫舅，就會(huì)簡單很多，并不需要考慮過多的復(fù)雜結(jié)構(gòu)宫患。
實(shí)現(xiàn)代碼
<ul class="disc">
<li>JavaScript
<ol>
<li>第一章
<ul class="square">
<li>const</li>
<li>let</li>
</ul>
</li>
<li>第二章
<ul class="square">
<li>function</li>
<li>object</li>
</ul>
</li>
</ol>
</li>
<li>Java
<ol>
<li>第一章
<ul class="square">
<li>class</li>
<li>package</li>
</ul>
</li>
<li>第二章
<ul class="square">
<li>private</li>
<li>public</li>
</ul>
</li>
</ol>
</li>
</ul>
效果圖
