CSS_水平导航栏设计

效果图如下所示：

html结构：
<ul>
    <li><a href="#">首&nbsp;&nbsp;页</a></li>
    <li><a href="#">新闻快讯</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
</ul> 
实现要点：
1：其他和之前的垂直导航栏设计一样。a标签（或者li标签）要额外添加float：left样式，已保证是水平排列。
2：为了美观，还需设置导航栏水平居中。即可以为ul添加width：500px和margin：0 auto两个样式。

CSS样式如下：
*{
    padding:0;
    margin:0;
    font-size:14px;
} 
ul{
    list-style:none;    
    width:505px;                /*设置margin-left和margin-right为auto，以让其居中的前提条件是，为元素设置了具体的宽度*/
    margin:0 auto;           /*让整个导航栏水平居中*/
} 
a{
    display:block;
    float:left;                    /*让每个a标签水平排列*/
    width:100px;
    height:40px;
    line-height:40px;        /*让文字垂直居中*/
    text-decoration:none;
    text-align:center;        /*让文字水平居中*/
    background-color:#666;
    color:#06C;
    margin-right:1px; 
} 
a:hover{
    background-color:#C60;

    color:#FFF;

} 
 

转载于:https://my.oschina.net/microlv/blog/848954