CSS 導航欄
垂直
- 主頁
- 新聞
- 聯絡
- 關於
水平
- 主頁
- 新聞
- 聯絡
- 關於
- 主頁
- 新聞
- 聯絡
- 關於
導航欄
熟練使用導航欄,對於任何網站都非常重要。
使用CSS你可以轉換成好看的導航欄而不是枯燥的HTML選單。
導航欄=連結列表
作為標準的HTML基礎一個導航欄是必須的
。在我們的例子中我們將建立一個標準的HTML列表導航欄。
導航條基本上是一個連結列表,所以使用 <ul> 和 <li>元素非常有意義:
例項
嘗試一下 ?
現在,讓我們從列表中刪除邊距和填充:
例項
嘗試一下 ?
例子解析:
- list-style-type:none - 移除列表前小標誌。一個導航欄並不需要列表標記
- 移除瀏覽器的預設設定將邊距和填充設定為0
上面的例子中的程式碼是垂直和水平導航欄使用的標準程式碼。
垂直導航欄
上面的程式碼,我們只需要 <a>元素的樣式,建立一個垂直的導航欄:
例項
嘗試一下 ?
示例說明:
- display:block - 顯示塊元素的連結,讓整體變為可點選連結區域(不只是文字),它允許我們指定寬度
- width:60px - 塊元素預設情況下是最大寬度。我們要指定一個60畫素的寬度
提示:檢視 完整樣式的垂直導航欄的示例。
注意: 請務必指定 <a>元素在垂直導航欄的的寬度。如果省略寬度,IE6可能產生意想不到的效果。
垂直導航條例項
建立一個簡單的垂直導航條例項,在滑鼠移動到選項時,修改背景顏色:
- 主頁
- 新聞
- 聯絡
- 關於
例項
嘗試一下 ?
啟用/當前導航條例項
在點選了選項後,我們可以新增 "active" 類來標準哪個選項被選中:
- 主頁
- 新聞
- 聯絡
- 關於
例項
嘗試一下 ?
建立連結並新增邊框
可以在 <li> or <a> 上新增text-align:center 樣式來讓連結居中。
可以在 border <ul> 上新增 border 屬性來讓導航欄有邊框。如果要在每個選項上新增邊框,可以在每個 <li> 元素上新增border-bottom :
例項
嘗試一下 ?
全屏高度的固定導航條
接下來我們建立一個左邊是全屏高度的固定導航條,右邊是可滾動的內容。
例項
嘗試一下 ?
注意: 該例項可以在移動裝置上使用。
水平導航欄
有兩種方法建立橫向導航欄。使用內聯(inline)或浮動(float)的列表項。
這兩種方法都很好,但如果你想連結到具有相同的大小,你必須使用浮動的方法。
內聯列表項
建立一個橫向導航欄的方法之一是指定元素, 上述程式碼是標準的內聯:
例項
嘗試一下 ?
例項解析:
- display:inline; -預設情況下,<li>元素是塊元素。在這裡,我們刪除換行符之前和之後每個列表項,以顯示一行。
提示: 檢視 完整樣式的水平導航欄的示例。
浮動列表項
在上面的例子中連結有不同的寬度。
對於所有的連結寬度相等,浮動 <li>元素,並指定為 <a>元素的寬度:
例項
嘗試一下 ?
例項解析:
- float:left - 使用浮動塊元素的幻燈片彼此相鄰
- display:block - 顯示塊元素的連結,讓整體變為可點選連結區域(不只是文字),它允許我們指定寬度
- width:60px - 塊元素預設情況下是最大寬度。我們要指定一個60畫素的寬度
提示:檢視 完全樣式的橫向導航欄的示例。
水平導航條例項
建立一個水平導航條,在滑鼠移動到選項後修改背景顏色。
例項
嘗試一下 ?
啟用/當前導航條例項
在點選了選項後,我們可以新增 "active" 類來標準哪個選項被選中:
例項
嘗試一下 ?
連結右對齊
將導航條最右邊的選項設定右對齊 (float:right;):
例項
嘗試一下 ?
新增分割線
<li> 通過 border-right 樣式來新增分割線:
例項
嘗試一下 ?
固定導航條
可以設定頁面的導航條固定在頭部或者底部:
固定在頭部
嘗試一下 ?
固定在底部
嘗試一下 ?
注意: 該例項可以在移動裝置上使用。
灰色水平導航條
固定在底部
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color: #666;
}
嘗試一下 ?
更多例項
響應式頂部導航:如何使用 CSS3 媒體查詢來建立一個響應式導航。
響應式邊欄導航:如何使用 CSS3 媒體查詢來建立一個邊欄導航。
導航下拉選單:在導航條內部設定下拉選單
固定在底部
嘗試一下 ?
響應式頂部導航:如何使用 CSS3 媒體查詢來建立一個響應式導航。
響應式邊欄導航:如何使用 CSS3 媒體查詢來建立一個邊欄導航。
導航下拉選單:在導航條內部設定下拉選單