導(dǎo)航欄是網(wǎng)站設(shè)計(jì)中常用的一種組件，可以幫助用戶快速找到需要的內(nèi)容。在網(wǎng)站開發(fā)中，使用CSS樣式來制作導(dǎo)航欄可以使頁面更加美觀、清晰。下面就介紹一下如何用CSS樣式制作導(dǎo)航欄。

/*導(dǎo)航欄樣式*/
nav{
background-color: #333; /*背景色*/
color:#fff; /*文字顏色*/
height: 50px; /*高度*/
display: flex; /*設(shè)置為彈性盒子*/
justify-content: space-between; /*兩端對(duì)齊*/
align-items: center; /*垂直居中*/
}
/*導(dǎo)航項(xiàng)樣式*/
nav ul{
list-style: none; /*去掉列表標(biāo)記*/
display: flex; /*設(shè)置為彈性盒子*/
justify-content: center; /*居中對(duì)齊*/
align-items: center; /*垂直居中*/
}
nav ul li{
margin-right: 20px; /*設(shè)置項(xiàng)之間的間距*/
}
nav ul li a{
text-decoration: none; /*去掉鏈接下劃線*/
color:#fff; /*鏈接顏色*/
}
/*當(dāng)前導(dǎo)航項(xiàng)樣式*/
nav ul .current a{
font-weight: bold; /*當(dāng)前項(xiàng)加粗*/
}

上面的代碼中，首先是對(duì)導(dǎo)航欄整體的樣式設(shè)置，設(shè)置背景色、文字顏色、高度等；然后對(duì)導(dǎo)航欄下的每個(gè)項(xiàng)進(jìn)行樣式設(shè)置，設(shè)置為彈性盒子，并設(shè)置項(xiàng)之間的間距；最后設(shè)置當(dāng)前選中項(xiàng)的樣式，加粗字體。

使用上述代碼樣式，結(jié)合HTML代碼如下：

使用CSS樣式制作導(dǎo)航欄可以輕松實(shí)現(xiàn)美觀清晰的效果，給用戶帶來更好的用戶體驗(yàn)。