第8章使用CSS制作列表

1、第第8 8章章 使用使用CSSCSS制作列表制作列表列表元素是网页设计中使用频率非常高的元素，在列表元素是网页设计中使用频率非常高的元素，在大多数的网站设计上，无论是新闻列表，还是产品，或者是大多数的网站设计上，无论是新闻列表，还是产品，或者是其他内容，均需要以列表的形式来体现。其他内容，均需要以列表的形式来体现。列表形式在网站设计中占有很大比重，信息的显示列表形式在网站设计中占有很大比重，信息的显示非常整齐直观，便于用户理解与点击。从网页出现到现在，非常整齐直观，便于用户理解与点击。从网页出现到现在，列表元素一直是页面中非常重要的应用形式。列表元素一直是页面中非常重要的应用形式。8.1 8.

2、1 制作新闻列表制作新闻列表新闻列表是一个网站的重要组成元素。对新闻列表新闻列表是一个网站的重要组成元素。对新闻列表使用标题，可以突出显示很重要的信息。新闻列表既可以是使用标题，可以突出显示很重要的信息。新闻列表既可以是基于文本的内容，也可以是指向现有新闻项目的链接（例如基于文本的内容，也可以是指向现有新闻项目的链接（例如新闻服务上的文章）。新闻服务上的文章）。8.1.1 8.1.1 制作实例制作实例 新闻列表实例新闻列表实例8.1.2 8.1.2 兼容问题兼容问题为了符合为了符合Web标准，制作完成的页面至少需要在标准，制作完成的页面至少需要在3个个主流浏览器（主流浏览器（IE 7、Fire

3、fox、IE 6）中进行测试。）中进行测试。1Firefox浏览器测试2IE 6浏览器测试8.2 8.2 制作排行榜制作排行榜排行榜是一个网站经常会使用到的元素。在网页中排行榜是一个网站经常会使用到的元素。在网页中设计一个信息统计的排行榜，用来统计某种信息总数的多少设计一个信息统计的排行榜，用来统计某种信息总数的多少。图是百度的搜索排行榜页面，里面包括了各种各样新颖独。图是百度的搜索排行榜页面，里面包括了各种各样新颖独特的排行榜。特的排行榜。 8.3 8.3 制作自定义图片项目符号的列表制作自定义图片项目符号的列表有时候，有时候，CSS默认的列表效果并不能满足设计师对默认的列表效果并不能满足设

4、计师对于列表中项目符号的要求，需要用小一点的圆点，或是其他于列表中项目符号的要求，需要用小一点的圆点，或是其他更具代表性的图片箭头来作为项目符号。更具代表性的图片箭头来作为项目符号。8.3.1 8.3.1 使用列表符号样式属性制作列表使用列表符号样式属性制作列表首先来学习使用列表图片样式首先来学习使用列表图片样式list-style-image属性属性制作列表。下面分别讲解列表图片样式属性的使用方法和具制作列表。下面分别讲解列表图片样式属性的使用方法和具体实例应用。体实例应用。1列表图片样式属性语法结构2制作自定义图片项目符号的列表实例8.3.2 8.3.2 使用背景图片属性制作列表符号使用背

5、景图片属性制作列表符号虽然使用虽然使用list-style-image很容易能够达到目的，但很容易能够达到目的，但是也失去了一些常用特性，例如在是也失去了一些常用特性，例如在ul的各项属性中，并不能的各项属性中，并不能够精确控制图片替换的项目符号距文字的位置。如果有特殊够精确控制图片替换的项目符号距文字的位置。如果有特殊的要求，例如把项目符号作为一个结束符放置在列表项目的的要求，例如把项目符号作为一个结束符放置在列表项目的右边，就无能为力了。右边，就无能为力了。8.3.3 8.3.3 兼容问题兼容问题为了符合为了符合Web标准，制作完成的页面至少需要在标准，制作完成的页面至少需要在3个个主流浏

6、览器（主流浏览器（IE 7、Firefox、IE 6）中测试。）中测试。1Firefox浏览器测试2IE 6浏览器测试8.4 8.4 使用使用CSSCSS改变列表排版改变列表排版CSS的强大功能，不仅仅在于它能够定义网页的样的强大功能，不仅仅在于它能够定义网页的样式，它还能实现网页的结构与表现的分离（可以通过式，它还能实现网页的结构与表现的分离（可以通过CSS任任意更改表现样式，而不改变结构）。意更改表现样式，而不改变结构）。在一段文本中，使用列表来辅助排版，能使阅读更在一段文本中，使用列表来辅助排版，能使阅读更加轻松。列表元素一直都是一种便于阅读与理解的排版形式加轻松。列表元素一直都是一种便

7、于阅读与理解的排版形式，但是有时候排好的列表因为某些文章要求而不得不改变阅，但是有时候排好的列表因为某些文章要求而不得不改变阅读形式，这就需要直接把列表变为段落。读形式，这就需要直接把列表变为段落。8.5 8.5 列表缩进排版列表缩进排版列表样式不仅可以使用列表项目符号来制作，还可列表样式不仅可以使用列表项目符号来制作，还可以通过缩进排版来实现。本节将介绍使用文本缩进属性控制以通过缩进排版来实现。本节将介绍使用文本缩进属性控制段落的排版。段落的排版。8.5.1 8.5.1 制作实例制作实例制作列表缩进排版需要使用文本缩进属性制作列表缩进排版需要使用文本缩进属性text-indent来进行样式编

8、写，下面分别讲解文本缩进属性的使用来进行样式编写，下面分别讲解文本缩进属性的使用方法和具体实例应用。方法和具体实例应用。1文本缩进属性语法结构2制作列表缩进排版的实例8.5.2 8.5.2 兼容问题兼容问题为了符合为了符合Web标准，制作完成的页面至少需要在标准，制作完成的页面至少需要在3个个主流浏览器（主流浏览器（IE 7、Firefox、IE 6）中测试。）中测试。1Firefox浏览器测试2IE 6浏览器测试8.6 8.6 复杂列表排版复杂列表排版列表的设计可简可繁，而网站上的大部分列表应用列表的设计可简可繁，而网站上的大部分列表应用都以简单为主，主要为了显示一些标题，但是也会出现一些都

9、以简单为主，主要为了显示一些标题，但是也会出现一些较复杂的应用。本节将介绍非常有特点的列表应用，制作这较复杂的应用。本节将介绍非常有特点的列表应用，制作这个实例用到一个个实例用到一个CSS属性，就是属性，就是overflow属性，首先了解一属性，首先了解一下这个属性的使用方法。下这个属性的使用方法。8.6.1 overflow8.6.1 overflow属性语法结构属性语法结构overflow属性是用来设置当元素的内容溢出其区域属性是用来设置当元素的内容溢出其区域时发生的事情，语法结构如下。时发生的事情，语法结构如下。overflow: visible | hidden | scroll | auto8.6.2 8.6.2 制作实例制作实例设计一个畅销书排行榜的列表，首先进行需求分析设计一个畅销书排行榜的列表，首先进行需求分析，再进行具体制作。，再进行具体制作。1需求分析2制作步骤8.6.3 8.6.3 兼容问题兼容问题这个复杂列表的实例，使用了过多的这个