<!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="#"><span> </span>air accessory kit</a></li>
<li><a href="#"><span> </span>air blow gun</a></li>
<li><a href="#"><span> </span>air chuck</a></li>
<li><a href="#"><span> </span>connector</a></li>
<li><a href="#"><span> </span>hardware assortment</a></li>
<li><a href="#"><span> </span>hose</a></li>
<li><a href="#"><span> </span>plastic coupler</a></li>
<li><a href="#"><span> </span>quick coupler</a></li>
<li><a href="#"><span> </span>tire inflator</a></li>
<li><a href="#"><span> </span>vavle</a></li>
</ul>
</div>
</body>
</html>
布丁足迹
千里始足下，高山起微尘，吾道亦如此，行之贵日新。
2008-7-21 23:53:48导航栏效果不错
Tags: 导航 css菜单
发布:pjwhl | 分类:设计路上 | 评论:0 | 引用:0 | 浏览:
- 相关文章:
宣传推广栏
评论之星★★★☆
宣传推广栏
完全随机文章
最新评论及回复
最近留言
网站收藏
网站收藏
