博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ul ol li的序号编号样式
阅读量:6405 次
发布时间:2019-06-23

本文共 1347 字,大约阅读时间需要 4 分钟。

首先来那看一个序号样式的例子,下面是html代码(做参考)

  1. 列表内容列表内容列表内容列表
  2. 列表内容列表内容列表内容列表
  3. 列表内容列表
  4. 列表内容列表内容4
  5. 列表内容列表内容5

一、示例

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

 

你可能感兴趣的文章
使用certbot自动签发SSL证书(Let's Encrypt证书)
查看>>
C# 枚举、字符串、值的相互转换
查看>>
Struts秘籍之第1段:第2.1式:用插件来进行应用初始化
查看>>
GMF树形布局 3 展开/折叠时更换Node图标
查看>>
PHP截取字符串,获取长度,获取字符位置的函数 中文字符截取
查看>>
边缘计算与数据中心的发展趋势
查看>>
ALAsset,ALAssetsLibrary,ALAssetsgroup常见属性及用法
查看>>
SVN各种错误提示产生原因及处理方法大全
查看>>
Linux下基于端口的服务检查脚本
查看>>
setInterval
查看>>
Electronic Mail (邮件服务架构)
查看>>
常用文件重定向命令
查看>>
Betweenness Centrality的快速计算
查看>>
Spring Cloud搭建时碰到的问题及解决办法
查看>>
svn从trunk合并代码到branch
查看>>
struts2 标签说明
查看>>
Angular Directive: link vs compile vs controller
查看>>
ttserver 的配置和使用
查看>>
struts2 中返回结果result中配置type=“chain”
查看>>
openresty(nginx+lua)学习小记
查看>>