CSS 導覽列

導覽列

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

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

導覽列=連結清單

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

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

導航條基本上是一個連結列表，所以使用<ul> 和<li>元素非常有意義：

實例

  <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(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>

現在，讓我們從清單中刪除邊距和填充：

#實例
##

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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>

範例解析：

上面的範例中的程式碼是垂直和水平導覽欄使用的標準代碼。

垂直導覽列

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

實例

        <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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>

#範例說明：

注意： 請務必指定 元素在垂直導覽列的的寬度。

水平導覽列

有兩種方法建立橫向導覽列。使用

內聯或浮動的清單項目。

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

內嵌清單項目

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

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

實例

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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>

實例解析：

浮動清單項目

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

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

元素的寬度：

實例

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(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>

實例解析：