网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

css中利用什么属性控制列表的样式

控制列表样式的属性:1、“list-style-type”,设置列表标记的类型;2、“list-style-position”,设置标记的放置位置;3、“list-style-image”,将图像设为列表标记;4、“list-style”。

交口网站建设公司创新互联,交口网站设计制作,有大型网站制作公司丰富经验。已为交口1000+提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱,请找那个售后服务好的交口做网站的公司定做!

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

列表(List) 属性

属性说明CSSlist-style在一个声明中设置所有的列表属性1list-style-image将图像设置为列表项标记1list-style-position设置列表项标记的放置位置1list-style-type设置列表项标记的类型1

(1)list-style-type:用于控制标记符的外观形状。

对于无序列表,该属性取值如下:1. none,没有标记符;2. disc(默认值),填充的圆;3. circle,空心圆;4. square,填充的正方形。

对于有序列表,该属性取值如下:1. decimal,数字;2. decimal-leading-zero,前面加0的数字;3. lower-alpha,小写字母;4. upper-alpha,大写字母;5. lower-roman,小写罗马字母;6. upper-roman,大写罗马字母。

(2)list-style-position: 该属性用于声明列表标志相对于列表项内容的位置。

外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。对于嵌套列表,可以使用值inherit,规定应该从父元素继承 list-style-position 属性的值。

(3)list-style-image:指定图像作为标记。

使用方式如下:

li { list-style-image: url("haha.gif") }

需要注意的是,如果正在使用嵌套列表,该属性会继承父元素,为了防止继承,须将list-style-image设置为none。

(4)list-style:简写形式

可以一次性表达以上三个属性中的多个属性,可以以任意顺序出现。

测试效果图如下:

CSS代码如下:

li { border: red solid thin; }ul { list-style: square outside }ol { list-style: upper-alpha inside; } ul.one { list-style: url("test1.jpg") inside; }

HTML代码如下:

CSS控制列表样式
无序列表样式有序列表样式使用图片做标记符
  • one
  • two
  • three
  1. one
  2. two
  3. three
  • one
  • two
  • three
注意outside与inside其标记符与li元素框的位置

(学习视频分享:css视频教程)


文章标题:css中利用什么属性控制列表的样式
URL链接:http://bjjierui.cn/article/cpseog.html

其他资讯