CSS列表

列表

放置,改变列表标志,或者将图像作为列表项标志.

适用于类型为列表的元素, ul, ol

list-style-type例子

.css

 ul li{
 list-style-type: circle
 }

.htmlc

 
 
 
 
 
 
 
 
 
 
 

 
hello world
 
hello world
 
hello world
 
hello world
 
hello world
 
 
 

image

可以看到最前面列表项标志变成了空心圆

list-style-image 例子

.css

 ul li{
 /* list-style-type: circle */
 list-style-image: url("....");
 margin-left: 200px;
 ​
 }

.html

 
 
 
 
 
 
 
 
 
 
 

 
hello world
 
hello world
 
hello world
 
hello world
 
hello world
 
 
 

image

list-style-position 例子

.css

 ul li{
 /* list-style-type: circle /
 ​
 / list-style-image: url("...."); */
 margin-left: 200px;
 width: 200px;
 list-style-position: inside;
 }

.html

 
 
 
 
 
 
 
 
 
 
 

 
hello world hello world hello world hello world
 
hello world hello world hello world hello world
 
hello world hello world hello world hello world
 
hello world hello world hello world hello world
 
hello world hello world hello world hello world
 
 
 

image

可以看到列表项标志在文字中间 inside

列表属性

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。
marker-offset

list-style-type 属性值

只有当list-style-image属性为none或制定图像不可用时,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, 等。（日文片假名）