導航欄是網(wǎng)頁中非常普遍的一個組件，今天一步步教大家如何做個導航欄。一般導航欄是使用無序列表實現(xiàn)的(ul+li)，看看下面的無序列表是不是非常像導航欄呢？

 <ul>
        <li>精選</li>
        <li>女裝</li>
        <li>鞋包</li>
        <li>男士</li>
        <li>運動</li>
        <li>飾品</li>
        <li>美妝</li>
        <li>母嬰</li>
        <li>居家</li>
        <li>國際</li>
        <li>生活</li>
        <li>預告</li>
 </ul>

先給ul加上border,便于查看元素的大小情況。

border: 1px solid gray;

一、兩步把無序列表變垂直導航欄

1. 清除ul樣式

  list-style: none;
  padding-left:0;

2. 把ul的display改為inline-block

display : inline-block;

看看，是不是垂直導航欄基本樣式已經(jīng)出來了。

二、美化垂直導航欄

大體的樣子出來了，但是看上去比較緊湊。我們一起美化一下吧。

1. 把ul的內(nèi)邊距調(diào)整一下

  padding:10px;

2. 給li的內(nèi)邊距調(diào)整一下

  padding:10px;

3. 把ul的邊框加上圓角
   看上去導航欄比較生硬，我們加個圓角潤色一下。

  border-radius: 5px;

4. 給li加上:hover特效

li:hover {
    background-color : #f5f5f5;
    cursor:pointer;
}

5. 給li加上:hover特效加上圓角
   背景還是比較生硬，我們用同樣的方式潤滑一下。

  border-radius: 5px;

6. 給li加上:hover特效加上白色字體
   背景色與字體顏色比較接近，看不清。我們把字體顏色設(shè)成白色，并且加粗。

color: #fff;
font-weight: bold;

我們的垂直導航欄基本上完成了，簡單吧。大家試一下。

三、代碼

垂直導航欄的代碼一欄，如下所示：

        ul {
            border: 1px solid gray;
            list-style: none;
            padding-left: 0;
            display: inline-block;
            padding: 10px;
            border-radius: 5px;
        }
        
        li {
            padding: 10px;
        }
        
        li:hover {
            background-color: #999;
            cursor: pointer;
            border-radius: 5px;
            color: #fff;
            font-weight: bold;
        }

四、垂直導航欄秒變水平導航欄

把li的display改為inline-block，垂直導航欄秒變水平導航欄。

我們把瀏覽器的窗口變小，水平導航欄居然換行了。

這顯然不是我們需要的。如何不讓水平導航欄換行呢？只要加上ul加上一個white-space屬性，屬性值為不換行nowrap，就可以了。

white-space:nowrap;

看是不是水平導航欄成了一行了，瀏覽器還加上了水平滾動條。

通常的還有一個辦法是設(shè)置導航欄的高度，并且需要把overflow設(shè)置為hidden，讓導航欄超出部分隱藏。在ul加上如下代碼：

  height: 40px;
  overflow: hidden;

如有問題請留言；如有幫助請點贊。