本節(jié)將為大家講解 HTML 如何實(shí)現(xiàn)下圖所示列表效果，先來(lái)看看最終實(shí)現(xiàn)效果吧！
list.png
- 新建 list.html 文件，并輸入以下框架代碼（本文編輯器采用Notepad++）拼苍；
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
</body>
</html>
- 對(duì)題目要求列表進(jìn)行分析，可以發(fā)現(xiàn)該列表最外層是一個(gè)無(wú)序列表调缨，且該無(wú)序列表包含兩大部分：JavaScript_list 和 Java_list疮鲫。
JavaScript_list.png
Java_list.png
因此我們?cè)谠写a基礎(chǔ)上加入無(wú)序列表：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<ul>
<li>JavaScript</li>
<li>Java</li>
</ul>
</body>
</html>
- 經(jīng)過(guò)分析發(fā)現(xiàn) JavaScript_list 和 Java_list 這兩部分除了內(nèi)容以外其它顯示效果皆類似吆你，因此我們僅對(duì)于一部分進(jìn)行分析實(shí)現(xiàn)，另一部分參考實(shí)現(xiàn)即可俊犯。
- 以 JavaScript_list 為例進(jìn)一步分析妇多，可以發(fā)現(xiàn)其內(nèi)部最外層為一個(gè)有序列表，且該有序列表包含兩部分：JavaScript_chapter1_list 和 JavaScript_chapter2_list燕侠。
JavaScript_chapter1_list.png
JavaScript_chapter2_list.png
因此我們?cè)谠写a基礎(chǔ)上再加入有序列表：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<ul>
<li>JavaScript</li>
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
<li>Java</li>
</ul>
</body>
</html>
- 經(jīng)過(guò)分析發(fā)現(xiàn) JavaScript_chapter1_list 和 JavaScript_chapter2_list 這兩部分除了內(nèi)容以外其它顯示效果皆類似者祖，因此我們僅對(duì)于一部分進(jìn)行分析實(shí)現(xiàn)，另一部分參考實(shí)現(xiàn)即可绢彤。
- 以 JavaScript_chapter1_list 為例進(jìn)一步分析咸包，可以發(fā)現(xiàn)其內(nèi)部為一個(gè)無(wú)序列表，因此我們?cè)谠写a基礎(chǔ)上再加入無(wú)序列表：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<ul>
<li>JavaScript</li>
<ol>
<li>第一章</li>
<ul>
<li>const</li>
<li>let</li>
</ul>
<li>第二章</li>
</ol>
<li>Java</li>
</ul>
</body>
</html>
- 此時(shí)杖虾，JavaScript_chapter1_list 效果已實(shí)現(xiàn)，我們參考 JavaScript_chapter1_list 實(shí)現(xiàn) JavaScript_chapter2_list媒熊，代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<ul>
<li>JavaScript</li>
<ol>
<li>第一章</li>
<ul>
<li>const</li>
<li>let</li>
</ul>
<li>第二章</li>
<ul>
<li>function</li>
<li>object</li>
</ul>
</ol>
<li>Java</li>
</ul>
</body>
</html>
- 此時(shí)奇适，JavaScript_list 效果已實(shí)現(xiàn)，我們參考 JavaScript_list 實(shí)現(xiàn) Java_list芦鳍，最終代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<ul>
<li>JavaScript</li>
<ol>
<li>第一章</li>
<ul>
<li>const</li>
<li>let</li>
</ul>
<li>第二章</li>
<ul>
<li>function</li>
<li>object</li>
</ul>
</ol>
<li>Java</li>
<ol>
<li>第一章</li>
<ul>
<li>class</li>
<li>package</li>
</ul>
<li>第二章</li>
<ul>
<li>private</li>
<li>public</li>
</ul>
</ol>
</ul>
</body>
</html>
總結(jié)
通過(guò)對(duì)大型任務(wù)的分解嚷往，將其分解為一個(gè)個(gè)的小任務(wù)，可以有效地減小實(shí)現(xiàn)復(fù)雜度柠衅，且各部分代碼之間的邏輯關(guān)系也會(huì)變得清晰皮仁。
源碼 Github 鏈接：https://github.com/anyangxaut/HTML-Learning-Demo
