Web前端技术开发（HTML5+CSS3+JavaScript）课件 第八单元 列表的应用.pptx

Web前端开发技术

第八单元列表的应用了解列表类型、学会建立列表、掌握嵌套列表及列表应用嵌套列表、列表的应用

1.1列表的建立与使用1.2嵌套列表1.3CSS设置列表样式1.4列表的应用

列表的建立与使用1

1.1列表的建立与使用列表类型： 常用的列表种类有定义列表、有序列表和无序列表。常用的列表标记，如表8-1所示。

1.1列表的建立与使用建立无序列表：无序列表是一套组合标记，由ul和li这两种不同的标记组成。基本语法：说明：在HTML文件中，利用成对ul/ul标记可以插入无序列表，但ul标记之间必须使用成对li/li标记添加列表项值。这两种标记都不能单独使用。

1.1列表的建立与使用无序列表项目符号类型：无序列表的项目符号可以自行定义，需要设置ul标记的type属性，该属性的取值如表8-2所示。注意：type属性可用CSS替代了，不赞成使用该属性。本单元中的8.3节将结合CSS属性list-style-type来设置列表类型。

1.1列表的建立与使用建立3个列表项的无序列表。默认的无序列表项为实心圆点。

1.1列表的建立与使用建立有序列表：有序列表除了列表项的符号与无序列表不同外，显示效果基本一致。在很多情况下，两者可以相互代替使用。基本语法：说明：在HTML文件中，利用成对ol/ol标记可以插入有序列表，但ol标记之间必须使用成对li/li标记添加列表项值。这两种标记都不能单独使用。

1.1列表的建立与使用有序列表项目符号类型：与无序列表的定义项目符号的一样，推荐使用CSS来设置。

1.1列表的建立与使用使用type属性设置项目符号，使用start属性设置起始值。

嵌套列表2

1.2嵌套列表列表间可以相互嵌套使用。列表项内容可以是文本、标题、图片，甚至可以是列表等网页元素。列表嵌套实例

CSS设置列表样式3

1.3CSS设置列表样式设置列表样式—list-style-type使用CSS属性list-style-type设置列表项类型。list-style-type属性的取值如下表所示。

1.3CSS设置列表样式添加列表图像—list-style-image使用CSS属性list-style-image设置列表图像。属性值none表示不使用图像；URL指定图像的路径。

1.3CSS设置列表样式添加列表图像—list-style-image

THANKYOUFORWATCHING