信手拈来 妙手偶得 » 日志 » 【整理】CSS实现的水平导航条
【整理】CSS实现的水平导航条
Junglesong 发表于 2008-02-14 17:31:51
效果图：
页面代码：
CSS代码：
页面代码：
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#" id="current">次页</a></li>
<li><a href="#">三页</a></li>
<li><a href="#">四页</a></li>
<li><a href="#">五页</a></li>
</ul>
<li><a href="#">首页</a></li>
<li><a href="#" id="current">次页</a></li>
<li><a href="#">三页</a></li>
<li><a href="#">四页</a></li>
<li><a href="#">五页</a></li>
</ul>
CSS代码：
#nav{
margin:0;
height: 26px;
border-bottom:1px solid #2788da;
}
#nav li{
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color:#ececec;
margin-left:2px;
}
#nav li a:hover{
background-color:#bbbbbb;
color:#ffffff;
}
#nav li a#current{
background-color:#2788da;
color:#ffffff;
}
以上。
margin:0;
height: 26px;
border-bottom:1px solid #2788da;
}
#nav li{
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color:#ececec;
margin-left:2px;
}
#nav li a:hover{
background-color:#bbbbbb;
color:#ffffff;
}
#nav li a#current{
background-color:#2788da;
color:#ffffff;
}
收藏:
QQ书签
del.icio.us
订阅:
Google
抓虾