您的位置：首页 > Web前端 > HTML

HTML基础：文本列表实例1（8）

2017-01-10 15:04 197 查看

下面的例子实现了类似图中书的目录：

首先是一个书名。

然后整本书分成了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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航