ul ol li的序号编号样式
序号样式例子,下面是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的序号编号样式的更多相关文章
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- HTML中的ul, ol,li , dl,dt, dd标签
ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...
- Div+css中ul ol li dl dt dd使用
ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...
- html5 分组标签 br hr p div blockquote figure ul ol li pre
<br> 换行, 单标签 <hr> 分割线,水平线 <p> 段落, 有<br>换行功能, 而且行距会比普通换行要宽. <div& ...
- 关于<ul><ol><li>的用法
<ul>:无序列表 <ol>:有序列表 <li>:行. 想要去掉前面的序号和点可以在<ol>或<ul>style中用list-style: ...
- <UL>中<li>标签前编号图片的简单调用
<style type="text/css"> ul li{ list-style-type:none} .men ul{ background:url(http:// ...
- 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& ...
- 块和内嵌总结,以及各个标签的应用。其中的ul ol dl特殊定义为auto,使得里面的内容展开
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...
- ul 、ol li 继承原有样式的问题
如: 1.为什么我的服务器无法远程了? 2.为什么我的服务器总是自动重启? 3.为什么我的服务器总是自动重启? 以前写这种类型的列表,都是自己用键盘输入这些数字,其实不然,ul .ol li本身就自带 ...
随机推荐
- JMeter乱码常见的解决方案
方法一.直接将JMeter中http请求中Content encoding改为utf-8 方法二.编辑JMeter安装目录:apache-jmeter-3.2\bin中的jmeter.properti ...
- Shell脚本应用(for、while循环语句和case分支语句)
1.for:读取不同的变量值,逐个执行同一组命令,直到取值完毕退出,变量值以空格分隔 语法: for 变量值 in 取值列表 do 命令序列 done 2.while:重复测试某个条件,成立则执 ...
- zookeeper-01 概述
1. Zookeeper概念简介和应用场景 1.1. 概念简介 Zookeeper是一个分布式协调服务:就是为用户的分布式应用程序提供协调服务 A.zookeeper是为别的分布式程序服务的 B.Z ...
- SQL2008 一直error40 无法连接到localhost
1. Problem 2. Reason 可能是之前卸载SQL Server时没卸载干净 后来又重新安装时导致默认实例名不能用 就随手写了个SQLMOLORY实例名 但其实系统内这时是有两个SQL实例 ...
- web页面中快速找到html对应元素两种方法
一.第一种方法(通过先进入开发模式然后再去选择网页元素) 1.打开IE.Chrome.FireFox等,按 F12 键进入开发模式 2.在打开的控制窗口左上角有个 箭头 按钮,点击它之后,此时将鼠标 ...
- Spring集成MyBatis持久层框架
一.MyBatis介绍 MyBatis 是一款优秀的持久层框架,它支持定制化SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的JDBC代码和手动设置参数以及获取结果集,可以使用简单的XML ...
- IOS HTML5页面中数字自动变蓝并识别为手机号
开发HTML5的项目时发现页面元素为一串数字时,IOS手机会默认显示成蓝色字体,并且添加下划线,点击数字时会提示是否识别为手机号. 解决此问题的方法很简单,在head标签中添加下面的meta标记即可解 ...
- 【转】这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- mysql用户操作、权限分配、远程登录设置
对最近mysql的常用运维命令进行整理 查看使用的哪个配置文件启动的mysql 1. ps aux|grep mysql|grep 'my.cnf' 如果启动的命令中选择了配置文件,则可以查询出来,也 ...
- Oracle 11g中的snapshot standby特性
在Oracle 11g中,data guard最吸引人的,除了active data guard的实时查询特性(即可以以只读方式打开物理standby数据库的同时MRP进程能继续做recover),快 ...