CSS常见属性(列表属性)

2016-11-22  本文已影响29人  山的那边海的那边有太阳

列表属性:

标记的类型: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)

}

待续。。。

上一篇下一篇

猜你喜欢

热点阅读