CSS中列表項list樣式

CSS列表屬性

屬性	描述
list-style-屬性	用於把所有用於列表的屬性設置於一個聲明中。
list-style-image	將圖象設置為列表項標志。
list-style-position	設置列表中列表項標志的位置。
list-style-type	設置列表項標志的類型
list-style:type image position;	列表項的簡寫方式

1.list-style-屬性

可以按順序設置如下屬性：

• list-style-type
• list-style-image
• list-style-position

  ul{
      list-style-type:none;
      list-style-image:url("圖片路徑");
      list-style-position:inside;
  }

2.list-style-type：設置列表項標志的類型（默認標記是實心圓）

這里的標志類型比較多，我只將常用的通過列表展示出來，none使用最多。如需更多了解：

http://www.w3school.com.cn/cssref/pr_list-style-type.asp

CSS列表項標志

none	無標記
disc	默認，標記是實心圓
circle	標記是空心圓
square	標記是實心方塊
decimal	標記是數字

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

demo如下：

3.list-style-image：將圖像設置為列表項標志

一般取得圖片大小在20*20px以內

ul{
    list-style-image:url("wechat.png");
    list-style-image:none;/*無圖像被顯示*/
}

demo如下：

            

4.list-style-position：設置列表項標志的類型(默認內部標志處理方式)

    取值：inside 設置列表項在li的內部

               outside 設置列表項在li的外部(默認值)

CSS代碼：

ul.list1{
    list-style-position:inside;
}
ul.list2{
    list-style-position:outside;
}

<p>這是內部標志處理</p>
<ul class="list1">
    <li>內容1</li>
    <li>內容2</li>
    <li>內容3</li>
</ul>
<p>這是外部標志處理</p>
<ul class="list2">
    <li>內容1</li>
    <li>內容2</li>
    <li>內容3</li>
</ul>

 demo如下:

                 

5.列表的簡寫方式

list-style:type image position;簡寫方式中最少要留有一項屬性聲明。寫項目中最常用的寫法：list-style:none;

/*CSS代碼*/
ul>.li1{
    list-style:desc outside;
}
ul>.li2{
    list-style:none url(image/wechat.png) outside;
}
ul>.li3{
    list-style:none url(image/sinablog.png) inside;
}

<!--HTML代碼-->
<ul class="list">
    <li class="li1">內容1</li>
    <li class="li2">內容2</li>
    <li class="li3">內容3</li>
</ul>

demo如下：