首页 > 代码库 > 6.1 超链接特效
6.1 超链接特效
一、动态超链链 二、按钮式超链接 三、CSS控制鼠标指针 四、浮雕背景超链接 五、超链接下划线动画 在掌握了CSS布局的基本方法和原理之后，接下来的几章将针对页面中非常重要的部分“链接与导航”进行专门的介绍。本章对链接本身以及通常用于网页导航的HTML结构进行介绍。在后面的章节中再分专题分别讲解。 超链接是网页上最普通不过的元素，通过超链接能够实现页面的跳转、功能的激活等，因此超链接也是与用户打交道最多的元素之一。本节主要介绍超链接的各种效果，包括超链接的各种状态、伪类和按钮特效等。 一、动态超链接 在HTML语言中，超链接是通过标记<a>来实现的，链接的具体地址则是利用<a>标记的href属性，代码如下所示：
在默认的浏览器测览方式下，超链接统一为蓝色并且有下划线，被点击过的超链接则为紫色并且也有下划线。 这种最基本的超链接样式现在已经无法满足广大设计师的需求。通过css可以设置超链接的各种属性，而且通过伪类别还可以制作很多动态效果。首先用最简单的方法去掉超链接的下划线，代码如下所示：
此时无论是超链接本身。还是点击过的超链接，下划线都被去掉了，除了颜色以外，与普通的文字没有多大区别。 仅仅通过设置标记<a>的样式来改变超链接，并没有太多动态的效果，下面来介绍利用CSS的伪类别(Anchor Pseudo Classes)来制作动态效果的方法，具体属性设置如下表所示。lodidance.com
注意：CSS就是通过以上4个伪类别，再配合各种属性风格制作出千变万化的动态超链接的。这里必须指出几点要特别注意的问题。 (1) 对于这4个伪类别，要注意它们的声明顺序。例如，为了使平常状态越级链接取消下划线，而在鼠标指针经过时出现下划线，可以如下设置：
但是如果交换上面两行代码的顺序，对鼠标指针经过时的设置将不会产生效果。这是由于前面讲过的“层叠”的原因，上面的这些CCSS规则其有两样的特殊性，因此后面的规则将覆盖前面的规则，要按照上面的顺序来进行设置。 (2) a:link与a设置的都是链接在没有鼠标指针经过时的效果，那么它们是否完全等效呢？通常情况下二者是没有区别的，但是严格来说，在个别情况下两者有所区别，在一个a标记没有设置跳转地址（即href属性）时，如果设置a:link则无效．而设置a则仍然有效。在实际工作中，经常使用：
而不用：
(3) 当前激活状态“a:active”一般被显示的情况非常少，因此很少使用。因为当浏览者单击一个超链接后，焦点很容易就会从这个链接上转移判其他地方，例如新打开的窗口等，此时该超链接就不再是“当前激活”状态了。因此，通常无需设置a:active的样式。 返回顶部 二、按钮式超链接 除了简单的文字颜色、下划线之外，对链接还可以设置各种属性，产生丰富多彩的效果。例如很多网页上的超链接都制作成各种按钮的效果，这些效果大都采用了各种图片。本节仅通过CSS的普通属性来模拟按钮的效果，如图1所示。  图1 按钮式超链接 本案例文件位于网页学习网CSS教程资源中“第6章\01\button-style.htm”。 ① 首先建立最简单的菜单结构，本例直接采用<a>标记排列的形式，代码如下所示：lodidance.com
此时页面的效果仅是几个普通的超链接堆砌。 ② 然后对<a>标记进行整体控制，同时加入CSS的3个伪属性。对于普通超链接和点击过的超链接采用相同的样式，并且利用边框的样式模拟按钮效果。而对于鼠标指针经过时的超链接，相应地改变文字颜色、背景色、位置和边框，从而模拟出按钮“按下去”的特效，样式代码如下：
上面的样式代码中首先设置了<a>标记的整体样式，即超链接所有状态下通用的样式，然后通过对3个伪属性的颜色、背景色和边框的修改．模拟了按钮的特效。最终显示效果如图1所示。 返回顶部 三、CSS控制鼠标指针 在浏览网页时，通常看到的鼠标指针的形状有箭头．手形和I字形，而在Windows环境下实际看到的鼠标指针种类要比这个多得多。CSS弥补了HTML语言在这方面的不足，通过cursor属性可以设置各式各样的鼠标指针样式。 cursor属性可以在任何标记里使用，从而可以改变各种页面元素的鼠标指针效果，代码如下所示：
pointer是一个很特殊的鼠标指针值，它表示将鼠标设置为被激活的状态，即鼠标指针经过超链接时。该浏览器默认的鼠标指针样式在Windows中通常显示为手的形状。如果在一个网页中添加了以上语句，页面中任何位置的鼠标指针都将呈现手的形状。除了pointer之外，cursor还有很多定制好了的鼠标指针效果，如下表所示。
经验：表中的鼠标指针样式，在不同的机器或者操作系统显示时可能存在差异，读者可以根据需要适当选用。很多时候，浏览器调用的是操作系统的鼠标指针效果，因此同一用户浏览器之间的差别很小，但不同操作系统的用户之间还是存在差异的。 返回顶部 四、浮雕背景超链接 除了背景颜色和边框等传统css样式外，如果将背景图片也加入到超链接的伪属性中，就可以制作出更多绚丽的效果。本例通过超链接背景图片的变换，实现浮雕的效果，如图2所示。注意本例需要用IE浏览器调试，不要使用Firefox浏览器，因为这里用到了Firefox不支持的属性。  图2 浮雕式超链接 ① 首先用<table>标记搭建整个HTML框架，加入Banner图片、页面背景颜色和超链接的排列等，并且为两个表格添加CSS类别，以便设置样式，代码如下所示。
注意：在输入上面的代码时，相邻的“<a>”和“</a>”之间不要有空格，也不要换行，具体原因后面会讲解。 ② 制作浮雕的背景（宽度可以是1px）．作为超链接所在行的背景（本教程资源中提供）。设置为水平方向重复，代码如下所示。
③ 再制作一个宽度固定的按钮图片（这里为80px，button1.jpg），与浮雕背景完全一样，但是最左边有一道白色的竖线，作为按钮的背景图片。并添加到统一设置的<a>属性样式中，代码如下所示。
以上代码设置了超链接的高度和宽度等统一参数。此时页面的超链接部分可以看到作为按钮背景图片的button1.jpg，其左边的白竖线实现了按钮分割的效果。 ④ 再用同样的方法制作一个宽度跟button1.jpg-样，但是背景为深色浮雕的图片button2.jpg．图片最左边同样有竖直的白线，将其作为鼠标指针经过超链接时的背景。然后给超链接添加CSS伪类别，修改相应的文字颜色，代码如下所示。
通过变换鼠标指针经过超链接时的背景图片。就实现了超链接浮雕的效果，如前面的图2所示。 读者还可以根据自己的需要，制作各式各样的背景图片，从而实现各种不同的效果。关于这两个背景的制作方法，请参考网页学习网Fireworks或者Photoshop的相关教程，很简单的。 注意：这里还需要补充说明两点注意事项。 (1) 在本例中，各个链接之间是直接相邻的，在书写HTML的时候前一个</a>和它后面的<a>之间不要有空格，也不要在</a>和<a>之间换行，否则会出出现。在鼠标指针经过时，它的后面和下一项之问有一个空白。 (2) 在本例中所采用的方法在在Firefox中的显示效果并不理想，原因在于Firefox不支持直接设置<a>标记的高度和宽度。 如果希望能在所有的浏览器中都显示同样的浮雕效果，必须采用<ul>和<li>等项目列表的标记，这在下一节中将会详细介绍，本例的侧重点在于变换背景图片的设计思路。 返回顶部 五、超链接下划线动画 这里是一个有趣的特殊下划线效果，如图3所示，在这个链接文字的下面是一条会移动的虚线下划线。普通状态时，虚线向左移动，鼠标指针经过时，虚线向右移动。 本案例文件位于网页教学网CSS教程资源“第6章\03\ani-undcrline.htm”。  图3 动画下划线效果 这个案例中“会动”的下划线实际上并不是真的下划线，而是用背景图像来实现的。 ①首先准备两个动画GIF格式的图像，都是高2像素，宽4像素。第1个图像文件中有4帧。 当这些帧在动画GIF文件中循环显示的时候，就会出现跑马灯的移动效果，这个原理类似于平常在理发馆门口看到的转动圆筒。这个图像文件的制作方法这里就不介绍了，读者有兴趣可以参考网页学习网Fireworks或者Pbotoshop的相关教程，在本教程资源中有这个个文件，读者可以直接使用。 ② 第2个图像文件与第1个文件的内容相同，只是4帧的顺序不同，目的是为了实现相反的移动效果。lodidance.com ③ 接下来，页面的代码如下。
可以从这段非常简单的代码中看出，实现这个效果的关键就是对链接的不同伪类设置不同移动方向的背景图片。 返回顶部 点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表 | ||||||||||||||||||||||||||||||||||
| 编辑：网页学习网 | ||||||||||||||||||||||||||||||||||
| 本文地址:http://www.lodidance.com/css/jc/684.html |