今天帶大家做的是垂直導航欄和
水平導航欄。垂直導航欄
水平導航欄
導航欄=鏈接列表
作為標準的HTML基礎，一個導航欄是必須的，在我們的例子中我們將建立一個標準的HTML列表導航欄。
導航條基本上是一個鏈接列表，所以使用 和 元素非常有意義：
參考代碼
現在，讓我們從列表中刪除邊距和填充
參考代碼
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
例子解析：
list-style-type:none - 移除列表前小標誌。一個導航欄並不需要列表標記,移除瀏覽器的默認設置將邊距和填充設置為0~
上面的例子中的代碼是垂直和水平導航欄使用的標準代碼。
垂直導航欄
上面的代碼，我們只需要 元素的樣式，建立一個垂直的導航欄。
(潭州教育官網導航欄)
參考代碼
a
{
display:block;
width:60px;
}
示例說明：
display:block - 顯示塊元素的鏈接，讓整體變為可點擊鏈接區域（不只是文本），它允許我們指定寬度。
width:60px - 塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度。
注意：請務必指定 元素在垂直導航欄的的寬度。如果省略寬度，IE6可能產生意想不到的效果
1.垂直導航條實例
創建一個簡單的垂直導航條實例，在鼠標移動到選項時，修改背景顏色。
（效果圖）
參考代碼
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 鼠標移動到選項上修改背景顏色 */
li a:hover {
background-color: #555;
color: white;
}
2.激活/當前導航條實例
在點擊了選項後，我們可以添加 "active" 類來標準哪個選項被選中~
參考代碼
.active {
background-color: #4CAF50;
color: white;
}
3.創建鏈接並添加邊框
可以在 or 上添加text-align:center 樣式來讓鏈接居中。
可以在 border
- 上添加 border 屬性來讓導航欄有邊框。如果要在每個選項上添加邊框，可以在每個
- 元素上添加border-bottom 。
參考代碼
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
4.全屏高度的固定導航條
接下來我們創建一個左邊是全屏高度的固定導航條，右邊是可滾動的內容。
參考代碼
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* 全屏高度 */
position: fixed;
overflow: auto;
/* 如果導航欄選項多，允許滾動 */
}
（注意: 該實例可以在移動設備上使用。）
水平導航欄
有兩種方法創建橫向導航欄。使用內聯(inline)或浮動(float)的列表項，這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動的方法。
![前端實戰垂直導航欄和水平導航欄的製作]()
(Apple 官網導航欄)
1.內聯列表項
建立一個橫向導航欄的方法之一是指定元素， 上述代碼是標準的內聯。
參考代碼
li
{
display:inline;
}
實例解析：
display:inline; -默認情況下，
- 元素是塊元素。在這裡，我們刪除換行符之前和之後每個列表項，以顯示一行。
2.浮動列表項
在上面的例子中鏈接有不同的寬度。對於所有的鏈接寬度相等，浮動
- 元素，並指定為
閱讀更多 WEB前端交流 的文章
