div+css立体超链接标题栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#menu{
 width:9em;
 margin:0px auto;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 border:solid 1px #aaa;
 }
#menu a,#menu a:visited{
         display:block;
   text-decoration:none;
   color:#000;
   line-height:1.4em;
   height:1em;
   border:0.5em solid #fff;}
#menu a:hover{
     color:#FFF;
     background-color:#aaa;
     border-left-color:#aaa;
     border-right-color:#aaa;
     border-bottom-color:#ddd;
     border-right-color:#ddd;}
</style>
</head>

<body>
<div id="menu">
<a href="#">Home</a>
<a href="#">Contact us</a>
<a href="#">Web dev</a>
<a href="#">Web design</a>
<a href="#">Map</a>
</div>
</body>
</html>

posted @ 2011-09-29 10:09  潇墓  阅读(547)  评论(0)    收藏  举报