HTML 列表实现
2016-11-22 本文已影响29人
ittianbao
今天来讲一讲怎样用 HTML 来实现下面的列表。
实现的列表
第一步
可以看到第一层 JavaScript 和 Java 两个是无序列表，无序列表使用 <ul>标签，所以可以先实现这两个：
代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>列表实现</title>
</head>
<body>
<ul>
<li>
JavaScript
</li>
<li>
Java
</li>
</ul>
</body>
</html>
运行结果：
<ul><li>JavaScript</li><li>Java</li></ul>
第二步
下来可以看到第二层是包含在 <li> 标签里面的并且是有序列表，有序列表使用<ol>标签：
代码：
<ul>
<li>JavaScript
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
</li>
<li>Java
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
</li>
</ul>
运行结果：
<ul><li>JavaScript<ol><li>第一章</li><li>第二章</li></ol></li><li>Java<ol><li>第一章</li><li>第二章</li></ol></li></ul>
第三步
可以看到第三层是包在第二层的 <li> 标签里且它是无序的，使用 <ul> 标签：
代码：
<ul>
<li>JavaScript
<ol>
<li>第一章
<ul>
<li>const</li>
<li>let</li>
</ul>
</li>
<li>第二章
<ul>
<li>function</li>
<li>object</li>
</ul>
</li>
</ol>
</li>
<li>Java
<ol>
<li>第一章
<ul>
<li>class</li>
<li>package</li>
</ul>
</li>
<li>第二章
<ul>
<li>private</li>
<li>public</li>
</ul>
</li>
</ol>
</li>
</ul>
运行结果：
<ul><li>JavaScript<ol><li>第一章<ul><li>const</li><li>let</li></ul></li><li>第二章<ul><li>function</li><li>object</li></ul></li></ol></li><li>Java<ol><li>第一章<ul><li>class</li><li>package</li></ul></li><li>第二章 <ul><li>private</li><li>public</li></ul></li></ol></li></ul>
这样就成功的实现了这样的列表。
