首先来那看一个序号样式的例子，下面是html代码（做参考）

<ol><li>列表内容列表内容列表内容列表</li><li>列表内容列表内容列表内容列表</li><li>列表内容列表</li><li>列表内容列表内容4</li><li>列表内容列表内容5</li>
</ol>

一、示例

1.自定义序号，

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

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

执行后为：

2. 标准格式

   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;或去掉浮动设置

ul ol li的序号编号样式相关推荐

Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
关于ul ol li
ul是无序排列例如:<ul> <li>Today <li>Tommorow </ul> 在网页中显示的结果是: · ...
DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
HTML 列表中的dl,dt,dd,ul,ol,li区别及应用
1.无序列表无序列表是一个项目的列表,此列项目使用粗体圆点(通常)进行标记.无序列表始于 <ul> 标签.每个列表项始于 <li>. 2.有序列表有序列表也是一列项目,列表 ...
div+css布局必了解的列表元素ul ol li dl dt dd详解
dt 和dd中可以再加入 ol ul li和p,理解这些以后,在使用div布局的时候,会方便很多,其实w3c提供了很多元素辅助布局都是有它的用处的,而不尽是div. 块级元素div尽量少用,其实和ta ...
ol,li,ul列表
ol,li,ul列表一.ol li有序列表标签 1.语法 2.作用 3.案例 4.总结二.ul li 无序列表标签 1.语法 2.说明 3.案例 4.总结一.ol li有序列表标签 1.语法在 ...
ul 、ol li 继承原有样式的问题
如: 1.为什么我的服务器无法远程了? 2.为什么我的服务器总是自动重启? 3.为什么我的服务器总是自动重启? 以前写这种类型的列表,都是自己用键盘输入这些数字,其实不然,ul .ol li本身就自带 ...
ul,ol中的li文本居中时，默认序列号样式圆点在最左侧,使圆点跟随li的方法
加上下面代码即可解决. ol li,ul li{ list-style-position:inside; }
html网页字段序号的样式,[网页设计]局部自定义li序号CSS样式的方法
想必大家看到过很多网页内容的列表很多都有1.2.3.4....等标记,这是因为li独有的序号标记,默认是一个小圆点,只要用css控制就可以让数字显示出来,除了数字和圆点之外,还有n种格式显示方法,具体 ...

ul ol li的序号编号样式