下面的例子实现了类似图中书的目录：
首先是一个书名。
然后整本书分成了2部分，这是一个ul 无序列表。
每一部分分别包含了2章，第1部分是一个ul 无序列表，第2部分是一个ol 有序列表。
每一章分别包含了3节，第1章是ul无序列表，第2章是ol有序列表，第7章是ul无序列表，第8章是ol有序列表。
另外，代码中涉及到了列表的style，有多种，比如：list-style-type:circle，就是列表样式类型：圆圈，还有disc就是圆盘，其实就是实心的圆点，还有square就是方块。
代码如下：
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="utf8">
<title>Document</title>
</head>
<body>
<h1>数据库优化你也行</h1>
<ul style="list-style-type:circle">
<li>第1部分：优化基础
<ul style="list-style-type:square">
<li>第1章：什么是数据库，为什么要优化
<ul style="list-style-type:disc">
<li>第1节：什么是数据库？</li>
<li>第2节：为什么要优化？</li>
<li>第3节：从哪些方面进行优化？</li>
</ul>
</li>
<br>
<li>第2章：从数据库索引方面进行优化
<ol>
<li>第1节：数据库索引是什么东东？</li>
<li>第2节：如何使用索引来提高性能？</li>
<li>第3节：数据库索引优化适用的场景有哪些？</li>
</ol>
</li>
</ul>
</li>
<br>
<li>第2部分：优化实战
<ol style="list-style-type:lower-roman">
<li>第7章：简化sql提高性能
<ul>
<li>第1节：不需要的表不关联</li>
<li>第2节：子查询转化为join</li>
<li>第3节：拆分复杂sql</li>
</ul>
</li>
<br>
<li>第8章：通过查询提示优化执行计划
<ol style="list-style-type:lower-alpha">
<li>第1节：join提示</li>
<li>第2节：group提示</li>
<li>第3节：lock提示</li>
</ol>
</li>
</ol>
</li>
</ul>
</body>
</html>
