今天我們來介紹一下如何用CSS生成導航欄代碼。導航欄通常是網站中非常重要的部分，方便用戶快速訪問網站的不同部分。下面是一個簡單的導航欄，我們將用CSS來實現。
首先，我們需要創建一個HTML文件，包含以下代碼：
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav>這個HTML文件包括一個nav元素和一個無序列表（ul）包含四個列表項（li），每個列表項包含一個鏈接（a）。 我們要使用CSS樣式來美化這個導航欄。首先，我們要設置nav元素的樣式：
nav{
background-color:#333;
display:inline-block;
width:100%;
text-align:center;
}這個樣式將導航欄設置成黑色(#333)，寬度為100%。text-align:center將鏈接居中放置。接下來，我們要設置ul的樣式：ul{
list-style:none;
padding:0;
margin:0;
}設置list-style:none將列表的默認樣式去掉，padding和margin設置為0，消除任何空白。
最后，我們要設置每個列表項的樣式：li{
display:inline-block;
margin:0;
padding:0;
}使用display:inline-block將列表項設置為橫向排列，margin和padding都設置為0，消除任何間隔。
最后一步是設置鏈接的樣式：a{
display:inline-block;
color:#fff;
padding:10px 20px;
text-decoration:none;
font-size:20px;
}這些樣式將把鏈接設置成白色，用padding使鏈接更加易于點擊，text-decoration:none將去掉下劃線，font-size設置字體大小。
這就是我們的CSS代碼！現在，我們在HTML文件中添加樣式鏈接：<head> <link rel="stylesheet" href="my.css"> </head>我們把CSS文件命名為“my.css”。 在瀏覽器中打開HTML文件，你應該可以看到一個漂亮的導航欄了！這是一個非常基本的導航欄，但是你可以用這個基本框架來創建自己的風格和設計。
上一篇jquery 組合數據