简单漂亮的导航栏效果

今天在网站偶然看到的一个效果，简单错位实现的导航。
感觉不错挺漂亮，给简单改造了一下，给需要的朋友，兼容IE6\IE7\FF。

效果：

<!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=gb2312" />
<title>简单漂亮的导航栏效果</title>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #000000;
color: #FFFFFF;
}
#LDH ul{
width: 180px;
}
#LDH li {
list-style:none;
margin-bottom: 1px;
text-align: left;
}
#LDH li a{
display:block;
line-height: 20px;
text-decoration: none;
height: 20px;
background-color: #FFCC00;
color: #000000;
}
#LDH li span {
display: block;
height: 20px;
width: 20px;
float: left;
background-color: #636563;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
margin-right: 12px;
}
#LDH li a:hover {
background-color: #FFD942;
margin-right: 1px;
}
#LDH li a:hover span {
background-color: #82837E;
width: 19px;
}
</style>
</head>
<body>
<div id="LDH">
<ul>
<li><a href="#"> air accessory kit</a></li>
<li><a href="#"> air blow gun</a></li>
<li><a href="#"> air chuck</a></li>
<li><a href="#"> connector</a></li>
<li><a href="#"> hardware assortment</a></li>
<li><a href="#"> hose</a></li>
<li><a href="#"> plastic coupler</a></li>
<li><a href="#"> quick coupler</a></li>
<li><a href="#"> tire inflator</a></li>
<li><a href="#"> vavle</a></li>
</ul>
</div>
</body>
</html>

提示：可以先在文本框内，根据需要修改代码后再运行

posted on 2008-07-21 11:30 JoeYoung 阅读(3493) 评论(4) 编辑收藏举报