《网页设计技术css篇08》由会员分享，可在线阅读，更多相关《网页设计技术css篇08（20页珍藏版）》请在金锄头文库上搜索。
1、1,第8章 设计具有特色的超链接效果,本章导读:为了把Internet上众多的网站和网页联系起来，构成一个整体， 就要在网页中加入链接，通过单击网页上的链接才能找到自己所需 的信息。正是因为有了网页之间的链接才形成了这纷繁复杂的网络 世界。本章的重点是掌握超链接标记，背景色变换链接、图像翻转 链接、边框变换链接等，最后通过典型实例讲述了各种超链接特殊 效果的创建。,了解超链接的基本概念 熟悉链接标记 掌握各种形式的超链接的创建,本章学习目的：,2,链接是从一个网页或文件到另一个网页或文件的链接，包括图像或多媒体文件，还可以指向电子邮件地址或程序。,3,8.1 超链接基础,CSS提供了4种a对象
2、的伪类，它表示链接的4种不同状态，即link（未访问的链接）、visited（已访问的链接）、active（激活链接）、hover（鼠标停留在链接上），分别对这4种状态进行定义，就完成了对超链接样式的控制。,4,8.2 链接标记,a:link表示未访问过的链接的状态，如图所示。,5,8.2.1 a:link,a:visited表示超链接被访问过后的样式，对于浏览器而言，通常都是访问过的链接比没有访问过的链接颜色稍浅，以便提示浏览者该链接已经被单击过。,6,8.2.2 a:visited,a:active表示超链接的激活状态，用来定义鼠标单击链接但还没有释放之前的样式。,7,8.2.3 a:ac
3、tive,有时需要对一个网页中的链接文字做不同的效果，并且让鼠标移上时也有不同效果。a:hover指的是当鼠标移动链接上时的样式。,8,8.2.4 a:hover,超链接在本质上属于网页的一部分，它是一种允许同其他网页或站点之间进行链接的元素，各个网页链接在一起后，才能真正构成一个网站。链接样式的美观与否直接关系到网站的整体品质。,9,8.3 各种形式的超链接,下面使用CSS制作一个背景色变换的超链接 ，效果如图所示。,10,8.3.1 背景色变换链接,CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，可以让单调的网页链接下划线变得丰富多彩。,11,8.3.2 多姿多彩的
4、下划线链接,采用CSS可以制作图像翻转链接，其制作原理就是a:link和a:hover在不同状态下，利用background-images显示不同的图像制作而成。,12,8.3.3 图像翻转链接,框变换链接时指当鼠标指针经过链接时改变链接对象边框的样式，包括边框颜色、样式和边框宽度。 在网边页中可能会经常用边框变换链接的效果，在传统的做法中，这一效果的实现是比较困难或繁琐的，现在通过CSS实现鼠标移至链接图片，边框发生变换的效果，是非常容易的。,13,8.3.4 边框变换链接,现代网页制作离不开CSS技术，采用CSS技术，可以有效地对页面链接实现更加精确的控制。用CSS不仅可以做出令浏览者赏心
5、悦目的网页，还能给网页添加许多特效。,14,8.4 实战演练,在默认状态下，Windows定义了一套鼠标指针图标移动到不同功能区、执行不同的命令或系统处于不同的状态。在网页中往往只有当鼠标在超级链接上时才显示为手形，在其他地方似乎没有什么变化，不过使用CSS样式可以自由定义各种鼠标样式。,15,实例使用CSS实现鼠标指针形状改变,一般在网页中看到的有边框装饰的文字，做法通常是将文字制作成图片，或者再加上随鼠标指针变换的效果。可以使用CSS语法，不用经过这些麻烦的制图手续，就可以轻松制作不同样式的文字边框，甚至也能加上超链接效果。,16,实例2为超链接文字加上质感边框,使用CSS可以制作鼠标指针移到链接文字上时改变文字大小或颜色， 如图所示。,17,实例3鼠标指针移到链接文字上时改变文字大小或颜色,如果要让网页在鼠标移动到超链接上时，旁边出现提示文字，一般网页的做法都是采用JavaScript语法，其实，使用CSS也可以实现这种效果 。,18,实例4给超链接添加提示文字,如果想在网页中添加按钮的链接，最快的方法就是在Dreamweaver的表单按钮，然而做出来的按钮都是固定的样式，无法改变造型或颜色，可以利用边框样式语法，来模拟不同的按钮的效果。,19,实例5文本超链接模拟按钮效果,Thank You !,
