![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=1739188515-E2PvIgubKwVYA5Wa8dYFhHQnRYBvIoQd-0-8a5ecd8ca2c8617642cd6129a89e8045)
无序列表<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=1739188515-YnbaJbBtUPWGY4K2sb4bZ3WCv9PK25Qc-0-0c0b4d2aa1fdbba4ba4b98eb72af1c24)
【例8-1】(实例文件:ch08\Chap8.1.html)无序列表。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P132_119902.jpg?sign=1739188515-RPzBR3SmSc7TKUYBBnsNgSCdba9pgY5h-0-6f413a511232c26c58e530b6cd14193c)
相关的代码实例请参考Chap8.1.html文件,在IE浏览器中运行的结果如图8-1所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P132_25519.jpg?sign=1739188515-j9sbfzs54InOv6BlCFXBUKnrtcoXUUTQ-0-69538d2be3ef750caaa276b2b1f47c28)
图8-1 无序列表
可以设置表8-1中的属性值来改变无序列表的默认样式,这里设置属性值为circle,代码如下:
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P132_119903.jpg?sign=1739188515-5dH6ysQQmiiHUfngy4edGeXYpiECMB16-0-e7c35611720982246f5872bfe2acb1a6)
在IE浏览器中运行的结果如图8-2所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P132_25520.jpg?sign=1739188515-HkNZDxd6PYL8VnSrONeJpSrtRA9SmoST-0-9bf094d25da3d437c0c5b55010a06fdd)
图8-2 circle属性值效果
8.1.2 有序列表
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P132_25525.jpg?sign=1739188515-MguSIWUojgX6f4EW5OZl8jlfVQtujwZN-0-b01c38b751f2dac6da0e0bff01970b0a)
有序列表标记<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=1739188515-IA0ScSfBlVS2unh0ISRuDWIiq2wsWkr5-0-4d945ebead463d2a908f59ebe11c90d1)
【例8-2】(实例文件:ch08\Chap8.2.html)有序列表。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P133_119904.jpg?sign=1739188515-RXqmSnPxlHJHYXw1MqREraJqJW96Nb2F-0-0fe9bba777faf02535aa9072066ebdc6)
相关的代码实例请参考Chap8.2.html文件,在IE浏览器中运行的结果如图8-3所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P133_25718.jpg?sign=1739188515-l4gv4fK3XgM9APYRyv9llFqQzjebxfTM-0-b2365e4eb1fa9e9463cd957a4704dbbe)
图8-3 有序列表
可以设置表8-2中的属性值来改变无序列表的默认样式,这里设置属性值为lower-alpha,代码如下:
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P133_119905.jpg?sign=1739188515-0n0WpmwMDh25wpQctK8GS4muwXCxHhv4-0-fd4cd02fb565c886f6926bd2dfaef723)
在IE浏览器中运行的效果如图8-4所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P133_25719.jpg?sign=1739188515-EIXRsme15JinXsMKLabjpH9z974X440m-0-e81e37f040381bcd133008b1bda40c3a)
图8-4 lower-alpha属性值效果
8.1.3 自定义列表
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P134_25858.jpg?sign=1739188515-gfBEjqTdHF4InVlZvMAUYEmJx4nrRcx3-0-97e181dc8a34b942dd2c2aa9aca5eb2a)
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以<dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以<dd>开始。
【例8-3】(实例文件:ch08\Chap8.3.html)自定义列表。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P134_119906.jpg?sign=1739188515-AkTMvJCk7lpB9r0morsDNrSS4m4lXOWX-0-5eebde56af6beb59928a24feca8784ba)
相关的代码实例请参考Chap8.3.html文件,在IE浏览器中运行的结果如图8-5所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P134_25832.jpg?sign=1739188515-ha4gurNFEba2dZGWcSZzZ9vE0N7kRs9l-0-ece68d9fc2b907e091d28d969fee8865)
图8-5 自定义列表