- HTML5+ CSS3+JavaScript 网页设计实战(视频教学版)
- 常新峰
- 902字
- 2025-02-25 04:15:05
3.3 项目符号与编号
本节介绍HTML网页的项目符号与编号,这在论文、报告和文献等文章格式中比较常见。
3.3.1 符号列表
符号列表在文档中是一种比较常见的表现形式,符号可以定义为多种样式,譬如:圆点符号、星型符号、箭头符号等。在HTML网页中,可以通过ul-li标签元素来实现无序的符号列表。
下面是一个设置不同风格符号列表的HTML示例代码(详见源代码ch03/ch03-html-ul-li.html文件)。
【代码3-7】

【代码解析】
第11~15行代码使用ul标签元素定义了type="disc"样式的符号列表,"disc"样式表示实心圆点,同时该样式也为ul标签元素的默认样式。
第16~20行代码使用ul标签元素定义了type="circle"样式的符号列表,"circle"样式表示空心圆圈。
第21~25行代码使用ul标签元素定义了type="square"样式的符号列表,"square"样式表示实心方形。
运行测试网页,效果如图3.7所示。

图3.7 符号列表
3.3.2 编号列表
编号列表在文档中也是一种比较常见的表现形式,同时编号也可以定义为多种样式,譬如:阿拉伯数字、罗马数字、字母等。在HTML网页中,可以通过ol-li标签元素来实现有序的编号列表。
下面是一个设置不同风格编号列表的HTML示例代码(详见源代码ch03/ch03-html-ol-li.html文件)。
【代码3-8】

【代码解析】
第11~15行代码使用ol标签元素定义了type="1"样式的编号列表,"1"样式表示阿拉伯数字。同时,该样式也是ol标签元素的默认样式。
第17~24行代码使用ol标签元素定义了type="I"样式的编号列表,"I"样式表示大写罗马数字。同时,第19~22行代码定义了type="i"样式的二级编号列表,"i"样式表示小写罗马数字。
第26~35行代码使用ol标签元素定义了type="A"样式的编号列表,"A"样式表示大写字母。同时,第28~32行代码定义了type="a"样式的二级编号列表,"a"样式表示小写字母。
运行测试网页,效果如图3.8所示。

图3.8 编号列表
3.3.3 自定义列表
自定义列表不仅仅是一列项目,同时也是项目及其注释的组合。自定义列表以dl标签元素开始,每个自定义列表项以dt标签元素开始,每个自定义列表项的定义以dd标签元素开始。
下面是一个设置自定义列表的HTML示例代码(详见源代码ch03/ch03-html-ol-li.html文件)。
【代码3-9】

【代码解析】
第11~18行代码使用<dl>标签元素定义了自定义列表。
第12行、第14行和第16行代码使用<dt>标签元素定义了自定义列表项。
第13行、第15行和第17行代码使用<dd>标签元素定义了上面三个自定义列表项的注释。
运行测试网页,效果如图3.9所示。

图3.9 自定义列表