列表符号
在浏览网页时，使用列表组织网页内容是无处不在的。例如，横向导航菜单、竖向菜单、新闻列表、商品分类列表等，基本都是使用ul-li 结构列表实现的。样式方面比较单一！
这就用到CSS列表属性。CSS列表有4个属性来设置列表样式，分别是list-style-type、liststyleimage、list-style-position和 list-style。
list-style-type属性设置列表向标记符号的类型，基本语法格式如下:
list-style-type: disc | none | circle | square | decimal |…
常用的属性值含义如下所示:
- none:无标记符号。
- disc:实心圆，默认类型。
- cricle :空心圆。
- square: 实心正方形。
- decimal ：数字 。
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.disc {
list-style-type: disc;
}
.none {
list-style-type: none;
}
.cricle {
list-style-type: circle;
}
.square {
list-style-type: square;
}
.decimal {
list-style-type: decimal;
}
</style>
</head>
<body>
<h2>disc:</h2>
<ul class="disc">
<li>项目符号为实心圆</li>
<li>无序列表默认样式</li>
</ul>
<h2>none :</h2>
<ul class="none">
<li>不使用项目符号</li>
<li>常作菜单列表时使用</li>
</ul>
<h2>cricle:</h2>
<ul class="cricle">
<li>项目符号为空心圆</li>
<li>不常使用</li>
</ul>
<h2>square:</h2>
<ul class="square">
<li>项目符号为实心正方形</li>
<li>不常使用</li>
</ul>
<h2>decimal: </h2>
<ul class="decimal">
<li>项目符号为数字</li>
<li>有序列表默认值</li>
</ul>
</body>
</html>
结果
2346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
