一、概念

CSS列表屬性作用如下：設(shè)置不同的列表項標(biāo)記為有序列表。設(shè)置不同的列表項標(biāo)記為無序列表。設(shè)置列表項標(biāo)記為圖像。

二、什么是種類型的列表？

種類型的列表：

ul無序列表 － 列表項標(biāo)記用特殊圖形（如小黑點、小方框等）

ol有序列表 － 列表項的標(biāo)記有數(shù)字或字母。

使用CSS，可以列出進一步的樣式，并可用圖像作列表項標(biāo)記。

三、常見的ul ol列表項標(biāo)記

list－style－type屬性指定列表項標(biāo)記的類型是：

＜！doctype html＞＜html lang＝＂en＂＞＜head＞    ＜meta charset＝＂UTF－8＂＞    ＜title＞Document＜／title＞        ＜style＞            ul．a(chǎn) ｛                list－style－type： circle；            ｝
           ul．b ｛                list－style－type： square；            ｝
           ol．c ｛                list－style－type： upper－roman；            ｝
           ol．d ｛                list－style－type： lower－alpha；            ｝＜／style＞    ＜／head＞
   ＜body＞        ＜p＞Example of unordered lists：＜／p＞
       ＜ul class＝＂a＂＞            ＜li＞語文＜／li＞            ＜li＞數(shù)學(xué)＜／li＞            ＜li＞英語＜／li＞        ＜／ul＞
       ＜ul class＝＂b＂＞            ＜li＞語文＜／li＞            ＜li＞數(shù)學(xué)＜／li＞            ＜li＞英語＜／li＞        ＜／ul＞
       ＜p＞Example of ordered lists：＜／p＞
       ＜o(jì)l class＝＂c＂＞            ＜li＞語文＜／li＞            ＜li＞數(shù)學(xué)＜／li＞            ＜li＞英語＜／li＞        ＜／ol＞
       ＜o(jì)l class＝＂d＂＞            ＜li＞語文＜／li＞            ＜li＞數(shù)學(xué)＜／li＞            ＜li＞英語＜／li＞        ＜／ol＞
   ＜／body＞
＜／html＞

四、ul ol列表項標(biāo)記的圖像瀏覽器兼容性解決方案

要指定列表項標(biāo)記的圖像，使用列表樣式圖像屬性list－style－image。

在所有的瀏覽器，下面的例子會顯示圖像標(biāo)記：

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：

設(shè)置列表樣式類型為沒有刪除列表項標(biāo)記

設(shè)置填充和邊距0px（瀏覽器兼容性）

ul中所有l(wèi)i：

設(shè)置圖像的URL，并設(shè)置它只顯示一次（無重復(fù)）

您需要的定位圖像位置（左0px和上下5px）

用padding－left屬性吧文本置于列表中

五、拓展ul ol列表縮寫屬性

在單個屬性中可以指定所有的列表屬性。這就是所謂的縮寫屬性。

為列表使用縮寫屬性，列表樣式屬性設(shè)置如下：

ul｛list－style： square url（＂sqpurple．gif＂）；｝

如果使用縮寫屬性值的順序是：

①list－style－type 。②list－style－position。 ③list－style－image。

如果上述值丟失一個，其余仍在指定的順序，就沒關(guān)系。

六、總結(jié)

本文基于HTML基礎(chǔ)，本文主要介紹了HTML常見的ul ol 列表、常見的列表標(biāo)記圖標(biāo)。對于瀏覽器兼容列表圖像的問題，提供了一系列的解決方案，最后擴展相關(guān)知識，優(yōu)化代碼，希望能夠幫助你學(xué)習(xí)。