闪客帝国 导航菜单样式代码
闪客帝国 导航菜单样式代码
<!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">
.navGroup{
width:590px;
margin:0 auto;
}
.navGroup li{
float:left;
text-decoration:none;
text-align:center;
margin:0;
list-style:none;
}
.navGroup li a{
font-size:12px;
display:block;
color:#FFDE00;
text-decoration:none;
text-align:center;
padding:5px 11px 1px 13px;
margin:0;
}
.navGroup li a:hover{
color:#CCFF66;
}
#nav1{
background-color:#7D7D7D;
border-top:1px solid #A5A5A5;
}
#nav1 a:hover{
background-color:#727272;
}
#nav2{
background-color:#333333;
}
#nav2 a:hover{
background-color:#393939;
}
.noArrow a{
background-image:none;
}
</style>
</head>
<body>
<ul id="nav1" class="navGroup">
<li class="noArrow"><a href="#">首 页</a></li>
<li><a href="#">咨 询</a></li>
<li><a href="#">爬行榜</a></li>
<li><a href="#">影 院</a></li>
<li><a href="#">精 英</a></li>
<li><a href="#">加油站</a></li>
<li><a href="#">学 堂</a></li>
<li><a href="#"><span class="colorYellow">五周年</span></a></li>
<li><a href="#">交流论坛</a></li>
</ul>
<ul id="nav2" class="navGroup">
<li class="noArrow"><a href="/user/">会员秀</a></li>
<li><a href="#"><span class="colorLime">点击书</span></a></li>
<li><a href="#">Flash MV</a></li>
<li><a href="#">名人聊</a></li>
<li><a href="#"><span class="colorYellow">金闪客</span></a></li>
<li><a href="#">闪客文学</a></li>
<li><a href="#">教 程</a></li>
<li><a href="#">有问必答</a></li>
<li><a href="#">闪客院线</a></li>
</ul>
</body>
</html>
- 上一篇：163文章评论效果
- 下一篇：css 伪类――动态链接
