
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
5.2 无序列表
在无序列表中,各列表项间没有顺序级别之分,通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>几个标签,以及type属性。
5.2.1 无序列表标签

无序列表的特征在于提供一种不编号的列表方式,而在每个项目文字前,以符号作为分项标识。
具体语法如下:

该语法使用< ul ></ ul>标签表示这个无序列表的开始和结束,<li>表示这是一个列表项的开始。一个无序列表可以包含多个列表项。
下面通过一个实例,使用无序列表定义编程词典的模式分类,新建一个HTML5文件。具体代码如下:

保存并运行这段代码,可以看到在窗口中建立了一个无序列表,该列表共包含3个列表项,如图5.3所示。

图5.3 创建无序列表
5.2.2 无序列表属性

在默认情况下,无序列表的项目符号是●,通过type属性可以调整无序列表的项目符号,避免列表符号单调。
具体语法如下:

在该语法中,无序列表的其他属性不变,type属性决定了列表项开始的符号。type属性可以设置的类型值有3个,如表5.2所示,其中disc是默认类型值。
表5.2 type属性的符号类型

新建一个HTML5文件,在文件的<body>标签中输入如下代码:


运行这段代码,可以看到项目符号类型可以设置为none,此时项目符号不会显示,如图5.4所示。

图5.4 设置无序列表的项目符号为none
无序列表的类型定义也可以在<li>标签中进行,其语法是<li type=符号类型>,这样定义的结果是对单个项目进行定义,具体代码如下:

运行这段代码,效果如图5.5所示。

图5.5 设置不同的项目符号
学习笔记
如果在开发过程中不需要无序列表的符号,则只需将无序列表的列表项目的序号类型设置为none即可,也可以将列表的list-style属性设置为none。