HTML/CSS：導航欄水平和垂直

1.垂直導航欄

導航欄 = 鏈接列表
導航欄基本上是一個鏈接列表，因此使用 <ul> 和 <li> 元素是非常合適的。
如需構建垂直導航欄，我們只需要定義 <a> 元素的樣式

演示：

代碼：

HTML

<div class="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">MTRA</a></li>
            <li><a href="#">PRODUCT</a></li>
            <li><a href="#">MORE</a></li>
        </ul>
</div>

CSS

.nav {
background-color: #F5F5DC;
}

.nav ul {
margin: 0;padding: 0;
list-style-type: none;
line-height: 3em;
}

.nav a {
display: block;
width: 10em;
text-align: center;
text-decoration: none;
background-color: #CCCCCC;
}

.nav a:hover {
background-color: #E6E6FA;
}

核心代碼：

• list-style-type:none - 刪除圓點。導航欄不需要列表項標記。
• 把外邊距和內邊距設置為 0 可以去除瀏覽器的默認設定。
• display:block - 把鏈接顯示為塊元素可使整個鏈接區域可點擊（不僅僅是文本），同時也允許我們規定寬度。
• width:10em - 塊元素默認占用全部可用寬度。此處自定義寬度。

提醒：請始終規定垂直導航欄中 <a> 元素的寬度。如果省略寬度，IE6 會產生意想不到的結果。

 

2.兩種水平導航欄設置方式

有兩種創建水平導航欄的方法。使用行內或浮動列表項。
兩種方法都不錯，但是：如果希望鏈接擁有相同的尺寸，就必須使用浮動方法。

1.行內列表法

演示：

代碼：

HTML

<div class="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">MTRA</a></li>
            <li><a href="#">PRODUCT</a></li>
            <li><a href="#">MORE</a></li>
        </ul>
</div>

CSS

.nav {
text-align: center;
background-color: #F5F5DC;
}

.nav ul {
list-style-type: none; 
line-height: 5em;
}

.nav ul li {
display: inline;
}
.nav a {
text-decoration: none;
background-color: #CCCCCC;
}

.nav a:hover {
background-color: #E6E6FA;
}

核心代碼：

•  display:inline - 默認地，<li> 元素是塊元素。在這里，我們去除了每個列表項前后的換行，以便讓它們在一行中顯示。

 

2.浮動列表法

在上面的例子中，鏈接的寬度是不同的。

為了讓所有鏈接擁有相等的寬度，浮動 <li> 元素並規定 <a> 元素的寬度：

演示：

 

代碼：

HTML

<div class="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">MTRA</a></li>
            <li><a href="#">PRODUCT</a></li>
            <li><a href="#">MORE</a></li>
        </ul>
</div>

CSS

.nav {
    height: 5em;
    width: 50em;
    margin: 0 auto;
    background-color: #F5F5DC;
    text-align: center;
}

.nav ul {
    margin: 0;padding: 0;
    list-style-type: none; 
    display: inline-block;
}

.nav ul li {
    float:left;
}

.nav a {
 display:block; width: 10em;
    height: 5em;
    line-height: 5em;
    text-decoration: none;
    background-color: #CCCCCC;
}

.nav a:hover {
    background-color: #E6E6FA;
}

 

核心代碼：

• display: inline-block - 使列表正常居中顯示。
• float:left - 使用 float 來把塊元素滑向彼此。
• display:block - 把鏈接顯示為塊元素可使整個鏈接區域可點擊（不僅僅是文本），同時也允許我們規定寬度。
• width:10em - 由於塊元素默認占用全部可用寬度，鏈接無法滑動至彼此相鄰。我們需要自定義寬度。