![零基础HTML+CSS+JavaScript学习笔记](https://wfqqreader-1252317822.image.myqcloud.com/cover/173/36710173/b_36710173.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
5.2 无序列表
在无序列表中,各列表项间没有顺序级别之分,通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>几个标签,以及type属性。
5.2.1 无序列表标签
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-080-01.jpg?sign=1739531174-3xpCsHUVILPgrNp6ax6KjLb8mwvya0ly-0-30a5261b1ef3b416f0ed3928286fc0b5)
无序列表的特征在于提供一种不编号的列表方式,而在每个项目文字前,以符号作为分项标识。
具体语法如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-080-1.jpg?sign=1739531174-amLiBLiHpNSMS3w3RIzZLSgZ7C8Wa7aW-0-ad44adcd3cd9a0251b9190ec86bb5886)
该语法使用< ul ></ ul>标签表示这个无序列表的开始和结束,<li>表示这是一个列表项的开始。一个无序列表可以包含多个列表项。
下面通过一个实例,使用无序列表定义编程词典的模式分类,新建一个HTML5文件。具体代码如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-080-2.jpg?sign=1739531174-fSuTE9WmN0YK6wtalG87fSM8SdtUpwTF-0-7d2d6438ccaa727218457a53cb19856e)
保存并运行这段代码,可以看到在窗口中建立了一个无序列表,该列表共包含3个列表项,如图5.3所示。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-081-1.jpg?sign=1739531174-lwj9tjHzDtiV7ZihRpY6Nndxrc5BHoAg-0-f1fe86b3b7989d846ba3e20ccf38c7c3)
图5.3 创建无序列表
5.2.2 无序列表属性
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-081-02.jpg?sign=1739531174-GDyfxtPW4ijhuU9qksIFrkiidU49QmW5-0-321a48d9be8566204ad03ddc1e603a5f)
在默认情况下,无序列表的项目符号是●,通过type属性可以调整无序列表的项目符号,避免列表符号单调。
具体语法如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-081-2.jpg?sign=1739531174-P3rrq2dZUI1YZNjkgUNWLJYUzyMzvjnX-0-d03a1e97abb946eca5df4aa8672b6285)
在该语法中,无序列表的其他属性不变,type属性决定了列表项开始的符号。type属性可以设置的类型值有3个,如表5.2所示,其中disc是默认类型值。
表5.2 type属性的符号类型
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-081-3.jpg?sign=1739531174-fUUCh9fauHAc3EGV7ciXVnsEngO1eVOU-0-abab8691e1a9156f359306ca82c10630)
新建一个HTML5文件,在文件的<body>标签中输入如下代码:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-081-4.jpg?sign=1739531174-WEwXCGpa5YOcP7QFBOyxj8OiZlY6CNsl-0-e0a0a8c40052da7f416b937ec1780bc7)
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-082-1.jpg?sign=1739531174-RAjbNyY69ORAUs1wDvDeyIk3V26rbW8M-0-434547bbe908c4fd7f5681fb1fb703b7)
运行这段代码,可以看到项目符号类型可以设置为none,此时项目符号不会显示,如图5.4所示。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-082-2.jpg?sign=1739531174-yNiYhHBszrniXcsFKj1jvkZN7hvTaPra-0-233bde91926b4fd7f5d946d5c969749e)
图5.4 设置无序列表的项目符号为none
无序列表的类型定义也可以在<li>标签中进行,其语法是<li type=符号类型>,这样定义的结果是对单个项目进行定义,具体代码如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-082-3.jpg?sign=1739531174-kLbQ8qnEhwTqs3QAjgW2PN8iTZnZxZ3G-0-ebd82204700aa959a678ce0bbc16e51f)
运行这段代码,效果如图5.5所示。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-082-4.jpg?sign=1739531174-XSsxixDvDkyeiWk9EUCiBwS8bEEtgZn3-0-023636b367e57892cbe7131c99bcbc83)
图5.5 设置不同的项目符号
学习笔记
如果在开发过程中不需要无序列表的符号,则只需将无序列表的列表项目的序号类型设置为none即可,也可以将列表的list-style属性设置为none。