CSS：CSS 導航欄

本文轉載自查看原文 2018-04-23 06:54 2261 HTML-CSS

ylbtech-CSS：CSS 導航欄

1.返回頂部

1、

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:60px;
}

嘗試一下 »

示例說明：

display:block - 顯示塊元素的鏈接，讓整體變為可點擊鏈接區域（不只是文本），它允許我們指定寬度
width:60px - 塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度

提示：查看完整樣式的垂直導航欄的示例。

注意： 請務必指定 <a>元素在垂直導航欄的的寬度。如果省略寬度，IE6可能產生意想不到的效果。

垂直導航條實例

創建一個簡單的垂直導航條實例，在鼠標移動到選項時，修改背景顏色：

實例

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;
}

嘗試一下 »

激活/當前導航條實例

在點擊了選項后，我們可以添加 "active" 類來標准哪個選項被選中：

實例

.active {
    background-color: #4CAF50;
    color: white;
}

嘗試一下 »

創建鏈接並添加邊框

可以在 <li> or <a> 上添加text-align:center 樣式來讓鏈接居中。

可以在 border <ul> 上添加 border 屬性來讓導航欄有邊框。如果要在每個選項上添加邊框，可以在每個 <li> 元素上添加border-bottom :

實例

ul {
    border: 1px solid #555;
}
 
li {
    text-align: center;
    border-bottom: 1px 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)的列表項。

這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動的方法。

內聯列表項

建立一個橫向導航欄的方法之一是指定元素，上述代碼是標准的內聯:

實例

li
{
    display:inline;
}

嘗試一下 »

實例解析：

display:inline; -默認情況下，<li>元素是塊元素。在這里，我們刪除換行符之前和之后每個列表項，以顯示一行。

提示: 查看完整樣式的水平導航欄的示例。

浮動列表項

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

對於所有的鏈接寬度相等，浮動 <li>元素，並指定為 <a>元素的寬度：

實例

li
{
    float:left;
}
a
{
    display:block;
    width:60px;
}

嘗試一下 »

實例解析：

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: 14px 16px;
    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 樣式來添加分割線:

實例

/* 除了最后一個選項(last-child) 其他的都添加分割線 */
li {
    border-right: 1px solid #bbb;
}
 
li:last-child {
    border-right: none;
}

嘗試一下 »

固定導航條

可以設置頁面的導航條固定在頭部或者底部：

固定在頭部

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

嘗試一下 »

固定在底部

ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}

嘗試一下 »

注意: 該實例可以在移動設備上使用。

灰色水平導航條

固定在底部

ul {
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}
 
li a {
    color: #666;
}

嘗試一下 »

CSS：CSS 導航欄

CSS 導航欄

導航欄

導航欄=鏈接列表

實例

實例

垂直導航欄

實例

垂直導航條實例

實例

激活/當前導航條實例

實例

創建鏈接並添加邊框

實例

全屏高度的固定導航條

實例

水平導航欄

內聯列表項

實例

浮動列表項

實例

水平導航條實例

實例

激活/當前導航條實例

實例

鏈接右對齊

實例

添加分割線

實例

固定導航條

固定在頭部

固定在底部

灰色水平導航條

固定在底部

更多實例

免責聲明！