第9章 用CSS控制列表样式.pptVIP

第9章 用CSS控制列表样式 网页中的列表是一个非常有用的元素。列表通常是带圆点或者编号的短句，用于列出条款、说明等。列表用于包含内容相同或相近的元素。使用CSS样式能改变列表的排列方式、列表符的形式和位置等属性。使用CSS样式设置列表后，能使列表发生很多变化。在实际应用中，列表常被用于设置导航菜单、相册和文章标题列表等。列表在制作标准XHTML页面时的使用频率非常高。本章内容包括： 三种列表的表示方法 使用CSS样式改变列表符的样式 制作新闻列表和WEB 2.0风格的导航 9.1 列表的类型 列表包含三种类型，分别是无序列表、有序列表和定义列表。在实际运用中，常使用无序列表来实现导航和新闻列表的设置；使用有序列表实现条文款项的表示；使用定义列表来制作图文混排的排版模式。列表对于制作有语义的XHTML文档非常重要。 9.1.1 有序列表 无序列表是指列表列表符为圆点或者其他图形、而非数字的列表。无序列表由ul/ul标签包含多个li/li标签。标签ul的作用是说明其包含的列表是无序的；每组li标签用于包含一个列表项目。 9.1.2 有序列表 有序列表是指列表列表符为数字的列表。有序列表由ol/ol标签包含多个li/li标签。标签ol的作用是说明其包含的列表是有序的；每组li标签用于包含一个列表项目。 9.1.3 定义列表 定义列表有别于有序列表和无序列表。定义列表由dl/dl标签包含dt/dt和dd/dd标签。标签dl的作用是说明其包含的列表是一个定义列表。标签dt包含的内容是一个概念，标签dd包含的内容是该概念的解释。 9.2 改变列表符的样式 CSS中提供list-style-type、list-style-image和list-style-position属性来改变列表符的样式。由于定义列表在默认情况下没有列表符，所以上述三个属性对定义列表来说是无效的。 9.2.1 使用自带的列表符 有序列表和无序列表都有默认的列表符。CSS中的list-style-type属性中包含多个值可用于改变默认的列表符。 9.2.2 用背景图片改变列表符 很多网页的新闻列表或者文章列表都带有非常小巧精致的列表符。使用CSS中的list-style-image属性能将一张小图片替换默认的列表符。在【示例9.9】中，使用一张名为list_marker.gif的小图片替换默认的列表符。注意list_marker.gif要和【示例9.9】的XHTML文档放在同一文件目录下。小图片list_marker.gif如图9.8所示，其大小为9像素宽，6像素高。 9.2.3 改变列表符的位置 CSS提供list-style-position属性用于改变列表符和列表的相对位置。该属性包含两个值，分别是inside和outside。默认情况下，list-style-position的属性值为outside，以下是两个值代表的意义： outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐； inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。 9.2.4 列表属性的速写法 上述的list-style-type、list-style-image和list-style-position属性可以用复合属性list-style进行缩写。 9.3 本章实例一：制作带时间显示的新闻列表 在许多网页的新闻列表中，左侧常显示为新闻列表，右侧为该新闻的发布时间。本章示例一就介绍了如何使用无序列表来制作一个带有时间显示的新闻列表，本实例最终效果如图9.12所示。 9.4 本章实例二：制作WEB 2.0风格导航 本章实例二讲解制作一个WEB 2.0风格的水晶导航。本实例最终效果如图所示，当鼠标滑过导航时，效果如图所示。 9.5 常见面试题 问题1：XHTML中共有几种列表，分别是哪几种？ 问题2：使用list-style-type时，哪些值在IE6中失效？ 问题3：如何让列表不要自带列表符？ 9.6 小结 本章讲解了三种列表方式以及使用列表相关属性改变列表符的方法。本章的重点是如何使用CSS样式更改列表符的默认样式和位置以及如何使用图片代替列表符。本章的难点是灵活运用CSS技术设置列表的样式制作不同的排版方式。下一章将介绍用CSS样式美化表格的方法。