網頁設計中，導航欄常常是一個網頁最重要的組成部分之一。它不僅給網頁帶來了良好的可視性與可用性，還能提高用戶的導航效率。要設計出一個美觀、實用的導航欄，離不開css代碼的幫助。
我們可以使用各種css屬性、偽類等去設計導航欄。下面是一個例子。
首先，我們創建一個帶有導航欄的html文件，代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Navigation Bar</title> <style> /* css代碼 */ </style> </head> <body> <nav> <a href="#">Home</a> <a href="#">Services</a> <a href="#">Projects</a> <a href="#">Contact</a> </nav> </body> </html>以上代碼中，我們創建了一個導航欄，其中包含了四個鏈接：Home、Services、Projects和Contact。接下來，我們來設計一下這個導航欄的樣式。 我們可以使用以下的css代碼去設計導航欄：
nav {
background-color: #333; /* 導航欄的背景顏色 */
overflow: hidden;
}
nav a {
float: left; /* 左浮動 */
display: block; /* 轉為塊狀元素 */
color: white; /* 文本顏色 */
text-align: center; /* 文本居中 */
padding: 14px 16px; /* 內邊距 */
text-decoration: none; /* 取消下劃線 */
}
nav a:hover {
background-color: #ddd; /* 鼠標移入時的背景顏色 */
color: black; /* 鼠標移入時的文本顏色 */
}以上代碼中，我們首先為導航欄設置了一個背景顏色，接著使用overflow: hidden;屬性來清除浮動之后導致的高度塌陷問題。然后，我們對每個鏈接元素設置了一些樣式，包括將它們左浮動，并將它們轉為塊狀元素，設置文本顏色、文本居中和內邊距等。同時，我們還使用了text-decoration: none;屬性來取消下劃線。
最后，我們再使用nav a:hover選擇器來為鼠標移入時的鏈接元素設置一些樣式，例如背景顏色和文本顏色。
通過以上的css代碼，我們成功地為我們的導航欄設計出了一個美觀、實用的樣式。上一篇html+form+代碼
下一篇html 鼠標經代碼