CSS 導(dǎo)覽列
CSS 導(dǎo)覽列
導(dǎo)覽列
熟練使用導(dǎo)覽欄，對(duì)於任何網(wǎng)站都非常重要。
使用CSS你可以轉(zhuǎn)換成好看的導(dǎo)覽列而不是枯燥的HTML選單。
導(dǎo)覽列=連結(jié)清單
作為標(biāo)準(zhǔn)的HTML基礎(chǔ)一個(gè)導(dǎo)覽列是必須的
在我們的例子中我們將建立一個(gè)標(biāo)準(zhǔn)的HTML清單導(dǎo)覽列。
導(dǎo)航條基本上是一個(gè)連結(jié)列表，所以使用<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="#"作為測(cè)試連接.用在一個(gè)真正的web站點(diǎn)的url。</p> </body> </html>
現(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>
- list-style-type:none - 移除清單前小標(biāo)誌。一個(gè)導(dǎo)覽列並不需要清單標(biāo)記移除瀏覽器的預(yù)設(shè)設(shè)定將邊距和填充設(shè)定為0
垂直導(dǎo)覽列
上面的程式碼，我們只需要<a>元素的樣式，建立一個(gè)垂直的導(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>
- display:block - 顯示區(qū)塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊連結(jié)區(qū)域（不只是文字），它允許我們指定寬度width:60px - 區(qū)塊元素預(yù)設(shè)為最大寬度。我們要指定一個(gè)60像素的寬度
注意： 請(qǐng)務(wù)必指定 元素在垂直導(dǎo)覽列的的寬度。
水平導(dǎo)覽列
有兩種方法建立橫向?qū)в[列。使用內(nèi)聯(lián)或浮動(dòng)的清單項(xiàng)目。
這兩種方法都很好，但如果你想連結(jié)到具有相同的大小，你必須使用浮動(dòng)的方法。內(nèi)嵌清單項(xiàng)目
建立橫向?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;
}
li
{
display:inline;
}
</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>
- display:inline; -預(yù)設(shè)情況下，元素是塊元素。在這裡，我們刪除換行符之前和之後每個(gè)清單項(xiàng)，以顯示一行 。
浮動(dòng)清單項(xiàng)目
在上面的範(fàn)例中連結(jié)有不同的寬度。 對(duì)於所有的連結(jié)寬度相等，浮動(dòng)<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
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<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>
</body>
</html>
#實(shí)例解析：
- float:left - 使用浮動(dòng)區(qū)塊元素的幻燈片彼此相鄰
- display:block - 顯示區(qū)塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊連結(jié)區(qū)域（不只是文字），它允許我們指定寬度
- width:60px - 區(qū)塊元素預(yù)設(shè)是最大寬度。我們要指定一個(gè)60像素的寬度
