发布网友 发布时间:2022-04-22 16:38
共3个回答
懂视网 时间:2022-04-22 05:44
这次给大家带来带序号的目录列表,实现带序号的目录列表注意事项有哪些,下面就是实战案例,一起来看一下。编写文档手册的时候,我们经常需要列表项前面的序号将上级各层的序号也附加在前面,如下图:
(图一)
但默认的<ol>列表,任何层次都是单个序号开始。如下图:
(图二)
要实现图一效果,方法之一是直接将序号部分作为列表内容的一部分,插入相应的HTML,可使用js批量插入序号。
生成的HTML结果类似这样
<ol> <li>1. 列表项 <ol> <li>1.1. 列表项 <ol> <li>1.1.1 列表项</li> <li>1.1.2 列表项</li> <li>1.1.3 列表项</li> </ol> </li> </ol> </li> </ol>
如果既不想将序号硬写在html代码里,也不想引入js,那么只能从HTML属性和CSS两个方面来突破了。
遗憾的是,HTML元素属性并没有提供类似的接口。
经网友提示,知道了有个叫css counter 的概念,我孤陋寡闻了。
查询有关文档之后,CSS解决方案也就有了。
HTML代码如下:
<ol> <li>列表项 <ol> <li>列表项 <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> </li> </ol> </li> </ol>
CSS代码如下:
ol {padding:0 0 0 20px;margin:0;list-style:none;} li:before {color:#f00; font-family:Times New Roman;} li{counter-increment:a 1;} li:before{content:counter(a)". ";} li li{counter-increment:b 1;} li li:before{content:counter(a)"."counter(b)". ";} li li li{counter-increment:c 1;} li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";}
效果就是本篇开头的图一。
可是这个CSS写的实在是丑陋,有几级目录,就得写几层的CSS,显然不应该是这样子的。
继续阅读了相关文档,明确了counter-reset , counter(), counters() 之后,发现问题竟是异常的简单。
CSS代码如下:
ol {padding:0 0 0 20px;margin:0;list-style:none;counter-reset:a;} li:before {counter-increment:a;content:counters(a,".")". ";}
这样,无论多少层的嵌套列表,都能正确显示级联序号了,效果如本篇开头的图一。
需要指出的是,:before, counter-increment 等相关CSS特性不支持古老的IE6/IE7,但是IE8及以上是支持的很好的。
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
href和src、link和@import有什么区别
css的绝对定位怎么兼容所有的分辨率
CSS3的属性transition、animation、transform
热心网友 时间:2022-04-22 02:52
添加项目符号或编号
在您键入的同时自动创建项目符号和编号列表
键入“1.”,开始一个编号列表或键入“*”(星号)开始一个项目符号列表,然后按空格键或
Tab。键入所需的任意文本。
按
Enter
添加下一个列表项。Word
会自动插入下一个编号或项目符号。
注释:
若要结束列表,请按
Enter
两次,或通过按
Backspace
删除列表中的最后一个编号或项目符号,来结束该列表。
如果项目符号或编号不能自动显示,在“工具”菜单上,单击“自动更正选项”,再单击“键入时自动套用格式”选项卡。选择“自动项目符号列表”或“自动编号列表”
复选框。
为原有文本添加项目符号或编号
选定要添加项目符号或编号的项目。
单击“格式”工具栏上的“项目符号” 或“编号” 。
注释:
通过在“格式”菜单上单击“项目符号和编号”,您可以选择不同的项目符号样式和编号格式。
您可以使整个列表向左或向右移动。单击列表中的第一个编号并将其拖到一个新的位置。整个表会随着您的拖动移动,而列表中的编号级别不变。
将原有的列表转换为多级符号列表
单击列表中除了第一个编码以外的其他编码,然后按
Tab
或
Shift+Tab,或单击“格式”工具栏上的“增加缩进量” 或“减少缩进量”
,更改列表中项目的层次级别。
右击修改为多级符号。
热心网友 时间:2022-04-22 04:10
Word多级列表编号与添加项目符号或编号列表相似,但是多级列表中每段的项目符号或编号会根据段落的缩进范围而变化。Word多级列表编号是在段落缩进的基础上使用Word格式中项目符号和编号菜单的多级列表功能,自动地生成最多达九个层次的符号或编号。