美文网首页
CSS常见属性(列表属性)

CSS常见属性(列表属性)

作者: 山的那边海的那边有太阳 | 来源:发表于2016-11-22 14:55 被阅读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)

}

待续。。。

相关文章

  • CSS常见属性(列表属性)

    列表属性: 标记的类型:list-style-type 标记的位置:list-style-position 标记的...

  • css样式入门书目录

    css样式-字体属性 css样式-背景属性 css样式-边框属性 css样式-列表属性 css样式-定位属性 cs...

  • CSS 列表属性

    列表属性 CSS列表属性用于设置HTML列表元素的样式,包括无序列表和有序列表。 CSS列表的所有属性: list...

  • Day03_CSS属性组成和作用

    学习目标 1、css属性和属性值的定义2、css文本属性3、css列表属性4、css背景属性5、css边框属性6、...

  • 03-CSS核心属性

    学习目标 1、css浮动属性详解2、css文本属性3、css列表属性4、css背景属性5、css边框属性 一、cs...

  • 2018-09-19 css核心属性

    DAY4:CSS核心属性 学习目标 1、css浮动属性详解 2、css文本属性 3、css列表属性 4、css背景...

  • CSS布局

    CSS的常见布局 CSS常见布局使用display属性(文档流)+position属性(定位)+float属性(浮...

  • CSS学习5

    列表 CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。 css列表属性: 代码举例: 修改用...

  • CSS布局

    CSS入门(3) CSS的常见布局 CSS常见布局使用display属性(文档流)+position属性(定位)+...

  • 从零开始学CSS - 样式

    样式 CSS 背景属性 CSS 文本属性 CSS 字体属性 链接 常见的链接样式,text-decorat...