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

下面給大家列舉出css導航代碼的具體示例：垂直導航欄

css垂直導航代碼示例

ul

{

list-style-type:none;

margin:0;

padding:0;

}

a

{

display:block;

width:60px;

background-color:#dddddd;

}

• Home
• News
• Contact
• About

以上效果如下圖：

2.水平導航欄

css水平導航欄代碼示例

ul

{

list-style-type:none;

margin:0;

padding:0;

}

li

{

display:inline;

}

• Home
• News
• Contact
• About

效果如下圖：

這里主要涉及到的重要知識：

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

display:inline; -在默認情況下，

元素是塊元素。在這里，我們刪除換行符之前和之后每個列表項，以顯示一行 。

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

總結

以上是生活随笔為你收集整理的php导航条css代码生成器,怎么使用css代码制作网站导航栏？（示例）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。