【CSS】列表

CSS列表属性作用如下：

设置不同的列表项标记为有序列表

设置不同的列表项标记为无序列表

设置列表项标记为图像

所有的CSS列表属性

list-style	         简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	 将图象设置为列表项标志。
list-style-position	 设置列表中列表项标志的位置。
list-style-type	         设置列表项标志的类型。

不同的列表项标记

list-style-type属性指定列表项标记的类型是：
    ul{ list-style-type:circle ;}// 列表开头是空心圆点
    ul{ list-style-type:square ;}//列表开头是黑色实心方形
    ol{ list-style-type:upper-roman ;}//列表开头是大写罗马数字
    ol{ list-style-type:lower-alpha ;}//列表开头是小写字母排序

 作为列表项标记的图像
 要指定列表项标记的图像，使用列表样式图像属性：
 ul{
   list-style-image: url('sqpurple.gif');// 列表开头是图片
   }
   上面的例子在所有浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。
   如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下

    ul
    {
      list-style-type:none;
      padding : 0px;
      margin : 0px;
    }
    ul li
    {
      background-image : url(sqpurple.gif);
      background-repeat : no-repeat;
      background-position : 0px 5px;
      padding-left : 14px;
    }
    例子解释：
    ul:
        设置列表样式类型为没有删除列表项标记
        设置填充和边距0px（浏览器兼容性）
    ul中所有li:
        设置图像的URL，并设置它只显示一次（无重复）
        您需要的定位图像位置（左0px和上下5px）
        用padding-left属性把文本置于列表中

列表 -简写属性

   在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
   为列表使用简写属性，列表样式属性设置如下：
    ul{
    	list-style: square url("sqpurple.gif");
    }


    可以按顺序设置如下属性：
    list-style-type
    list-style-position (有关说明，请参见下面的CSS属性表)
    list-style-image
    如果上述值丢失一个，其余仍在指定的顺序，就没关系。



    ul{
       list-style-type:circle;
       list-style-type:disc;
       list-style-type:square;
       }

    ol.d {
	        list-style-type:armenian;
	        list-style-type:cjk-ideographic;
	        list-style-type:decimal;
	        list-style-type:decimal-leading-zero;
	        list-style-type:georgian;
	        list-style-type:hebrew;
	        list-style-type:hiragana;
	        list-style-type:hiragana-iroha;
	        list-style-type:katakana;
	        list-style-type:katakana-iroha;
	        list-style-type:lower-alpha;
	        list-style-type:lower-greek;
	        list-style-type:lower-latin;
	        list-style-type:lower-roman;
	        list-style-type:upper-alpha;
	        list-style-type:upper-latin;
	        list-style-type:upper-roman;
	        list-style-type:none;
	        list-style-type:inherit;
	        }

    具体效果看http://www.runoob.com/try/try.php?filename=trycss_list-style-type_all