CSSオンラインマニュアル
/ CSS 導(dǎo)航欄
CSS 導(dǎo)航欄
CSS 導(dǎo)航欄
垂直
水平
導(dǎo)航欄
熟練使用導(dǎo)航欄，對于任何網(wǎng)站都非常重要。
使用CSS你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的HTML菜單。
導(dǎo)航欄=鏈接列表
作為標(biāo)準(zhǔn)的HTML基礎(chǔ)一個導(dǎo)航欄是必須的。
在我們的例子中我們將建立一個標(biāo)準(zhǔn)的HTML列表導(dǎo)航欄。
導(dǎo)航條基本上是一個鏈接列表，所以使用 <ul> 和 <li>元素非常有意義：
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>注意:我們用 href="#"作為測試連接.用在一個真正的web站點的url。</p> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
現(xiàn)在，讓我們從列表中刪除邊距和填充：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
例子解析：
list-style-type:none - 移除列表前小標(biāo)志。一個導(dǎo)航欄并不需要列表標(biāo)記
移除瀏覽器的默認(rèn)設(shè)置將邊距和填充設(shè)置為0
上面的例子中的代碼是垂直和水平導(dǎo)航欄使用的標(biāo)準(zhǔn)代碼。
垂直導(dǎo)航欄
上面的代碼，我們只需要 <a>元素的樣式，就可建立一個簡單的垂直導(dǎo)航欄：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
示例說明：
display:block - 顯示塊元素的鏈接，讓整體變?yōu)榭牲c擊鏈接區(qū)域（不只是文本），它允許我們指定寬度
width:60px - 塊元素默認(rèn)情況下是最大寬度。我們要指定一個60像素的寬度
在這個基礎(chǔ)上進行樣式的添加，就可制作一個簡單又漂亮的垂直導(dǎo)航欄：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯(lián)系</a></li>
<li><a href="#about">關(guān)于</a></li>
</ul>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
注意： 請務(wù)必指定 <a>元素在垂直導(dǎo)航欄的的寬度。如果省略寬度，IE6可能產(chǎn)生意想不到的效果。
水平導(dǎo)航欄
有兩種方法創(chuàng)建橫向?qū)Ш綑?。使?strong>內(nèi)聯(lián)或浮動的列表項。
這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動的方法。
內(nèi)嵌列表項
建立一個橫向?qū)Ш綑诘姆椒ㄖ皇侵付ㄔ兀?上述代碼是標(biāo)準(zhǔn)的內(nèi)嵌:
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>注意:</b>如果您只為 a 元素設(shè)置內(nèi)邊距（而不設(shè)置 ul 元素），那么鏈接會出現(xiàn)在 ul 元素之外。所以，我們?yōu)?nbsp;ul 元素添加了 top 和 bottom 內(nèi)邊距。 </p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
實例解析：
display:inline; -默認(rèn)情況下，<li>元素是塊元素。在這里，我們刪除換行符之前和之后每個列表項，以顯示一行。
浮動列表項
在上面的例子中鏈接有不同的寬度。
對于所有的鏈接寬度相等，浮動 <li>元素，并指定為 <a>元素的寬度：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>注意:</b> 如果!DOCTYPE 沒有定義, floating 可以產(chǎn)生意想不到的結(jié)果.</p>
<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
<p><b>注意:</b> overflow:hidden 添加到ul元素,以防止li元素列表的外出。.</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
實例解析：
float:left - 使用浮動塊元素的幻燈片彼此相鄰
display:block - 顯示塊元素的鏈接，讓整體變?yōu)榭牲c擊鏈接區(qū)域（不只是文本），它允許我們指定寬度
width:120px - 塊元素默認(rèn)情況下是最大寬度。我們要指定一個120像素的寬度
更多實例
實例：如何使用 CSS3 媒體查詢來創(chuàng)建一個響應(yīng)式導(dǎo)航。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {margin: 0;}
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
ul.sidenav li a.active {
background-color: #4CAF50;
color: white;
}
ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
@media screen and (max-width: 900px) {
ul.sidenav {
width: 100%;
height: auto;
position: relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content {margin-left: 0;}
}
@media screen and (max-width: 400px) {
ul.sidenav li a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<ul class="sidenav">
<li><a class="active" href="#home">主頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯(lián)系</a></li>
<li><a href="#about">關(guān)于</a></li>
</ul>
<div class="content">
<h2>響應(yīng)式邊欄導(dǎo)航實例</h2>
<p>該實例在屏幕寬度小于 900px 時導(dǎo)航欄為頂部水平導(dǎo)航欄，如果大于 900px 導(dǎo)航欄會在左邊，且是固定的。</p>
<p>如果屏幕寬度小于 400px 會變?yōu)榇怪睂?dǎo)航欄。</p>
<h3>重置瀏覽器窗口大小，查看效果。</h3>
</div>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
實例：如何使用 CSS3 媒體查詢來創(chuàng)建一個邊欄導(dǎo)航。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #4CAF50;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
<li><a class="active" href="#home">主頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯(lián)系</a></li>
<li class="right"><a href="#about">關(guān)于</a></li>
</ul>
<div style="padding:0 16px;">
<h2>響應(yīng)式導(dǎo)航欄實例</h2>
<p>在屏幕寬度小于 600px 會重置導(dǎo)航欄。</p>
<h4>重置瀏覽器窗口大小，查看效果。</h4>
</div>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
實例：導(dǎo)航下拉菜單--在導(dǎo)航條內(nèi)部設(shè)置下拉菜單
<!DOCTYPE html>
<html>
<head>
<title>下拉菜單實例</title>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
}
li{
float:left;
}
li a, .dropbtn
{
display:inline-block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a:hover, .dropdown:hover, .dropbtn
{
background-color:#111;
}
.dropdown
{
display:inline-block;
}
.dropdown-content
{
display:none;
position:absolute;
background-color:#f9f9f9;
min-width:160px;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a
{
color:black;
padding:12px 16px;
text-decoration:none;
display:block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content
{
display:block;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主頁</a></li>
<li><a href="#news">新聞</a></li>
<div class="dropdown">
<a href="#" class="dropbtn">下拉菜單</a>
<div class="dropdown-content">
<a href="#">鏈接 1</a>
<a href="#">鏈接 2</a>
<a href="#">鏈接 3</a>
</div>
</div>
</ul>
<h3>導(dǎo)航欄上的下拉菜單</h3>
<p>鼠標(biāo)移動到 "下拉菜單" 鏈接先顯示下拉菜單。</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例