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

最新推荐文章于 2017-06-04 02:46:18 发布

飘零雾雨

最新推荐文章于 2017-06-04 02:46:18 发布

阅读量679

点赞数

分类专栏： CSS 文章标签：测试 class xhtml html

本文链接：https://blog.csdn.net/storm0/article/details/1806001

版权

CSS 专栏收录该内容

43 篇文章 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>