水平導航條的製做

原文發表於我本身的服務器www.jjxiaoliu.cn；不過這個服務器我可能不打算續費了，因此搬到cnblogs來。

導航條（導航菜單）基本上就是帶連接的列表，因此<ul>列表標籤無疑是個天然的選擇；然而這並非必須的——事實上在整個製做過程當中幾乎沒有使用到列表標籤的特性。因此咱們的例子徹底不使用列表標籤。

首先，水平導航條老是佔據一整行，因此咱們用<div>包圍之；其次，咱們用<span>包圍每一個菜單項；最後，每一個菜單項都是一個<a>。注意這裏的<span>實際上是能夠不用的；咱們使用<span>僅僅是爲了語法上看起來更天然一點（將<span>做爲<a>的容器，相似於用<li>做爲<a>的容器）。、

首先是菜單內容：

<div class="menu">
    <span class="item"><a href="#">File</a></span><!-- 
 --><span class="item"><a href="#">Edit</a></span><!-- 
 --><span class="item"><a href="#">View</a></span><!-- 
 --><span class="item"><a href="#">Help</a></span>
</div>

注意這裏咱們在相鄰菜單項之間都使用了HTML註釋，以使得瀏覽器認爲全部菜單項文字（<span>標籤）之間沒有空格和換行，避免瀏覽器在相鄰菜單項之間插入額外空格，形成菜單項的換行。

接着咱們設計相關的CSS。首先是整個菜單條：

.menu {
    /* 指定最小寬度，
       避免當縮小瀏覽器窗口時菜單項之間發生重疊 . */
    min-width: 400px;
    /* 導航欄佔據整個瀏覽器窗口寬度 */
    width: 100%;
    /* 居中顯示 */
    margin: 0 auto;
}

若是是用html列表標籤製做，咱們這裏還要指定<li>的display屬性爲inline，以使得全部列表項顯示在同一行，但對於span來講就沒必要了。接下來設定<a>標籤的style。注意這裏不是設置span標籤的style；由於這裏span標籤只是個容器，真正響應用戶鼠標或鍵盤事件的是a標籤。

.menu .item a {
    font-size:24px;
    /* 咱們但願能設定連接的padding等屬性，
       以便將菜單項顯示爲一個「塊」，
       所以設置顯示方式爲inline-block */
    display: inline-block;
    padding:4px 4px 4px 4px;
    /* 後面咱們須要設置每一個菜單項的顯示寬度佔比，
       所以設置box-sizing爲border-box。 */
    box-sizing: border-box;
    /* 有4個菜單項，所以每一個項寬度爲25%（包含padding）。 */
    /* 若是咱們上面沒有設置box-sizing，
       這裏加上padding後總寬度就會超過100% */
    width: 25%;
    text-align: center;
    text-decoration: none;
    background-color: #FF0000;
    color: #000000;
}

核心的東西就上面這麼多了。剩下的就是修改連接樣式的常規工做了。