在網(wǎng)頁設(shè)計中，導(dǎo)航欄可以說是非常重要的一個元素，能夠更好的讓用戶了解網(wǎng)站的整個架構(gòu)和內(nèi)容。而CSS技術(shù)就可以讓我們輕松地實現(xiàn)各種酷炫的導(dǎo)航欄效果。
下面是一個基本的水平導(dǎo)航欄代碼示例：

/* CSS樣式代碼 */
<br>
nav {
background-color: #333;   /* 設(shè)置導(dǎo)航欄背景顏色 */
overflow: hidden;
}
<br>
nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<br>
nav a:hover {
background-color: #ddd;   /* 鼠標(biāo)滑過時改變背景顏色 */
color: black;
}
<br>
.active {
background-color: #4CAF50;  /* 設(shè)置當(dāng)前選中項背景顏色 */
}
<br>

上述代碼中，我們首先創(chuàng)建了一個nav元素作為導(dǎo)航欄的容器，并設(shè)置了其背景顏色為#333，同時使用overflow: hidden屬性來清除浮動。
然后，我們?yōu)閷?dǎo)航欄中每個鏈接定義樣式，使用了浮動屬性讓所有鏈接在同一行顯示，并設(shè)置了文字顏色、對齊方式、間距等相關(guān)樣式。此外，鼠標(biāo)滑過時會改變背景顏色和文字顏色，這可以增加用戶體驗。
最后，我們通過給選中項添加.active類來定義選中項的背景顏色。
這是一個基本的、簡單的導(dǎo)航欄效果代碼，您可以根據(jù)實際需求自行修改和補(bǔ)充。