序号样式例子,下面是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. 视频截图Util

    ​​ VideoToPicUtil.java package com.zhwy.util; import java.io.File; import java.util.ArrayList; impor ...

  2. MySQL 1130 - Host 127.0.0.1 is not allowed to connect to this MySQL server

    在开发中为了让开发更方便,在本地配置环境,希望可以直接访问服务器上的MySQL数据库,更方便的管理数据库, 需要在本地远程连接linux服务器的本地数据库,直接用数据库管理工具连接出现如下报错1130 ...

  3. 第 16 章 C 预处理器和 C 库(预定义宏)

    /*------------------------------------- predef.c -- 预定义宏和预定义标识符 ------------------------------------ ...

  4. Linux 小知识翻译 - 「端口限制」

    上次说了端口号相关的内容,这次聊聊「端口限制」的事. 经常看到关于安全的书籍上会说「不要开放多余的端口」,那么,如何限制端口才好呢? 实际,端口限制的方法大体上分的话有2种. 其一,「通过应用程序来处 ...

  5. 17秋 软件工程 第六次作业 Beta冲刺 Scrum5

    17秋 软件工程 第六次作业 Beta冲刺 Scrum5 各个成员冲刺期间完成的任务 世强:完成APP端相册.部员管理.手势签到模块: 陈翔:完成Scrum博客.总结博客,完成超级管理员前后端对接: ...

  6. django 中的 ajax

    (Asynchronous Javascript And XML ) 特点: 异步 页面局部刷新 传递的数据量小 ajax 请求返回数据 重定向 location.href='/index/' 发请求 ...

  7. C++整形转化成string类型---路径拼接在批处理程序中的应用

    上"酸菜" // show_dateset_image.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include ...

  8. LCA树上倍增

    LCA就是最近公共祖先,比如 节点10和11的LCA就是8,9和3的LCA就是3. 我们这里讲一下用树上倍增来求LCA. 大家都可以写出暴力解法,两个节点依次一步一步往上爬,直到爬到了相同的一个节点. ...

  9. WaitForSingleObject的详细用法

    在多线程的情况下,有时候我们会希望等待某一线程完成了再继续做其他事情,要实现这个目的,可以使用Windows API函数WaitForSingleObject,或者WaitForMultipleObj ...

  10. Python Tornado搭建高并发Restful API接口服务

    Tornado 和现在的主流 Web 服务器框架(包括大多数 Python 的框架)有着明显的区别:它是非阻塞式服务器,而且速度相当快能实现高并发.得利于其 非阻塞的方式和对epoll的运用,Torn ...