HTML自定义有序列表

一般的有序列表顺序的序列号都是1. 2. 3. ......但是有时需要用”、“代替“.”,这时我们必须自己定义它,主要是使用CSS counter-increment对部分和子部分进行编号,但是问题是换行的部分不能自动缩进。
HTML自定义有序列表
默认的有序列表样式:

<!--默认样式-->
<style>
ol{
list-style-type:demical;
width:200px;
}
ol li{
list-style-position:outside;
}
</style>

<!--有序列表-->
<ol>
  <li>咖啡</li>
  <li></li>
  <li>牛奶</li>
</ol>

自定义有序列表样式:

<!--自定义样式-->
<style>
ol{
list-style-type:none;
counter-reset:sectioncounter;
width:200px;
}
ol li:before {
content:counter(sectioncounter) "、";
counter-increment:sectioncounter;
}
</style>

<!--有序列表-->
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

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

4

发表评论