查看完整版本: 实现超链接类似按钮陷下的效果

习斋 2007-3-10 00:22

实现超链接类似按钮陷下的效果

超链接的hover状态,通常可以改变颜色,增加或去除下划线等效果来提醒访客。我们也看到过有一些文字链接,当鼠标移上去时

(hover状态)产生位移,类似于按钮陷下的效果,这该如何实现其实是应用了position属性: position: relative; top:1px;

left:1px; 这段代码的含义为,相对定位,距上部位移1象素,距左部位移1象素。我们可以将上面的代码加入到超链接的hover状态

中,就实现了类似按钮陷下的效果。



[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现超链接类似按钮陷下的效果</title>
<style type="text/css">
<!--
img {border:none}
a {
text-decoration:none;
color:#c00;
}
a:hover {
position: relative; top:1px; left:1px;
color:#666;
}
-->
</style>
</head>
<body>
<a href="#"><img src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif" ></a>
</p>
</body>
</html> [/code]
页: [1]
查看完整版本: 实现超链接类似按钮陷下的效果