CSS常见属性(列表属性)


列表属性:

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

}

待续。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) ...
    厝弧阅读 2,629评论 0 0
  • 一,HTML有N多标签,根据显示的类型,主要可以分为3大类 1,块级标签 独占一行的标签 能随时设置宽度和高度(比...
    张不二01阅读 4,097评论 0 4
  • 去掉下划线: text-decoration:none; 占四分之一的距离: width:25% 居中对齐:tex...
    writeanewworld阅读 3,064评论 0 0
  • 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般...
    可爱傻妞是我的爱阅读 2,444评论 0 0
  • 早起心情好好,因为今天下班要见到我可爱的小侄子了,我的心❤我的肝 我的宝贝甜蜜饯:-D,我的小男神,超可爱的小家伙...
    爱尚欣亚阅读 1,274评论 0 0

友情链接更多精彩内容