CSS（7）列表

　　CSS列表属性主要包括列表类型（list-style-type）、列表图像（list-style-image）和列表位置（list-style-position）。

一、list-style-type

　　list-style-type属性用于设置列表类型（标志类型）。例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点（disc）；在有序列表中，标志可能是字母（a/A/...）、数字（1/i/I...）或另外某种计数体系中的一个符号。例如，下面的声明把无序列表中的列表项标志设置为方块。

 /*将无序列表中的列表项标志设置为方块*/
  ul {list-style-type : square} 

二、list-style-image

　　list-style-image属性用于设置列表的类型为一幅图片，也就是使用图像来替换列表项的标记。这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。list-style-image属性的语法为：ul li {list-style-image : url(xxx.gif)},只需要简单地使用一个 url() 值，就可以使用图像作为标志。 例如，下面的声明把图像设置为列表中的项目标记：

/*把图像设置为列表中的项目标记*/
ul
  {
  list-style-image:url("/i/arrow.gif");
  list-style-type:square;
  }

说明：上面的例子将ul中li的项目标记用list-style-image属性设置为"/i/arrow.gif"这幅图片，并且使用一个list-style-type属性设置来防止图像标记不可用。

三、list-style-position

　　list-style-position 属性用于设置列表项标记的位置，就是指定在何处放置列表项标记。该属性用于声明列表标志相对于列表项内容的位置，取值包括：外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义；内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。例如，下面的例子规定列表中列表项目标记的位置：

/*列表项标记在列表内容的内部*/
ul.inside 
{
list-style-position: inside
}

/*列表项标记在列表内容的外部*/
ul.outside 
{
list-style-position: outside
}

四、list-style
　　list-style是各种列表属性的一个组合，是一种简写属性，它在一个声明中设置所有的列表属性。该声明涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

/*CSS列表的简写*/
li {list-style : url(example.gif) square inside}

参考：http://www.w3school.com.cn/css/css_list.asp

 

转载于:https://www.cnblogs.com/sunyunh/archive/2012/08/30/2664635.html