CSS 導航欄
垂直
水平
一、導航欄
熟練使用導航欄，對于任何網站都非常重要，
使用CSS你可以轉換成好看的導航欄而不是枯燥的HTML選單，
導航欄=鏈接串列
作為標準的HTML基礎一個導航欄是必須的
，在我們的例子中我們將建立一個標準的HTML串列導航欄，
導航潭訓本上是一個鏈接串列，所以使用 <ul> 和 <li>元素非常有意義：
<ul>
<li><a href="https://www.cnblogs.com/chenchunbo/archive/2021/02/20/#home">主頁</a></li>
<li><a href="https://www.cnblogs.com/chenchunbo/archive/2021/02/20/#news">新聞</a></li>
<li><a href="https://www.cnblogs.com/chenchunbo/archive/2021/02/20/#contact">聯系</a></li>
<li><a href="https://www.cnblogs.com/chenchunbo/archive/2021/02/20/#about">關于</a></li>
</ul>
現在，讓我們從串列中洗掉邊距和填充：
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.創建鏈接并添加邊框
可以在 <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; }
4.全屏高度的固定導航條
接下來我們創建一個左邊是全屏高度的固定導航條，右邊是可滾動的內容，
ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; height: 100%; /* 全屏高度 */ position: fixed; overflow: auto; /* 如果導航欄選項多，允許滾動 */ }
注意: 該實體可以在移動設備上使用，
三、水平導航欄
有兩種方法創建橫向導航欄，使用行內(inline)或浮動(float)的串列項，
這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動的方法，
1.行內串列項
建立一個橫向導航欄的方法之一是指定元素， 上述代碼是標準的行內:
li { display:inline; }
實體決議：
- display:inline; -默認情況下，
- 元素是塊元素，在這里，我們洗掉換行符之前和之后每個串列項，以顯示一行，
2.浮動串列項
在上面的例子中鏈接有不同的寬度，
對于所有的鏈接寬度相等，浮動 <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="https://www.cnblogs.com/chenchunbo/archive/2021/02/20/#home">主頁</a></li>
<li><a href="https://www.cnblogs.com/chenchunbo/archive/2021/02/20/#news">新聞</a></li>
<li><a href="https://www.cnblogs.com/chenchunbo/archive/2021/02/20/#contact">聯系</a></li>
<li style="float:right"><a href="https://www.cnblogs.com/chenchunbo/archive/2021/02/20/#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; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/261684.html
標籤：其他