HTML5+CSS3+JavaScript 从入门到项目实践(超值版)
上QQ阅读APP看书,第一时间看更新

7.5 使用CSS样式美化超链接

人们浏览网页时,会发现网页中超链接的样式是各种各样的,本节使用CSS样式来美化超链接。

7.5.1 定义按钮式超链接样式

本案例是将超链接设计成按钮的样式,具体的CSS样式请参考案例中的代码以及其中的注释。

【例7-6】(实例文件:ch07\Chap7.6.html)按钮式链接样式。

相关的代码实例请参考Chap7.6.html文件,在IE浏览器中运行的结果如图7-10所示。

图7-10 定义按钮式超链接样式

7.5.2 定义立体超链接样式

对于链接样式,把超链接的外观设计成立体的,给人一种忍不住想点击的感觉。本案例是通过设计边框的不同颜色来实现的。

【例7-7】(实例文件:ch07\Chap7.7.html)立体链接样式。

相关的代码实例请参考Chap7.7.html文件,在IE浏览器中运行的结果如图7-11所示。

图7-11 定义立体超链接样式

7.5.3 定义文章中的超链接样式

在浏览一些网页时,有时会出现不一样颜色字体的文字,这些文字都可以超链接。本案例在诗歌中的一些关键词上加了超链接,并美化了超链接的样式。

【例7-8】(实例文件:ch07\Chap7.8.html)定义文章中的超链接。

相关的代码实例请参考Chap7.8.html文件,在IE浏览器中运行的结果如图7-12所示。当把鼠标指针悬浮到“李清照”超链接上时,样式变化效果如图7-13所示。

图7-12 页面加载完效果

图7-13 悬浮时超链接的样式效果

7.5.4 定义图像交换超链接样式

在浏览页面时,有时当把鼠标指针悬浮到超链接上面时,会发现换了一张背景图片,和精灵图很像。本案例是给超链接设置一张大的背景,通过background-position来定位图片位置。

【例7-9】(实例文件:ch07\Chap7.9.html)图片交换链接样式。

相关的代码实例请参考Chap7.9.html文件,在IE浏览器中运行的结果如图7-14和图7-15所示。

图7-14 页面加载完效果

图7-15 鼠标指针悬浮时超链接的样式效果