入门：用CSS实现网页超链接类似按钮陷下的效果
[ 来路：21kn.com 时间：2007-7-7 21:13:31 点击： ]
超链接的hover状态，通常可以改变颜色，增加或去除下划线等效果来提醒访客。我们也看到过有一些文字链接，当鼠标移上去时（hover状态）产生位移，类似于按钮陷下的效果，这该如何实现呢？
其实是应用了position属性，关于此属性，可以参考这里。
图片的按钮陷下效果制作原理是一样的。我们看下面的代码：
position: relative; top:1px; left:1px;
这段代码的含义为，相对定位，距上部位移1象素，距左部位移1象素。我们可以将上面的代码加入到超链接的hover状态中，就实现了类似按钮陷下的效果。
我们看下面的实例：
<!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>www.21kn.com</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="http://www.21kn.com/">www.21kn.com</a><br /><br /><a href="http://www.21kn.com/"><img src="http://www.21kn.com/Files/BeyondPic/2007-7/7/077721133191161.gif" alt="webjx_com" title="www.21kn.com"></a></p></body></html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
：：：：站长友情提示：多花一分钟学点什么都好：：：：
上一篇：CSS实现排版段落前面空两个字，不使用空格 下一篇：总结：CSS网页布局兼容性有哪些要点与诀窍？
= = 免责声明 = =
① 欢迎转载我网所刊信息，请注明“来源：E天下网络”。 ② 凡本网注明“来源：XXX（非E天下网络）”的作品，均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的，请在30日内进行。 ※联系方式：Airtofly@163.com
：：推荐文章：：
：：图像设计：：
Copyright © 2007 21kn.com Inc. All rights reserved.e天下网络工作室
网站白天客服QQ：26875416 (非24小时) 合作QQ：597004688 粤ICP备06026423号
