关闭

简单的链接向右下凹陷效果

472人阅读 评论(0) 收藏 举报

  链接的效果可以被广大且有才的同学们做成漂亮的乱七八糟,所以我就不再在“漂亮”上较真了:)

  重新把曾经一段时间被人们喜爱的“向右下凹陷”的链接效果整理了一下,当个回忆也好...

  [演示地址:http://www.doyoe.com/model/xhtmlcss/style/a.htm

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=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>链接向右下凹陷的效果</title>
<style type="text/css">
body {
 margin:100px;
 font:12px/180% "宋体";
}
fieldset {width:200px;border:1px solid #bbb;border-top-width:3px;}
a:hover {position:relative;top:1px;left:1px;}
a.un:hover,a.nu,a.nn {text-decoration:none;}
a.nu:hover {text-decoration:underline;}
</style>
</head>
<body>
<fieldset><legend>链接向右下凹陷</legend>
<ul>
 <li><a href="">测试链接向右下凹陷的效果</a></li>
 <li><a class="un" href="">测试链接向右下凹陷的效果</a></li>
 <li><a class="nu" href="">测试链接向右下凹陷的效果</a></li>
 <li><a class="nn" href="">测试链接向右下凹陷的效果</a></li>
</ul>
</fieldset>
</body>
</html>

  看到例子,就不需要解释原理了,很简单:)  

 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:48535次
    • 积分:1003
    • 等级:
    • 排名:千里之外
    • 原创:47篇
    • 转载:0篇
    • 译文:0篇
    • 评论:9条
    文章分类
    最新评论
    飘零雾雨的相关链接