怎麼使用css程式碼製作網站導覽列？（例）-css教學-PHP中文網

怎麼使用css程式碼製作網站導覽列？（例）

藏色散人

發布： 2018-08-25 09:40:19

原創

5538 人瀏覽過

這篇文章主要跟大家介紹如何用css做導覽列的相關知識，希望對有需要的朋友有幫助。對於任何一個網站來說，導覽列的存在是至關重要的，那麼如果只是用html做出枯燥乏味的導覽選單，效果肯定是不佳的。這時css屬性的重要性就體現出來了。

下面要列出css導覽程式碼的具體範例：

垂直導覽列

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css垂直导航代码示例</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>
</body>
</html>

登入後複製

以上效果如下圖：

怎麼使用css程式碼製作網站導覽列？（例）

2.水平導覽列

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css水平导航栏代码示例</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>

登入後複製

效果如下圖：

怎麼使用css程式碼製作網站導覽列？（例）

這裡主要涉及的重要知識：

display：其屬性規定元素應該產生的框的類型。這個屬性是用來定義建立佈局時元素產生的顯示框類型。對於 HTML 等文件類型，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示層次結構。對於 XML，由於 XML 沒有內建的這種層次結構，所有 display 是絕對必要的。

display:inline; -在預設情況下，

元素是區塊元素。在這裡，我們刪除換行符之前和之後每個清單項，以顯示一行。

那麼以上就是針對在網頁中css導航怎麼做的這個問題進行了相關介紹，具有一定的參考價值。希望對大家有幫助。

以上是怎麼使用css程式碼製作網站導覽列？（例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！