- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控
更新时间：2019-03-25 11:00:11
CSS 列表样式(ul)
CSS列表属性作用如下：
设置不同列表项标记的有序列表
设置不同列表项标记的无序列表
设置列表项标记为图像
列表类型
在HTML中，有两种类型的列表：
无序列表：列表项标记用特殊图形（如小黑点、小方框等）来表示
有序列表 ：列表项的标记有数字或字母
使用CSS，可以列出进一步的样式，并可用图像作列表项标记
不同的列表项标记
list-style-type属性用于指定列表项标记的类型
：circle：
：square
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
<li>HTML中文网</li>
</ul>
<ul class="b">
<li>HTML中文网</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>HTML中文网</li>
</ol>
<ol class="d">
<li>HTML中文网</li>
</ol>点击 "运行实例" 按钮查看在线实例
效果图：
作为列表项标记的图像
list-style-image属性用于指定列表项标记的图像，使用列表样式图像属性
<style>
li{
list-style-image:url("images/xing.jpg");
}
</style>
</head>
<body>
<ul>
<li>HTML中文网</li>
<li>HTML中文网</li>
<li>HTML中文网</li>
</ul>点击 "运行实例" 按钮查看在线实例
效果图：
简写列表样式
为简单起见，可以将 3 个列表样式属性合并为一个方便的属性：list-style
效果图：
list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。
所有的CSS属性
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
推荐手册