序号样式例子,下面是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 属性设置列表项标记的类型。
取值: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;或去掉浮动设置

ul ol li的序号编号样式的更多相关文章

  1. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  2. HTML中的ul, ol,li , dl,dt, dd标签

    ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...

  3. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  4. html5 分组标签 br hr p div blockquote figure ul ol li pre

    <br>    换行, 单标签 <hr>    分割线,水平线 <p>    段落, 有<br>换行功能, 而且行距会比普通换行要宽. <div& ...

  5. 关于<ul><ol><li>的用法

    <ul>:无序列表 <ol>:有序列表 <li>:行. 想要去掉前面的序号和点可以在<ol>或<ul>style中用list-style: ...

  6. <UL>中<li>标签前编号图片的简单调用

    <style type="text/css"> ul li{ list-style-type:none} .men ul{ background:url(http:// ...

  7. 1) 嵌套的 div ,或者 ul ol .li 阻止冒泡 ,特别是 对应onclick="test(event)" 通过传递event 阻止 冒泡. cancelBubble , stopPropagation

    1 .html 结构: <ul class="ul_2 hide" data-first="5"> <li class="li_2& ...

  8. 块和内嵌总结,以及各个标签的应用。其中的ul ol dl特殊定义为auto,使得里面的内容展开

    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...

  9. ul 、ol li 继承原有样式的问题

    如: 1.为什么我的服务器无法远程了? 2.为什么我的服务器总是自动重启? 3.为什么我的服务器总是自动重启? 以前写这种类型的列表,都是自己用键盘输入这些数字,其实不然,ul .ol li本身就自带 ...

随机推荐

  1. 传智播客张孝祥java邮件开发随笔01

    01_传智播客张孝祥java邮件开发_课程价值与目标介绍 02_传智播客张孝祥java邮件开发_邮件方面的基本常识 03_传智播客张孝祥java邮件开发_手工体验smtp和pop3协议 第3课时 关于 ...

  2. 使用虚拟环境virtualenv/Virtualenvwrapper隔离多个python

    virtualenv 系统中的多个python混用会导致$PYTHONPATH混乱,或者各个工程对于package的版本要求不同等等情况.有一个简单的解决方案就是用virtualenv来隔离多个pyt ...

  3. 4.6Python多版本存在问题

    返回总目录 目录: 1.展示效果: 2.操作流程: (一)展示效果: 1.多个版本python运行的情况: 2.多个版本pip运行的情况: (二)操作流程: 1.很关键的一条语句: pythonx.x ...

  4. JVM的新生代、老年代、MinorGC、MajorGC

    参考资料: http://blog.csdn.net/flamezyg/article/details/44673951 http://www.blogjava.net/ldwblog/archive ...

  5. synchronized关键字用法

    看到网上很多讲synchronized关键字用法的文章,说的都很有道理,也很深刻,但是看完总感觉脑袋里还是有点乱乱的.经过一番自己的思考后,想从自己的思考角度出发,来说一说synchronized关键 ...

  6. swift class的缺省基类(SwiftObject)与内存模型

    Hard Constraints on Resilience The root of a class hierarchy must remain stable, at pain of invalida ...

  7. Spring 注解大全

    @Autowired 自动注入 (存在多个可注入Bean时,通过 @Qualifier 指定)@Resource 与@Autowired作用相同@Repository 只能标注在 DAO 类上.该注解 ...

  8. 【spring-boot神器】第一篇:拦截器,过滤器,监听器,控制器,消息转换器,AOP执行顺序

    整理一下这几天学习的资料和代码 第一部分.上代码 1.spring各种器的实现,idea搭建spring-boot的教程在这里http://www.jianshu.com/p/9082a533fa3c ...

  9. POJ2236

    https://vjudge.net/problem/POJ-2236 An earthquake takes place in Southeast Asia. The ACM (Asia Coope ...

  10. AI 线性回归

    线性回归(Linear Regression),顾名思义,输出是输入的线性函数.因为通常会附加偏置(bias)参数,所以实际是仿射函数. 参考链接: http://cs229.stanford.edu ...