CSS简单胶囊式导航栏

16. January 2017 HTML5 0

—————————-css

#lib_nav ul{
width: 1190px;
height: 50px;
margin: 0 auto;
}
#lib_nav ul li{
width: 148px;
height:50px;
display: block;
float: left;
border-left: 1px #ccc solid;
font-size: 16px;
font-family: “Microsoft YaHei”;
color: rgb( 85, 85, 85 );
text-align: center;
position: relative;
/*padding-top: 16px;*/
}
#lib_nav ul li a{
width: 148px;
height: 35px;
position: relative;
display: block;
padding-top: 15px;
}
#lib_nav ul li a:hover{
color: #FFFFFF;
text-decoration: none;
background-color: #5a7aea;
}

—————————-html

<div id=”lib_nav”>
<ul>
<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>
</ul>
</div>


Leave a Reply

Your email address will not be published. Required fields are marked *