css|按钮|链接|网页
超链接的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.webjx.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.webjx.com/">www.webjx.com</a><br /><br /><a href="http://www.webjx.com/"><img src="/UploadPic/2007-7/200777202523877.gif" alt="webjx_com" title="www.webjx.com"></a></p></body></html>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]