![HTML5+CSS3+JavaScript 从入门到项目实践(超值版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/418/31794418/b_31794418.jpg)
8.1 列表标签
列表(List)是用来将相关资料以条目的形式有序或者无序排列而形成的表。常用的列表有无序列表、有序列表和定义列表3种。
8.1.1 无序列表
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P131_25336.jpg?sign=1739035508-VlkgfPzvg5LNOfMC0sjj61D5ooRfP9I3-0-be23c5dfb1009fe51181130ad6fda4b1)
无序列表<ul>是网页中最常用的列表之一,使用<li>标签罗列每个项目,每个项目前面默认的自带黑色实心圆。在CSS 3中可以通过list-style-type属性来定义无序列表前面的符号,无序列表中list-style-type属性值如表8-1所示。
表8-1 无序列表中list-style-type属性的属性值
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-T131_120051.jpg?sign=1739035508-WQXYXpfA4GXyp2ypRTDOvNzATTPh43ne-0-47c4f9da05308a8d4f49019e5286ecbb)
【例8-1】(实例文件:ch08\Chap8.1.html)无序列表。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P132_119902.jpg?sign=1739035508-lHXd1rGtnzKfFAIud77f4EGTJqSfWeyJ-0-b5a95c02c88fe96b56949b467ae001ee)
相关的代码实例请参考Chap8.1.html文件,在IE浏览器中运行的结果如图8-1所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P132_25519.jpg?sign=1739035508-RzUJLQvWRxB9gMrYLL2Cek3DuI39doQf-0-62f6d819afb9648cc5ae9804959456fc)
图8-1 无序列表
可以设置表8-1中的属性值来改变无序列表的默认样式,这里设置属性值为circle,代码如下:
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P132_119903.jpg?sign=1739035508-46xLDgiRIgIajWXThXQTEjcbFbQzQogy-0-09b5d110b244005320dc1e3d2e23e767)
在IE浏览器中运行的结果如图8-2所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P132_25520.jpg?sign=1739035508-EmTY3ZfQfOS1iKMhPHA841cARby1i9xa-0-680fe237c8fa12c3f760888d65b294f6)
图8-2 circle属性值效果
8.1.2 有序列表
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P132_25525.jpg?sign=1739035508-TPoRly8vM0v2T2MA6fmGVE1mNPEX0Hyf-0-27c827a47e525348cc2233cdb4720baa)
有序列表标记<ol>可以创建具有顺序的列表,如每条信息前面加上1、2、3等,如果要改变有序列表前面的符号,同样需要使用list-style-type属性,只是属性值不同而已。
有序列表中list-style-typed的一些属性值如表8-2所示。
表8-2 有序列表中list-style-typed的一些属性值
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-T133_120058.jpg?sign=1739035508-K703VhTP8pNjHwoOehYcbaenl2h2Cb6d-0-a9a4a88337215926465a6942dc73f1f8)
【例8-2】(实例文件:ch08\Chap8.2.html)有序列表。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P133_119904.jpg?sign=1739035508-eVlHafsfgRke7M3ZtkboAqP0t9uLEsfz-0-dfa0cd8fc5852df66617108bfd9b6b5b)
相关的代码实例请参考Chap8.2.html文件,在IE浏览器中运行的结果如图8-3所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P133_25718.jpg?sign=1739035508-CvhWlKdmu7MqHvLjlgxPC6m4RWuaUPeG-0-d87b29c70eaa754801669f67d71b1336)
图8-3 有序列表
可以设置表8-2中的属性值来改变无序列表的默认样式,这里设置属性值为lower-alpha,代码如下:
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P133_119905.jpg?sign=1739035508-v0Ed0rVIYMZi6SluLwkeNoo8s1Jsnlua-0-de020a2bf66d7a80f745539989d3b299)
在IE浏览器中运行的效果如图8-4所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P133_25719.jpg?sign=1739035508-zGxc9pxhFZ4Ol7rmTJUE8MMIJ19dsC3v-0-3aaad9876344712ba990dd0160176905)
图8-4 lower-alpha属性值效果
8.1.3 自定义列表
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P134_25858.jpg?sign=1739035508-dsT7FFBx9GjCZmfaz16eU0zRyZkCZYFg-0-727ba5fc8b1d12f2d2367dc52d7825c4)
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以<dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以<dd>开始。
【例8-3】(实例文件:ch08\Chap8.3.html)自定义列表。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P134_119906.jpg?sign=1739035508-dXhcdApNUeSUKclDlxeyH5G7wRW2K8xr-0-ebd10a5e2fad4e14ae6144c987e611d2)
相关的代码实例请参考Chap8.3.html文件,在IE浏览器中运行的结果如图8-5所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P134_25832.jpg?sign=1739035508-Kdk6pYbavpefNIcDDWHByiW0IJwOUuzX-0-a5736502c51052687b97b42aaf22e96c)
图8-5 自定义列表