板邓：css ol 列表序列号样式

时间：2016-03-26 22:13:38 阅读：365 评论：0 收藏：0 [点我收藏+]

标签：

一。示例

1.自定义序号，

一般的列表顺序都是以1.2.3.为序号，但需要“、”代替“.” ，这时我们就要自己定义，主要使用了CSS的counter-increment对部分和子部分进行编号，但问题是折行的部分不能自动缩进

1 ol{list-style-type:none;counter-reset:sectioncounter;width:200px;}  
2 ol li:before {  
3     content:counter(sectioncounter) "、";   
4     counter-increment:sectioncounter;  
5  }

执行后为：

2. 标准格式

[css] view plain copy

ol{list-style-type:demical;width:200px;}  
ol li{ list-style-position:outside;}

执行后为：

二、css的UL、ol、li样式

1.list-style-type 属性设置列表项标记的类型。

2.list-style-image 属性使用图像来替换列表项的标记

取值: list-style-image:none/url

3.list-style-position 属性设置在何处放置列表项标记。

该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。

取值: list-style-position:inside/outside

注：有的时候outside不起作用，原因是加了浮动，

4.list-style属性

list-style 简写属性在一个声明中设置所有的列表属性。

取值:li-style:list-style-type/list-style-image/list-style-position

注：有的时候列序号不起作用，原因是加了浮动，

解决办法是 list-style-position:outside;改成list-style-position: inside;或去掉浮动设置

板邓：css ol 列表序列号样式

标签：

原文地址：http://www.cnblogs.com/xbdeng/p/5323913.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行