CSS 導覽列

導覽列

熟練使用導覽欄,對於任何網站都非常重要。

使用CSS你可以轉換成好看的導覽列而不是枯燥的HTML選單。

導覽列=連結清單

作為標準的HTML基礎一個導覽列是必須的

#。在我們的例子中我們將建立一個標準的HTML清單導覽列。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网</title> 
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
<p>注意:我们用 href="#"作为测试连接.用在一个真正的web站点的url。</p>
</body>
</html>

垂直導覽列

上面的程式碼,我們只需要<a>元素的樣式,建立一個垂直的導覽列

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</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="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>

#範例說明:

display:block - 顯示區塊元素的鏈接,讓整體變成可點擊連結區域(不只是文字),它允許我們指定寬度

width:60px - 區塊元素預設是最大寬度。我們要指定一個60像素的寬度

注意: 請務必指定 <a>元素在垂直導覽列的的寬度。如果省略寬度,IE6可能會產生意想不到的效果。

水平導覽列

有兩種方法建立橫向導覽列。使用內聯或浮動的清單項目。

這兩種方法都很好,但如果你想連結到具有相同的大小,你必須使用浮動的方法。

內嵌清單項目

建立橫向導覽列的方法之一是指定

元素, 上述程式碼是標準的內嵌:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>

浮動清單項目

在上面的範例中連結有不同的寬度。

對於所有的連結寬度相等,浮動<li>元素,並指定為<a>元素的寬度:

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</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="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
<p><b>注意:</b> 如果!DOCTYPE 没有定义, floating 可以产生意想不到的结果.</p>
<p><b>注意:</b> overflow:hidden 添加到ul元素,以防止li元素列表的外出。.</p>
</body>
</html>

實例解析:

float:left - 使用浮動區塊元素的幻燈片彼此相鄰

display:block - 顯示區塊元素的鏈接,讓整體變為可點擊連結區域(不只是文字),它允許我們指定寬度

width:60px - 區塊元素預設為最大寬度。我們要指定一個60像素的寬度


繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</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="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">娱乐</a></li> <li><a href="#">关于</a></li> </ul> </body> </html>