在制作網頁時，導航條是常常使用的一個部分。下面我們來介紹一下如何用CSS制作一個簡單的導航條。

.nav {
background-color: #f2f2f2; /* 設置背景色 */
padding: 10px; /* 設置內邊距 */
list-style: none; /* 取消列表標記 */
}
.nav li {
display: inline-block; /* 將元素變成內聯塊元素 */
margin-right: 20px; /* 設置每個按鈕之間的間距 */
}
.nav a {
text-decoration: none; /* 取消下劃線 */
color: #333; /* 設置字體顏色 */
font-weight: bold; /* 設置字體加粗 */
}
.nav a:hover {
color: #fff; /* 設置鼠標懸停時的字體顏色 */
background-color: #333; /* 設置鼠標懸停時的背景色 */
}

以上CSS代碼中，我們使用了一個nav類來表示導航條。我們先為這個類設置了背景色和內邊距。然后，我們使用了list-style屬性來取消列表標記。

接下來，我們為導航條中的每個按鈕設置了一個li類，并將它們設置為inline-block元素，這樣它們會排列在同一行。我們還為每個按鈕之間設置了一定的間距。

最后，我們為每個按鈕中的鏈接設置了一個a類。在a類中，我們取消了下劃線，并設置了字體顏色和加粗。當鼠標懸停在按鈕上時，我們改變了字體顏色和背景色。

通過以上CSS代碼，我們就可以輕松制作一個簡單的導航條了。