第14章++CSS控制列表元素的.ppt

第14章CSS控制列表元素的显示,在网页中，列表元素通常用来定义导航，或者文章标题列表等内容。在CSS中，可以通过相应的属性，控制列表元素的各种显示效果，在本章中，将对CSS中控制列表元素的显示和列表元素的使用和嵌套做详细的讲解，学习的时候可通过对照前面所学知识来加深对本章的理解。通过本章学习，应该掌握以下知识要点：重点掌握CSS控制列表元素的使用方法。熟悉列表元素的各种属性。学会使用嵌套的列表。,14.1控制列表元素的显示,在CSS中，列表元素的控制，包括控制控制列表符号、列表图片、控制列表的位置、等几个方面的内容。通过定义各种属性可以更改列表的默认显示方式，但是想要完全控制列表元素的显示，还需要依赖其他的CSS属性。下面将一一进行详细讲解。,14.1.1列表符号属性list-style-type,列表符号属性（list-style-type），用来定义列表中使用的预设符号。其中使用的属性值有很多，部分属性值还不被浏览器所支持。,14.1.2列表符号的混用,在定义列表元素的时候，有时候会混用各种列表符号。当混用的列表符号中，包含顺序问题的时候，同一列表中将会计算所有列表项目的数目，确定当前列表项目的显示方式。,14.1.3列表图像属性list-style-image,列表图像属性（list-style-image），用来定义列表元素中，替换列表符号的图像。在列表图像属性中，可以使用两个属性值：none和URL，其语法结构如下所示。,14.1.4列表图像的显示位置,在列表图像属性中，使用的列表图像的显示位置将与文本的底部基线对齐。所以在使用列表图像的时候，要注意选择合适的图像大小，否则将会显示异常。,14.1.5标记位置属性list-style-position,标记位置属性（list-style-position），用来定义列表中标记的显示位置。在字体样式属性中，可以使用两个属性值：outside、inside。,14.1.6标记位置属性与列表高度,当使用标记位置属性，同时定义了列表高度的时候，列表标记将会显示在列表的底部，而不会显示在列表内容第一行之中。,14.1.7列表综合属性list-style,列表综合属性（list-style），用来统一定义列表的各种显示效果。在列表综合属性中，可以同时定义列表的标记位置、使用图片、列表符号等属性。,14.2列表元素的使用和嵌套,在制作页面的时候，经常会使用列表元素来制作各种页面内容。在HTML中，列表元素默认会包含各种预先定义的显示效果，这些显示效果在不同的浏览器中，使用的属性值也不相同。所以在使用CSS控制列表元素的时候，要对列表元素的显示效果有所了解。同时使用嵌套的列表元素可以制作出各种复杂的显示效果。具体内容如下所示。,14.2.1列表元素的默认属性值,在列表元素中，如果未定义任何表现属性的时候。在IE浏览器中，会为列表定义默认的边界属性。在Firefox浏览器中，会为列表同时定义默认的补白和边界属性。,14.2.2统一列表元素的边界和补白,通过14.2.1的讲解，可以知道，造成列表元素显示差异的主要原因是：存在