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

最新推荐文章于 2024-03-26 00:13:40 发布

LongRui888

最新推荐文章于 2024-03-26 00:13:40 发布

阅读量433

点赞数

分类专栏：【HTML与CSS】文章标签： html css 无序列表有序列表

本文链接：https://blog.csdn.net/sqlserverdiscovery/article/details/54313805

版权

【HTML与CSS】专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

首先是一个书名。

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