下面給大家列舉出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>
以上效果如：
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>
效果如：
這裡主要涉及到的重要知識：
display：其 屬性規定元素應該產生的框的類型。這個屬性是用於定義建立布局時元素產生的顯示框類型。對於 HTML 等文件類型，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示階層。對於 XML，由於 XML 沒有內建的這種階層，所有 display 是絕對必要的。
display:inline; -在預設情況下，<li>元素是塊元素。在這裡，我們刪除分行符號之前和之後每個清單項目，以顯示一行 。
那麼以上就是針對在網頁中css導航怎麼做的這個問題進行了相關介紹，具有一定的參考價值。希望對大家有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
