CSS设置列表的符号
通常的列表采用<ul>或者<ol>标记,然后,结合<li>标记罗列各个项目。
项目表单实例,代码如下:
<span style="font-size:24px;"><html>
<head>
<title>
项目列表
</title>
<style>
<!--
body{
background-color:#c1daff;
}
ul{
font-size:0.9em;
color:#00458c;
}
-->
</style>
</head>
<body>
<p>水上运动</p>
<ul>
<li>freestyle自由泳</li>
<li>backstroke仰泳</li>
<li>breaststroke蛙泳</li>
<li>butterfly蝶泳</li>
<li>individualmedley 个人混合泳</li>
<li>freestylerelay 自由泳接力</li>
</ul>
</body>
</html></span>
CSS通过list-style-type属性设置列表的编号,无论是<ul>标记,还是<ol>标记都可以使用相同的属性值,二者的效果完全相同。
<span style="font-size:24px;">ul{
font-size:0.9em;
color:#00458c;
list-style-type:decimal;
}</span>
Decimal属性值,项目列表的编号安装十进制编号显示。
当给<ul>或者<ol>标记设置list-style-type属性时,中间所有的<li>标记都会采用该设置。
如果,对某一个<li>标记单独设置list-style-type属性,则仅仅作用于该条项目上。
<span style="font-size:24px;"><html>
<head>
<title>
项目列表
</title>
<style>
<!--
body{
background-color:#c1daff;
}
ul{
font-size:0.9em;
color:#00458c;
list-style-type:decimal;
}
li.special{
list-style-type:circle;
}
-->
</style>
</head>
<body>
<p>水上运动</p>
<ul>
<li>freestyle自由泳</li>
<li>backstroke仰泳</li>
<liclass="special">breaststroke 蛙泳</li>
<li>butterfly蝶泳</li>
<li>individualmedley 个人混合泳</li>
<li>freestylerelay 自由泳接力</li>
</ul>
</body>
</html></span>
可以看到蛙泳变成了空心圆显示,其他的还是编号。
此外,该属性的属性值还有很多,如下: