html中共有3种列表：无序列表ul、有序列表ol、定义列表dl。
1、无序列表：
<ul>
<li>……</li>
<li>……</li>
</ul>
ul是最常用到的列表，一般的新闻列表都是通过ul实现的。其中li是没有顺序性的，就是并列关系。通过设置list-style样式可以控制li前边显示点或圈等（具体查看在线手册）。在具体 *** 作中，列表前边的小图标都是通过背景图来实现的。
2、有序列表：
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
有序列表在实际中用到的比较少，顾名思义，里边的li是有顺序的。可以通过设置来实现li前边显示“1，2，3”或其他顺序（具体查看在线手册）。
1、定义列表：
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
定义列表的本意是下定义用的，就是一个标题，然后下边是分条内容。但在实际中，由于定于列表本身就3个标签dl、dt、dd，并且为块元素，所以定义列表经常用来布局。
效果
代码
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
ol{
counter-reset: li
list-style: none
}
ol li{
margin-top:5px
}
ol a{
font-family:微软雅黑
font-size:14px
text-decoration:none
color:#000000
}
ol a:before{
content:counter(li)
counter-increment: li
position:absolute
left:20px
width:15px
height:15px
line-height:15px
text-align:center
border:1px solid
}
ol a:hover{
color:red
}
</style>
</head>
<body>
<ol>
<li><a href="#">工具类书籍</a></li>
<li><a href="#">建筑类书籍</a></li>
<li><a href="#">计算机书籍</a></li>
<li><a href="#">少儿类书籍</a></li>
</ol>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）