html+css导航栏制作——20160313

水平导航栏（一）

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;

}