首页 > > 网页制作 > css >

入门：用CSS实现网页超链接类似按钮陷下的效果

2008-02-23 08:44:09来源：互联网阅读 ()

　　超链接的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">  </style> </head> <body> <a href="http://www.webjx.com/">www.webjx.com</a><br /><br /> <a href="http://www.webjx.com/"><img src="/info/upimg/allimg/080403/2245470.gif" alt="webjx_com" title="www.webjx.com"></a> </p> </body> </html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]