第8章用CSS控制超链接.ppt

《第8章用CSS控制超链接.ppt》由会员分享，可在线阅读，更多相关《第8章用CSS控制超链接.ppt（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第8 8章章 用用CSSCSS控制超链接样式控制超链接样式 超链接是指从一个网页指向一个目标的连接关系，这个目标超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。在网页中能成为超链接的元素可以是一段文本或者是一个图片。在网页中能成为超链接的元素可以是一段文本或者是一个图片。当浏览者选择已经链接的文字或图片后。当浏览者选择已经链接的文字或图片后,链接目标将显示在浏览链接

2、目标将显示在浏览器上，并且根据目标的类型来打开或运行。器上，并且根据目标的类型来打开或运行。本章内容包括：本章内容包括：使用伪类改变超链接的基本样式使用伪类改变超链接的基本样式 制作虚线下划线的超链接制作虚线下划线的超链接 使用超链接来制作一个排行榜使用超链接来制作一个排行榜 实现超链接的翻转效果实现超链接的翻转效果 制作一个实用的工具栏制作一个实用的工具栏8.1 8.1 改变超链接的基本样式改变超链接的基本样式网页上的超链接通常是文字或者图片网页上的超链接通常是文字或者图片代码：代码：新浪首页新浪首页a:linkcolor:green;a:active color:red;a:visited

3、 color:orange;a:hovercolor:blue;8.2 8.2 丰富超链接的表现形式丰富超链接的表现形式 网页中的超链接往往具有非常丰富的表现形式。综合网页中的超链接往往具有非常丰富的表现形式。综合应用文字和图片能使超链接的样式产生多种变化。应用文字和图片能使超链接的样式产生多种变化。8.2.1 8.2.1 超链接背景图的巧妙运用超链接背景图的巧妙运用 为了提高用户的注意，提供点击率，在网页中的超链为了提高用户的注意，提供点击率，在网页中的超链接常常使用一些引人瞩目的图片来修饰。通常将这些图片作接常常使用一些引人瞩目的图片来修饰。通常将这些图片作为背景图插入到超链接中。为背景图

4、插入到超链接中。本节提供两个小的实例来讲述如何巧妙地设置超链接本节提供两个小的实例来讲述如何巧妙地设置超链接的背景图。的背景图。1制作虚线下划线制作虚线下划线 例例8-12制作排行榜制作排行榜 例例8-28.2.2 8.2.2 超链接翻转效果超链接翻转效果 除了能给除了能给a标签设置背景图，也能给超链接的伪类设置标签设置背景图，也能给超链接的伪类设置背景图。若给背景图。若给a:hover设置背景图，那么当鼠标滑过该超链设置背景图，那么当鼠标滑过该超链接就能使图片产生翻转效果。本小节中包含两个小实例，第接就能使图片产生翻转效果。本小节中包含两个小实例，第一个实例使用简单的背景颜色实现翻转，第二个

5、实例使用背一个实例使用简单的背景颜色实现翻转，第二个实例使用背景图片实现翻转。景图片实现翻转。1使用背景颜色实现的翻转效果使用背景颜色实现的翻转效果 例例8-32使用背景图片实现的翻转效果使用背景图片实现的翻转效果 例例8-48.3 8.3 本章实例：制作实用工具栏本章实例：制作实用工具栏 网页的左边栏或者右边栏通常会放置实用的工具栏。网页的左边栏或者右边栏通常会放置实用的工具栏。在工具栏里放置许多常被用户点击的热门标签（在工具栏里放置许多常被用户点击的热门标签（tag）和实）和实用的网址链接。在实用工具栏中用户可以方便地查找到需要用的网址链接。在实用工具栏中用户可以方便地查找到需要的信息。的

