CSS--列表

描述:

允许放置、更改列表标记，或者将图像作为列表标记.

应用在UL,OL,LI

 

list-style:

描述:用于将所有用于列表的属性设置于一个声明之中.

语法:list-style:  list-style-image || list-style-position || list-style-type

设置样式后,list-style-image和list-style-type被指定后,list-style-image将获得优先权,除非list-style-image设置为none或者指定的url不能被显示.

 

list-style-image:

描述:将图象设置为列表项标记

默认:none

取值	描述
none	无图形被显示
url	图像的路径.

例子:

例子	效果
<ul style="list-style-image:url('list_style_image.gif')"> <li>张三</li><li>李四</li> <li>王五</li><li>赵六</li> </ul>

 

list-style-position:

描述:设置或检索作为对象的列表项标记如何根据文本排列

默认:outside

取值	描述
outside	列表项目标记放置在文本之外,且环绕文本不根据标记对齐
inside	列表项目标记放置在文本之内,且环绕文本根据标记对齐

例子:

例子	效果
<ul style="list-style-position:inside"> <li>张三</li><li>李四</li> <li>王五</li><li>赵六</li> </ul> <ul style="list-style-position:outside"> <li>张三</li><li>李四</li> <li>王五</li><li>赵六</li> </ul>

 

list-style-type:

描述:设置或检索对象的列表项所使用的预设标记

默认:disc

取值	描述
disc	实心圆
circle	空心圆
square	实心方块
decimal	阿拉伯数字
lower-roman	小写阿拉伯数字
upper-roman	大写阿拉伯数字
lower-alpha	小写英文字母
upper-alpha	大写英文字母
none	无标记

例子:

例子	效果	效果
<ul style="list-style-type:disc"> <li>张三</li><li>李四</li> <li>王五</li><li>赵六</li> </ul> <ul style="list-style-type:circle"> <li>张三</li><li>李四</li> <li>王五</li><li>赵六</li> </ul> <ul style="list-style-type:square"> <li>张三</li><li>李四</li> <li>王五</li><li>赵六</li> </ul> <ul style="list-style-type:decimal"> <li>张三</li><li>李四</li> <li>王五</li><li>赵六</li> </ul>
<ul style="list-style-type:lower-roman"> <li>张三</li><li>李四</li> <li>王五</li><li>赵六</li> </ul> <ul style="list-style-type:upper-roman"> <li>张三</li><li>李四</li> <li>王五</li><li>赵六</li> </ul> <ul style="list-style-type:lower-alpha"> <li>张三</li><li>李四</li> <li>王五</li><li>赵六</li> </ul> <ul style="list-style-type:upper-alpha"> <li>张三</li><li>李四</li> <li>王五</li><li>赵六</li> </ul>

 

maker-offset:

描述:设置或检索标记容器和主容器之间水平补白。即两个容器靠近的一边的间距.

默认:auto

取值	描述
auto	浏览器自动设置间距
length	由浮点数字和单位标识符组成的长度值。可为负值