CSS 列表
CSS列表屬性作用如下:
設定不同的清單項目標記為有序列表
設定不同的清單項目標記為無序列表
設定清單項目標記為映像
列表
在HTML中,有兩種類型的列表:
無序列表 - 清單項目標記用特殊圖形(如小黑點、小方框等)
有序列表 - 清單項目的標記有數字或字母
使用CSS,可以列出進一步的樣式,並可用映像作清單項目標記。
不同的清單項目標記
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;}
一些值是無序列表,以及有些是有序列表。
作為清單項目標記的映像
要指定清單項目標記的映像,使用列表樣式映像屬性:
執行個體
ul{list-style-image: url('sqpurple.gif');}
上面的例子在所有瀏覽器中顯示並不相同,IE和Opera顯示映像標記比Firefox,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
如果上述值丟失一個,其餘仍在指定的順序,就沒關係。
【相關推薦】
1. 精選:“php程式員工具箱”V0.1版本下載
2. 免費css線上視頻教程
3. php.cn獨孤九賤(2)-css視頻教程