第8章 使用CSS制作列表.ppt

第8章 使用CSS制作列表 列表元素是网页设计中使用频率非常高的元素，在大多数的网站设计上，无论是新闻列表，还是产品，或者是其他内容，均需要以列表的形式来体现。 列表形式在网站设计中占有很大比重，信息的显示非常整齐直观，便于用户理解与点击。从网页出现到现在，列表元素一直是页面中非常重要的应用形式。 8.1 制作新闻列表 新闻列表是一个网站的重要组成元素。对新闻列表使用标题，可以突出显示很重要的信息。新闻列表既可以是基于文本的内容，也可以是指向现有新闻项目的链接（例如新闻服务上的文章）。 8.1.1 制作实例 新闻列表实例 8.1.2 兼容问题 为了符合Web标准，制作完成的页面至少需要在3个主流浏览器（IE 7、Firefox、IE 6）中进行测试。 1．Firefox浏览器测试 2．IE 6浏览器测试 8.2 制作排行榜 排行榜是一个网站经常会使用到的元素。在网页中设计一个信息统计的排行榜，用来统计某种信息总数的多少。图是百度的搜索排行榜页面，里面包括了各种各样新颖独特的排行榜。 8.3 制作自定义图片项目符号的列表 有时候，CSS默认的列表效果并不能满足设计师对于列表中项目符号的要求，需要用小一点的圆点，或是其他更具代表性的图片箭头来作为项目符号。 8.3.1 使用列表符号样式属性制作列表 首先来学习使用列表图片样式list-style-image属性制作列表。下面分别讲解列表图片样式属性的使用方法和具体实例应用。 1．列表图片样式属性语法结构 2．制作自定义图片项目符号的列表实例 8.3.2 使用背景图片属性制作列表符号 虽然使用list-style-image很容易能够达到目的，但是也失去了一些常用特性，例如在ul的各项属性中，并不能够精确控制图片替换的项目符号距文字的位置。如果有特殊的要求，例如把项目符号作为一个结束符放置在列表项目的右边，就无能为力了。 8.3.3 兼容问题 为了符合Web标准，制作完成的页面至少需要在3个主流浏览器（IE 7、Firefox、IE 6）中测试。 1．Firefox浏览器测试 2．IE 6浏览器测试 8.4 使用CSS改变列表排版 CSS的强大功能，不仅仅在于它能够定义网页的样式，它还能实现网页的结构与表现的分离（可以通过CSS任意更改表现样式，而不改变结构）。 在一段文本中，使用列表来辅助排版，能使阅读更加轻松。列表元素一直都是一种便于阅读与理解的排版形式，但是有时候排好的列表因为某些文章要求而不得不改变阅读形式，这就需要直接把列表变为段落。 8.5 列表缩进排版 列表样式不仅可以使用列表项目符号来制作，还可以通过缩进排版来实现。本节将介绍使用文本缩进属性控制段落的排版。 8.5.1 制作实例 制作列表缩进排版需要使用文本缩进属性text-indent来进行样式编写，下面分别讲解文本缩进属性的使用方法和具体实例应用。 1．文本缩进属性语法结构 2．制作列表缩进排版的实例 8.5.2 兼容问题 为了符合Web标准，制作完成的页面至少需要在3个主流浏览器（IE 7、Firefox、IE 6）中测试。 1．Firefox浏览器测试 2．IE 6浏览器测试 8.6 复杂列表排版 列表的设计可简可繁，而网站上的大部分列表应用都以简单为主，主要为了显示一些标题，但是也会出现一些较复杂的应用。本节将介绍非常有特点的列表应用，制作这个实例用到一个CSS属性，就是overflow属性，首先了解一下这个属性的使用方法。 8.6.1 overflow属性语法结构 overflow属性是用来设置当元素的内容溢出其区域时发生的事情，语法结构如下。 overflow: visible | hidden | scroll | auto 8.6.2 制作实例 设计一个畅销书排行榜的列表，首先进行需求分析，再进行具体制作。 1．需求分析 2．制作步骤 8.6.3 兼容问题 这个复杂列表的实例，使用了过多的CSS样式和较多的浮动等定位样式，所以出现不同浏览器兼容问题的可能性就会增大。现在在IE 6和Firefox浏览器中进行调试。 1．Firefox浏览器测试 2．IE 6浏览器测试