• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

ul ol li的数字序号编号样式_CSS学习

当前位置：网站建设 > 技术支持

<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 属性设置列表项标记的类型。

取值:disc 点| circle圆圈 | square正方形 | decimal数字 | decimal-leading-zero 十进制数| lower-roman 小写罗马文字| upper-roman 大写罗马文字| lower-greek小写希腊字母 | lower-latin小写拉丁文 | upper-latin 大写拉丁文| armenian亚美尼亚数字 | georgian乔治亚数字 | lower-alpha小写拉丁文 | upper-alpha大写拉丁文 | none无 | inherit继承

初始值: disc

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

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。