列表符号
在浏览网页时,使用列表组织网页内容是无处不在的。例如,横向导航菜单、竖向菜单、新闻列表、商品分类列表等,基本都是使用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>
结果