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 | 設定串列項標志的型別 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/260908.html
標籤：Html/Css
下一篇：教你玩轉CSS表格（table）