应用和美化列表
项目4
列表是由同一类型的文本或图像构成的有限序列，即按一定顺序
排列而成的数据项的集合，能给人清晰、工整、一目了然的感觉。列
表在网页中十分常见，导航条、新闻列表等功能模块都是用它实现的。
HTML5不仅提供了列表标签，还支持多层列表嵌套使用，以便实现更
多效果。此外，使用CSS3还可实现图文列表、排行榜等效果。
u掌握无序列表、有序列表及自定义列表标签的使用方法。
u了解列表嵌套的方法。
u掌握使用CSS设置列表项目符号的方法。
u掌握使用CSS3制作导航条、图文列表、排行榜的方法。
内容概览
任务4.1使用HTML5添加列表
任务4.2使用CSS3美化列表
使用HTML5添加列表
任务4.1
?无序列表
?有序列表
?自定义列表
?嵌套列表
4.1.1无序列表
无序列表会将列表项的内容依次排列，并在每一个列表项前添加项目符号（默认为
实心圆）。无序列表的列表项之间没有先后、主次、轻重之分。在HTML5中，使用
ul标签标记无序列表，它还有一个用于标记列表项的子标签li，一个ul标签中可
以包含一个或多个li标签。具体格式为：
ul
li…/li
……
li…/li
/ul
提示：列表项是一种特殊的块级元素，默认情况下，各个列表项会从上至下排
列，而不是显示在同一行中。
【例4-1】使用无序列表制作商品分类栏（部分代码），页面效果如下图4-1所示。
p商品分类/p
ul
li家用电器/li
li手机/数码/li
li家具/家居/家装/厨具/li
li男装/女装/童装/li
li美妆/清洁/li
/ul
4.1.2有序列表
有序列表中的列表项是有先后顺序的，列表项前的项目符号为数字序号，默认为阿
拉伯数字。在HTML5中，使用ol标签标记有序列表，使用子标签li标记列表项，具
体格式为：
ol
li…/li
……
li…/li
/ol
对于强调列表项排列顺序的内容，如排行榜、新闻列表等，可以使用有序列表结构。
【例4-2】使用有序列表制作电影票房排行榜（部分代码），页面效果如下图4-2所示。
p2010年内地电影票房总排行榜/p
ol
li阿凡达——13.28亿/li
li唐山大地震——6.73亿/li
li让子弹飞——6.61亿/li
li非诚勿扰2——4.81亿/li
li盗梦空间——4.6亿/li
/ol
列表项的排序方式可使用ol标签的属性设置，常用属性及其含义如下。
（1）reversed。表示列表的顺序为降序，属性值为reversed。
（2）start。表示列表排序的起始值，属性值为数值。
（3）type。表示列表序号的类型，属性值有1、A、a、Ⅰ、ⅰ。
【例4-3】更改有序列表的排序方式（部分代码），页面效果如下图4-3所示。
p2008年北京奥运会乒乓球男子单打前三名：/p
olreversedreversedstart3typei
li季军：王励勤/li
li亚军：王皓/li