HTMer

研究互联网络和电脑应用技术的IT技术网。 (勤奋+智慧→理想)

« 网页中通过设置meta标签属性值IE=EmulateIE7来兼容IE8IE9的方法Word中设置英文单词不自动换行的方法 »

CSS中用背景图片做为超链接的方法

    Web2.0时代,在网页设计中用背景图片做为超链接已成为主流,通过CSS的控制,使鼠标移到图片上能有很好的变换效果,虽然用普通的插入图片的方法也能实现效果,但用CSS更为方便,再配合css sprite,还能加快图片的加载。所以今天就向大家介绍CSS中用背景图片做为超链接的方法。

    实现这样的效果只需要直接在div中加上一个空的超链接,然后通过CSS来控制,CSS设置的关键是要加上display:block;和cursor:hand;这样鼠标移上去就会有超链接的感觉,如果你设计一个好看的背景的话效果真的不错,具体的代码如下所示,下面代码中为了方便理解,用到了两张背景图片,你也可以把图片做在一起,通过css sprite来控制:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS中用背景图片做为超链接的方法_HTMer</title>
<style type="text/css">
.htmer a{margin:0px;padding:0px;background:url(images/htmer_bg.jpg) no-repeat;display:block;width:87px;height:36px;cursor:hand;}
.htmer a:hover{background:url(images/htmer_bg_hover.jpg) no-repeat;}
</style>
</head>
<body>
<div class="htmer"><a href="http://www.htmer.com" target="_blank"></a></div>
</body>
</html>


欢迎转载,转载请注明:转载自HTMer [ http://www.htmer.com/ ]

本文链接地址:http://www.htmer.com/article/904.htm

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

HTMer , Powered By Z-Blog, 苏ICP备08003082号

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
HTM|HTML|ASP|PHP|JSP|Mysql|SQL|Dreamweaver|Flash|Fireworks|Photoshop|SEO Copyright www.HTMer.com. Some Rights Reserved. English Version