CSS 導航欄
垂直
水平
導航欄
熟練使用導航欄，對於任何網站都非常重要。
使用CSS你可以轉換成好看的導航欄而不是枯燥的HTML菜單。
導航欄=鏈接列表
作為標准的HTML基礎一個導航欄是必須的
。在我們的例子中我們將建立一個標准的HTML列表導航欄。
導航條基本上是一個鏈接列表，所以使用 <ul> 和 <li>元素非常有意義：
實例
<
ul
>
<
li
>
<
a
href
=
"
#home
"
>
主頁
</
a
>
</
li
>
<
li
>
<
a
href
=
"
#news
"
>
新聞
</
a
>
</
li
>
<
li
>
<
a
href
=
"
#contact
"
>
聯系
</
a
>
</
li
>
<
li
>
<
a
href
=
"
#about
"
>
關於
</
a
>
</
li
>
</
ul
>
現在，讓我們從列表中刪除邊距和填充：
實例
ul
{
list-style-type:
none
;
margin:
0
;
padding:
0
;
}
例子解析：
- list-style-type:none - 移除列表前小標志。一個導航欄並不需要列表標記
- 移除瀏覽器的默認設置將邊距和填充設置為0
上面的例子中的代碼是垂直和水平導航欄使用的標准代碼。
垂直導航欄
上面的代碼，我們只需要 <a>元素的樣式，建立一個垂直的導航欄：
實例
a
{
display:
block
;
width:
60
px
;
}
示例說明：
- display:block - 顯示塊元素的鏈接，讓整體變為可點擊鏈接區域（不只是文本），它允許我們指定寬度
- width:60px - 塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度
注意： 請務必指定 <a>元素在垂直導航欄的的寬度。如果省略寬度，IE6可能產生意想不到的效果。
垂直導航條實例
創建一個簡單的垂直導航條實例，在鼠標移動到選項時，修改背景顏色：
實例
ul
{
list-style-type:
none
;
margin:
0
;
padding:
0
;
width:
200
px
;
background-color:
#f1f1f1
;
}
li
a
{
display:
block
;
color:
#000
;
padding:
8
px
16
px
;
text-decoration:
none
;
}
li
a
:hover
{
background-color:
#555
;
color:
white
;
}
激活/當前導航條實例
在點擊了選項后，我們可以添加 "active" 類來標准哪個選項被選中：
實例
.active
{
background-color:
#4CAF50
;
color:
white
;
}
創建鏈接並添加邊框
可以在 <li> or <a> 上添加text-align:center 樣式來讓鏈接居中。
可以在 border <ul> 上添加 border 屬性來讓導航欄有邊框。如果要在每個選項上添加邊框，可以在每個 <li> 元素上添加border-bottom :
實例
ul
{
border:
1
px
solid
#555
;
}
li
{
text-align:
center
;
border-bottom:
1
px
solid
#555
;
}
li
:last-child
{
border-bottom:
none
;
}
全屏高度的固定導航條
接下來我們創建一個左邊是全屏高度的固定導航條，右邊是可滾動的內容。
實例
ul
{
list-style-type:
none
;
margin:
0
;
padding:
0
;
width:
25
%
;
background-color:
#f1f1f1
;
height:
100
%
;
position:
fixed
;
overflow:
auto
;
}
注意: 該實例可以在移動設備上使用。
水平導航欄
有兩種方法創建橫向導航欄。使用內聯(inline)或浮動(float)的列表項。
這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動的方法。
內聯列表項
建立一個橫向導航欄的方法之一是指定元素， 上述代碼是標准的內聯:
實例解析：
- display:inline; -默認情況下，<li>元素是塊元素。在這里，我們刪除換行符之前和之后每個列表項，以顯示一行。
浮動列表項
在上面的例子中鏈接有不同的寬度。
對於所有的鏈接寬度相等，浮動 <li>元素，並指定為 <a>元素的寬度：
實例
li
{
float:
left
;
}
a
{
display:
block
;
width:
60
px
;
}
實例解析：
- float:left - 使用浮動塊元素的幻燈片彼此相鄰
- display:block - 顯示塊元素的鏈接，讓整體變為可點擊鏈接區域（不只是文本），它允許我們指定寬度
- width:60px - 塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度
水平導航條實例
創建一個水平導航條，在鼠標移動到選項后修改背景顏色。
實例
ul
{
list-style-type:
none
;
margin:
0
;
padding:
0
;
overflow:
hidden
;
background-color:
#333
;
}
li
{
float:
left
;
}
li
a
{
display:
block
;
color:
white
;
text-align:
center
;
padding:
14
px
16
px
;
text-decoration:
none
;
}
li
a
:hover
{
background-color:
#111
;
}
激活/當前導航條實例
在點擊了選項后，我們可以添加 "active" 類來標准哪個選項被選中：
實例
.active
{
background-color:
#4CAF50
;
}
鏈接右對齊
將導航條最右邊的選項設置右對齊 (float:right;)：
實例
<
ul
>
<
li
>
<
a
href
=
"
#home
"
>
主頁
</
a
>
</
li
>
<
li
>
<
a
href
=
"
#news
"
>
新聞
</
a
>
</
li
>
<
li
>
<
a
href
=
"
#contact
"
>
聯系
</
a
>
</
li
>
<
li
style
=
"
float:right
"
>
<
a
class
=
"
active
"
href
=
"
#about
"
>
關於
</
a
>
</
li
>
</
ul
>
添加分割線
<li> 通過 border-right 樣式來添加分割線:
實例
li
{
border-right:
1
px
solid
#bbb
;
}
li
:last-child
{
border-right:
none
;
}
固定導航條
可以設置頁面的導航條固定在頭部或者底部：
固定在頭部
ul
{
position:
fixed
;
top:
0
;
width:
100
%
;
}
固定在底部
ul
{
position:
fixed
;
bottom:
0
;
width:
100
%
;
}
注意: 該實例可以在移動設備上使用。
灰色水平導航條
固定在底部
ul
{
border:
1
px
solid
#e7e7e7
;
background-color:
#f3f3f3
;
}
li
a
{
color:
#666
;
}
