html+css导航栏制作——20160313
2016-03-13 本文已影响0人
kiko9597
水平导航栏（一）
HTML部分：
<ul>
<li><a href="#"><span>个人首页</span></a></li>
<li><a href="#"><span>个人首页</span></a></li>
<li><a href="#"><span>个人首页</span></a></li>
<li><a href="#"><span>个人首页</span></a></li>
<li><a href="#"><span>个人首页</span></a></li>
<li><a href="#"><span style="border-right:none;">个人首页</span></a></li>
</ul>
CSS部分：
*{
margin：0px; padding:0px;
}
ul{
margin:20px auto 0px auto;
list-style:none;
width:1000px;
background-color:#rgba(1, 114, 65, 0.95);
}
li{
position:relative;
display:inline-block;
margin-left:-8px;
}
a{
color:#fff;
text-decoration:none;
}
a:hover{
background-color:rgba(234, 234, 234, 0.54);
}
span{
line-height:40px;
padding:0px 20px;
border-right:1px solid #fff;
}
