CSS 導(dǎo)航欄
導(dǎo)航欄
熟練使用導(dǎo)航欄，對(duì)于任何網(wǎng)站都非常重要。
使用CSS你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的HTML菜單。
導(dǎo)航欄=鏈接列表
作為標(biāo)準(zhǔn)的HTML基礎(chǔ)一個(gè)導(dǎo)航欄是必須的
。在我們的例子中我們將建立一個(gè)標(biāo)準(zhǔn)的HTML列表導(dǎo)航欄。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)</title> </head> <body> <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">新聞</a></li> <li><a href="#">娛樂(lè)</a></li> <li><a href="#">關(guān)于</a></li> </ul> <p>注意:我們用 href="#"作為測(cè)試連接.用在一個(gè)真正的web站點(diǎn)的url。</p> </body> </html>
垂直導(dǎo)航欄
上面的代碼，我們只需要 <a>元素的樣式，建立一個(gè)垂直的導(dǎo)航欄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</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="#">首頁(yè)</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">娛樂(lè)</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
</body>
</html>示例說(shuō)明：
display:block - 顯示塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域（不只是文本），它允許我們指定寬度
width:60px - 塊元素默認(rèn)情況下是最大寬度。我們要指定一個(gè)60像素的寬度
注意： 請(qǐng)務(wù)必指定 <a>元素在垂直導(dǎo)航欄的的寬度。如果省略寬度，IE6可能產(chǎn)生意想不到的效果。
水平導(dǎo)航欄
有兩種方法創(chuàng)建橫向?qū)Ш綑?。使用?nèi)聯(lián)或浮動(dòng)的列表項(xiàng)。
這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動(dòng)的方法。
內(nèi)嵌列表項(xiàng)
建立一個(gè)橫向?qū)Ш綑诘姆椒ㄖ皇侵付?/p>
元素， 上述代碼是標(biāo)準(zhǔn)的內(nèi)嵌:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">娛樂(lè)</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
</body>
</html>浮動(dòng)列表項(xiàng)
在上面的例子中鏈接有不同的寬度。
對(duì)于所有的鏈接寬度相等，浮動(dòng) <li>元素，并指定為 <a>元素的寬度：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">娛樂(lè)</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
<p><b>注意:</b> 如果!DOCTYPE 沒(méi)有定義, floating 可以產(chǎn)生意想不到的結(jié)果.</p>
<p><b>注意:</b> overflow:hidden 添加到ul元素,以防止li元素列表的外出。.</p>
</body>
</html>實(shí)例解析：
float:left - 使用浮動(dòng)塊元素的幻燈片彼此相鄰
display:block - 顯示塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域（不只是文本），它允許我們指定寬度
width:60px - 塊元素默認(rèn)情況下是最大寬度。我們要指定一個(gè)60像素的寬度
