導航欄在網頁設計中扮演著非常重要的角色，它連接了各個頁面或者模塊，方便用戶快速的在網站中尋找自己需要的信息。而導航欄的樣式很多時候也是網頁設計中的一個亮點，因此我們需要學習如何編寫導航欄的CSS代碼，讓它更加美觀實用。

.nav{
display:flex; /*開啟flex布局*/
justify-content: space-between; /*把nav里面的每個item分別向兩側靠攏*/
align-items:center; /*在交叉軸上居中內容*/
background-color:#ffffff;/*背景顏色*/
}
.nav ul{
list-style:none; /*去除無序列表的樣式*/
display:flex; /*開啟flex布局*/
margin:0;
padding:0;
}
.nav ul li{
margin-right:30px; /*每個item之間的間距*/
}
.nav ul li:last-of-type{
margin-right:0; /*最后一個item沒有間距*/
}
.nav ul li a{
text-decoration:none; /*去除超鏈接下劃線*/
font-size:16px; /*字體大小*/
color:#444444; /*字體顏色*/
transition: all 0.3s ease; /*動畫效果*/
}
.nav ul li a:hover{
color:#ff6600; /*鼠標懸浮字體顏色*/
transform: translateY(-3px); /*向上移動3px*/
}

上述代碼中，我們使用了flex布局，實現了導航欄的居中對齊以及item之間的分布效果，使得導航欄更加美觀和實用。而hover時的動畫效果也使得導航欄更具有交互性。通過對CSS代碼的了解和掌握，我們可以打造出更加個性化的導航欄。