HTML 列表练习题
2016-12-11 本文已影响141人
TW安洋
本节将为大家讲解 HTML 如何实现下图所示列表效果，先来看看最终实现效果吧！
list.png
- 新建 list.html 文件，并输入以下框架代码（本文编辑器采用Notepad++）；
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
</body>
</html>
- 对题目要求列表进行分析，可以发现该列表最外层是一个无序列表，且该无序列表包含两大部分：JavaScript_list 和 Java_list。
JavaScript_list.png
Java_list.png
因此我们在原有代码基础上加入无序列表：
<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>
- 经过分析发现 JavaScript_list 和 Java_list 这两部分除了内容以外其它显示效果皆类似，因此我们仅对于一部分进行分析实现，另一部分参考实现即可。
- 以 JavaScript_list 为例进一步分析，可以发现其内部最外层为一个有序列表，且该有序列表包含两部分：JavaScript_chapter1_list 和 JavaScript_chapter2_list。
JavaScript_chapter1_list.png
JavaScript_chapter2_list.png
因此我们在原有代码基础上再加入有序列表：
<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>
- 经过分析发现 JavaScript_chapter1_list 和 JavaScript_chapter2_list 这两部分除了内容以外其它显示效果皆类似，因此我们仅对于一部分进行分析实现，另一部分参考实现即可。
- 以 JavaScript_chapter1_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>
</ol>
<li>Java</li>
</ul>
</body>
</html>
- 此时，JavaScript_chapter1_list 效果已实现，我们参考 JavaScript_chapter1_list 实现 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>
- 此时，JavaScript_list 效果已实现，我们参考 JavaScript_list 实现 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>
总结
通过对大型任务的分解，将其分解为一个个的小任务，可以有效地减小实现复杂度，且各部分代码之间的逻辑关系也会变得清晰。
源码 Github 链接：https://github.com/anyangxaut/HTML-Learning-Demo
