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>元素非常有意義:
實(shí)例
<!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站點(diǎn)的url。</p> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
現(xiàn)在,讓我們從列表中刪除邊距和填充:
實(shí)例
<!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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
例子解析:
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)航欄:
實(shí)例
<!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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
示例說明:
display:block - 顯示塊元素的鏈接,讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域(不只是文本),它允許我們指定寬度
width:60px - 塊元素默認(rèn)情況下是最大寬度。我們要指定一個60像素的寬度
在這個基礎(chǔ)上進(jìn)行樣式的添加,就可制作一個簡單又漂亮的垂直導(dǎo)航欄:
實(shí)例
<!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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
注意: 請務(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)嵌:
實(shí)例
<!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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例解析:
display:inline; -默認(rèn)情況下,<li>元素是塊元素。在這里,我們刪除換行符之前和之后每個列表項,以顯示一行。
浮動列表項
在上面的例子中鏈接有不同的寬度。
對于所有的鏈接寬度相等,浮動 <li>元素,并指定為 <a>元素的寬度:
實(shí)例
<!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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例解析:
float:left - 使用浮動塊元素的幻燈片彼此相鄰
display:block - 顯示塊元素的鏈接,讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域(不只是文本),它允許我們指定寬度
width:120px - 塊元素默認(rèn)情況下是最大寬度。我們要指定一個120像素的寬度
更多實(shí)例
實(shí)例:如何使用 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)航實(shí)例</h2> <p>該實(shí)例在屏幕寬度小于 900px 時導(dǎo)航欄為頂部水平導(dǎo)航欄,如果大于 900px 導(dǎo)航欄會在左邊,且是固定的。</p> <p>如果屏幕寬度小于 400px 會變?yōu)榇怪睂?dǎo)航欄。</p> <h3>重置瀏覽器窗口大小,查看效果。</h3> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例:如何使用 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)航欄實(shí)例</h2> <p>在屏幕寬度小于 600px 會重置導(dǎo)航欄。</p> <h4>重置瀏覽器窗口大小,查看效果。</h4> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例:導(dǎo)航下拉菜單--在導(dǎo)航條內(nèi)部設(shè)置下拉菜單
<!DOCTYPE html> <html> <head> <title>下拉菜單實(shí)例</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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例