在网页的网站名字或者题目链接处用css的方法,使得在点击这些链接时,被点击的链接有下沉的效果,让网页更具动感,增强用户体验。
实现的方法很简单,只要给a的active定义css就好了,如下例子:
#logo a{position:relative;display:block;width:240px;height:44px;background:#333;}
#logo a:active{top:1px;left:1px;zoom:1;}
上面css比较关键的地方在position:relative;没有这个就出不来效果。配上html就可以测试了。
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="content-type" content="text/html;charset=uft-8">
<META NAME="Description" CONTENT="">
<style>
#logo a{position:relative;width:240px;height:44px;background:#333;display:block;}#logo a:active{top:1px;left:1px;zoom:1;}
</style>
</HEAD>
<BODY>
<div id="logo"><a href="/">ggg</a></div>
</BODY>
</HTML>
上面的方法ie6下效果不大好,jquery就不会有不兼容的问题。当然,可以把css中的active换成hover……这个用的人比较多就不说了。
THE END






