列表属性:
标记的类型:list-style-type
标记的位置:list-style-position
标记的图片:list-style-image
一、list-style-type:
none(无标记) 、disc(默认实心圆)、circle(空心圆)、 square(实心方块)、 decimal(数字)、 decimal-leading-zero(0开头数字标记01、02...)、 lower-roman(小写罗马数字)、 upper-roman(大写罗马数字)、 lower-alpha(小写英文字母)、 upper-alpha(大写英文字母)、 lower-greek(小写希腊字母)、 lower-latin(小写拉丁字母)、 upper-latin(大写拉丁字母) 、hebrew(传统的希伯来编号方式)、 armenian(传统的亚美尼亚编号方式) 、georgian(传统的乔治亚编号方式) 、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等)
.list1{
list-style-type:none;
}
.list2{
list-style-type:lower-alpha;
}
二、list-style-position
inside(列表项目标记放置在文本以内,且环绕文本根据标记对齐)
outside(默认值,保持标记位于文本的左侧,列表标记放置在文本以外,且环绕文本不根据标记对齐)
inherit(从父元素继承position属性值)
.list3{
list-style-type:square;
list-style-position:inside;
}
.list4{
list-style-type:circle;
list-style-position:outside;
}
三、list-style-image
url(图片路径) none(默认无图形被显示) inhe(从父元素继承image属性值)
.list5{
list-style-position:inside;
list-style-image:url(images/1.gif)
}
.list6{
list-style-position:outside;
list-style-image:url(images/2.png)
}
总结:
列表属性有一种简写方式 —— list-style:type position url()
.list7{
list-style:square outside url(images/2.png)
}
待续。。。
网友评论