6、信息。本章实例将讲解如何实用制作一个实用工具栏。在该本章实例将讲解如何实用制作一个实用工具栏。在该实用工具栏中，大部分都是单一的超链接，但巧妙地运用实用工具栏中，大部分都是单一的超链接，但巧妙地运用CSS样式能使工具栏外观简洁而精美。样式能使工具栏外观简洁而精美。步骤：步骤：1.新建一个文件夹名为新建一个文件夹名为chapter8，在该文件夹中新建一个标，在该文件夹中新建一个标准准XHTML文档，命名为文档，命名为index.html。然后再新建一个。然后再新建一个images文件夹，用于存放图片。为了兼容大部分浏览器，文件夹，用于存放图片。为了兼容大部分浏览器，要把整个网页的边距和补白初始值

7、都设置为要把整个网页的边距和补白初始值都设置为0.实用工具栏实用工具栏由两部分组成：一个是标签组，一个实用工具组。在由两部分组成：一个是标签组，一个实用工具组。在XHTML文档中使用两个文档中使用两个div 标签来分块。第一个标签来分块。第一个div用于用于嵌入标签组的部分，第二个嵌入标签组的部分，第二个div用于实用工具组的部分。用于实用工具组的部分。为标签组指定一个类选择器为标签组指定一个类选择器tag，为实用工具组指定一个，为实用工具组指定一个类选择器类选择器tools。2.设置设置div标签的标签的width属性来限定属性来限定div标签的宽度，然后设标签的宽度，然后设置置margin

8、属性拉开两个属性拉开两个div标签的距离。在第一个标签的距离。在第一个div标标签组中插入内容。设置签组中插入内容。设置h4和超链接的方式。和超链接的方式。3.每个超链接之间的空隙非常小，为了拉开每个超链接的距每个超链接之间的空隙非常小，为了拉开每个超链接的距离，设置其右边距为离，设置其右边距为10px。由于设置了。由于设置了div 标签的宽度为标签的宽度为300px，所以每行超链接的总宽度超过，所以每行超链接的总宽度超过300px就会换行，就会换行，但会造成同一个超链接的文字被分列在两行，设置但会造成同一个超链接的文字被分列在两行，设置white-space属性为属性为nowrap。4.实用

9、工具组包括七个实用工具，在实用工具组的实用工具组包括七个实用工具，在实用工具组的div 标签标签中嵌入七个超链接，为每个超链接指定一个中嵌入七个超链接，为每个超链接指定一个ID选择器，使选择器，使用用ID选择器添加每个工具的背景图。选择器添加每个工具的背景图。5.为将背景图完全显示出来，要设置超链接的为将背景图完全显示出来，要设置超链接的display属性属性为为block，同时设置超链接左补白为，同时设置超链接左补白为50px。在超链接中使。在超链接中使用了用了p标签来嵌入工具的使用说明，要设置标签来嵌入工具的使用说明，要设置p标签的样式。标签的样式。8.4 8.4 常见面试题常见面试题问题

10、问题1：制作超链接的背景图时，是否一定要设置其宽高？：制作超链接的背景图时，是否一定要设置其宽高？问题问题2：是不是所有标签都能设置成超链接？：是不是所有标签都能设置成超链接？8.5 8.5 小结小结本章讲解了使用本章讲解了使用CSS样式来美化页面中的超链接。超链接的样式来美化页面中的超链接。超链接的伪类共有四个，分别是伪类共有四个，分别是link、hover、visited和和active。设。设置超链接的伪类的样式能提高网页的用户体验。置超链接的伪类的样式能提高网页的用户体验。本章利用两个小实例来讲解如何制作超链接的背景图和翻转本章利用两个小实例来讲解如何制作超链接的背景图和翻转效果。效果。本章的重点是如何设置和美化超链接样式。本章的重点是如何设置和美化超链接样式。本章的难点是对超链接属性和超链接伪类的理解。本章的难点是对超链接属性和超链接伪类的理解。下一章将介绍使用下一章将介绍使用CSS控制列表样式的方法。控制列表样式的方法。