CSS ul（列表樣式）
阿新 • • 發佈：2018-07-21
編號 代碼 羅馬數字 tex chrom bsp mar 瀏覽器兼容性 int
CSS Ul（列表樣式）
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;} /*有序，小寫字母排序*/
list-style-type屬性值：
| 值 | 描述 |
| none | 無標記 |
| disc | 默認。標記是實心圓 |
| circle | 標記是空心圓 |
| square | 標記是實心方塊 |
| decimal | 標記是數字 |
| decimal-leading-zero | 0開頭的數字標記。(01, 02, 03, 等) |
| lower-roman | 小寫羅馬數字(i, ii, iii, iv, v, 等） |
| upper-roman | 大寫羅馬數字(I, II, III, IV, V, 等) |
| lower-alpha | 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等) |
| upper-alpha | 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等) |
| lower-greek | 小寫希臘字母(alpha, beta, gamma, 等) |
| lower-latin | 小寫拉丁字母(a, b, c, d, e, 等) |
| upper-latin | 大寫拉丁字母(A, B, C, D, E, 等) |
| hebrew | 傳統的希伯來編號方式 |
| armenian | 傳統的亞美尼亞編號方式 |
| georgian | 傳統的喬治亞編號方式(an, ban, gan, 等) |
| cjk-ideographic | 簡單的表意數字 |
| hiragana | 標記是：a, i, u, e, o, ka, ki, 等。（日文片假名） |
| katakana | 標記是：A, I, U, E, O, KA, KI, 等。（日文片假名） |
| hiragana-iroha | 標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） |
| katakana-iroha | 標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） |
三、作為列表項標記的圖像
list-style-image 要指定列表項標記的圖像，使用列表樣式圖像屬性：
ul { list-style-image: url(‘sqpurple.gif‘); }
上面的例子在所有瀏覽器中顯示並不相同，IE和Opera顯示圖像標記比火狐，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屬性把文本置於列表中
四、相對內容繪制列表標記
list-style-position屬性指示如何相對於對象的內容繪制列表項標記，屬性值：
效果：
五、列表 -簡寫屬性
在單個屬性中可以指定所有的列表屬性。這就是所謂的簡寫屬性。
為列表使用簡寫屬性，列表樣式屬性設置如下：
ul { list-style: square url("sqpurple.gif"); }
可以按順序設置如下屬性：
- list-style-type
- list-style-position
- list-style-image
如果上述值丟失一個，其余仍在指定的順序，就沒關系。
六、所有的CSS列表屬性
七、示例代碼
/*無序列表*/ ul.a {list-style-type:circle;} /*無序，空心圓“○”*/ ul.b {list-style-type:disc;} /*無序，實心圓“●”*/ ul.c {list-style-type:square;}/*無序，實心正方形“■”*/ /*有序列表*/ ol.d {list-style-type:armenian;} /*有序，傳統的亞美尼亞數字*/ ol.e {list-style-type:cjk-ideographic;} /*有序，淺白的表意數字*/ ol.f {list-style-type:decimal;} /*有序，數字1、2、3*/ ol.g {list-style-type:decimal-leading-zero;} /*有序，數字01、02、03*/ ol.h {list-style-type:georgian;} /*有序，傳統的喬治數字*/ ol.i {list-style-type:hebrew;} /*有序，傳統的希伯萊數字*/ ol.j {list-style-type:hiragana;} /*有序，日文平假名字符*/ ol.k {list-style-type:hiragana-iroha;} /*有序，日文平假名序號*/ ol.l {list-style-type:katakana;} /*有序，日文片假名字符*/ ol.m {list-style-type:katakana-iroha;} /*有序，日文片假名序號*/ ol.n {list-style-type:lower-alpha;} /*有序，小寫英文字母a、b、c……*/ ol.o {list-style-type:lower-greek;} /*有序，基本的希臘小寫字母*/ ol.p {list-style-type:lower-latin;} /*有序，小寫拉丁字母*/ ol.q {list-style-type:lower-roman;} /*有序，小寫羅馬數字i、ii、iii……*/ ol.r {list-style-type:upper-alpha;} /*有序，大寫英文字母A、B、C…… */ ol.s {list-style-type:upper-latin;} /*有序，大寫拉丁字母*/ ol.t {list-style-type:upper-roman;} /*有序，大寫羅馬數字I、II、III……*/ ol.u {list-style-type:none;}/*不使用項目符號*/ ol.v {list-style-type:inherit;} /*繼承*/
CSS ul（列表樣式）