如何玩轉CSS列表樣式？速看！

CSS 列表

CSS列表屬性做用以下：

• 設置不一樣的列表項標記爲有序列表
• 設置不一樣的列表項標記爲無序列表
• 設置列表項標記爲圖像

---

 

列表

在HTML中，有兩種類型的列表：

• 無序列表 - 列表項標記用特殊圖形（如小黑點、小方框等）
• 有序列表 - 列表項的標記有數字或字母

使用CSS，能夠列出進一步的樣式，並可用圖像做列表項標記。

1.不一樣的列表項標記

list-style-type屬性指定列表項標記的類型是：

    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;}

2.做爲列表項標記的圖像

要指定列表項標記的圖像，使用列表樣式圖像屬性：

    ul {
        list-style-image: url('sqpurple.gif');
    }

上面的例子在全部瀏覽器中顯示並不相同，IE和Opera顯示圖像標記比火狐，Chrome和Safari更高一點點。

若是你想在全部的瀏覽器放置一樣的形象標誌，就應使用瀏覽器兼容性解決方案，過程以下

3.瀏覽器兼容性解決方案

一樣在全部的瀏覽器，下面的例子會顯示的圖像標記：

    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屬性把文本置於列表中

4.列表-簡寫屬性

在單個屬性中能夠指定全部的列表屬性。這就是所謂的簡寫屬性。

爲列表使用簡寫屬性，列表樣式屬性設置以下：

     ul {
        list-style: square url("sqpurple.gif");
    }

能夠按順序設置以下屬性：

• list-style-type
• list-style-position (有關說明，請參見下面的CSS屬性表)
• list-style-image

若是上述值丟失一個，其他仍在指定的順序，就不要緊。

---

 

全部的CSS列表屬性

屬性	描述
list-style	簡寫屬性，用於把全部列表的屬性設置於一個聲明中
list-style-image	將圖像設置爲列表項標誌
list-style-position	設置列表中列表項標誌的位置
list-style-type	設置列表項標誌的類型