html導航欄

如圖：

 

 

 

代碼如下：

css:

<style type="text/css">
    /*所有標簽的margin，padding清零*/
    *{
        padding:0px;margin:0px;
    }
    /*導航欄*/
    .nav{
        width:780px;
        height:30px;
        list-style-type:none;            /*去掉無序列表前面的圓圈*/
        background-color:#A8FFA8;    
        margin:20px auto;                /*水平居中，離頂部20px*/
    }
    /*導航欄里的li*/
    .nav>li{
        float:left;                        /*里面的li全部左浮動*/
        width:129px;                
        text-align:center;                /*讓li里的文字居中*/
        line-height:30px;                /*行高變成30px填滿li，就能豎直居中*/
        border-right:1px solid white;    /*把li的右邊距用白色分割*/
    }
    /*a標簽*/
    .nav>li>a{                        
        color:#060;
        text-decoration:none;            /*去掉下划線*/
    }
    /*鼠標經過a標簽時*/
    .nav>li>a:hover{
        color:white;
        display:block;                    /*變成塊元素，自動撐大（由於塊狀元素width：100%
　　　　　　　　　　　　　　　　　　　　　　　　和自己設置的line-height:30px），將充滿整個li*/
        background-color:pink;
    }
</style>

html:

<div class="wrap">
    <ul class="nav">
        <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>

如有錯誤或者建議請留言~