![网页设计与网站建设全攻略](https://wfqqreader-1252317822.image.myqcloud.com/cover/587/27110587/b_27110587.jpg)
3.5 使用列表
在网页编辑中,有时会使用列表,例如,包含层次关系、并列关系的标题都可以制作成列表形式,这样有利于访问者理解网页内容。列表包括项目列表和编号列表,下面分别进行介绍。
3.5.1 小实例——插入项目列表
项目列表又称无序列表,这种列表的项目之间没有先后顺序。项目列表前面一般用项目符号作为前导字符,如图3-34所示是创建项目列表效果,具体操作步骤如下。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0105.jpg?sign=1739567071-SDVMonbNFummKL7Em5KEWvCZzkm1yUFN-0-18987bfd08fd4d4573fec4d4dc12a1dd)
图3-34 创建项目列表效果
原始文件:原始文件/03/3.5.1/index.htm 最终文件:最终文件/03/3.5.1/index1.htm
步骤01 打开网页文档,将光标置于要创建项目列表的位置,如图3-35所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0106.jpg?sign=1739567071-81YxS970LB82Hb0B8J2Iyv6KKl5zcRfG-0-0edaa14483447395c1cbd1f6a6dd6f50)
图3-35 打开网页文档
步骤02 执行“格式”|“列表”|“项目列表”命令,如图3-36所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0107.jpg?sign=1739567071-5nFZmYqV7uSMvIKoadmtU1T1XI499JhD-0-240050f2e3b21b588f486a111fa01146)
图3-36 执行“项目列表”命令
步骤03 选择命令后,即可创建项目列表,如图3-37所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0108.jpg?sign=1739567071-xtdU7BIGSYSdQGwjRy7eT5ewQC0YYtpz-0-d2be21389eaa60ce394372967e8ea2d7)
图3-37 创建项目列表
★提示★
单击“属性”面板中的“项目列表”按钮,也可以创建项目列表;或者执行“插入”|“结构”|“项目列表”命令,也可以创建项目列表。
步骤04 同步骤2~3插入其他的项目列表,如图3-38所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0110.jpg?sign=1739567071-yH7TYnpGviR52RV62tdgOeMCcEUIS6EP-0-bcb306bd71aca7018d53c81bf332b05a)
图3-38 插入其他的项目列表
步骤05 保存文档,按F12键在浏览器中预览,效果如图3-34所示。
3.5.2 使用编号列表
当网页内的文本需要按序排列时,就应该使用编号列表。编号列表的项目符号可以在阿拉伯数字、罗马数字和英文字母中做出选择。如图3-39所示是创建编号列表效果,具体操作步骤如下。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0111.jpg?sign=1739567071-DqzadpflJrof1re8V8oeRvvyrT8FqHgL-0-d7b4ab9fb75ce37504d0f95daeef9732)
图3-39 创建编号列表效果
原始文件:原始文件/03/3.5.2/index.html 最终文件:最终文件/03/3.5.2/index1.html
步骤01 打开网页文档,将光标置于要创建编号列表的位置,如图3-40所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0112.jpg?sign=1739567071-oiQFV7HhQq05rKKMKd2tZ2o4t6FZ4oo7-0-d3cdc8adb8e689fdf1b433c1677a1fb2)
图3-40 打开网页文档
步骤02 执行“格式”|“列表”|“编号列表”命令,如图3-41所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0113.jpg?sign=1739567071-hZMHpMbv9JWBN3xoJfOSLVFYzlYG8nP2-0-fcd5e9162564823394bd8cf76975ef99)
图3-41 执行“编号列表”命令
步骤03 选择命令后,即可创建编号列表,如图3-42所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0114.jpg?sign=1739567071-YzlIo1jmcifhFTEQByh4oCSCQgudhyM9-0-5934ef64d0f1bb55698fe52ec84c9ccf)
图3-42 创建编号列表
★提示★
单击“属性”面板中的“编号列表”按钮,也可以创建编号列表;或者执行“插入”|“结构”|“编号列表”命令,也可以创建编号列表。
步骤04 重复步骤2~3插入其他的编号列表,如图3-43所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0116.jpg?sign=1739567071-xJlQdaZapVwKKIsaUxhCroyAFxR5YlX5-0-6d798aa30a2e35da1aa0b28beee1be74)
图3-43 插入其他的编号列表
步骤05 保存文档,按F12键在浏览器中预览,效果如图3-39所示。