信手拈来 妙手偶得 » 日志 » 【原创】CSS实现的水平导航条
【原创】CSS实现的水平导航条
Junglesong 发表于 2008-04-05 15:03:40
效果图：
页面代码：
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;
}
曾经的这一天...
- » 2007年: 【转贴】表格特效整理
- » 2007年: 【整理】使用CSS隐藏和显式页面单元
- » 2007年: 【转贴】曾国藩语录
- » 2007年: 【转贴】中国古代百句经典名言
- » 2007年: 【转贴】修身格言集锦100条
- » 2007年: 【转贴】人脉存折--成功的轨迹
- » 2007年: 【转贴】英文写作佳句300例
收藏:
QQ书签
del.icio.us
订阅:
Google
抓虾