現在，在Web前端開發中，一個漂亮的CSS導航欄已經成為了網站設計的必備元素之一。那么，如何編寫一個優美的CSS導航欄呢？下面就來看一下一段優美的CSS導航欄代碼：

/*定義導航欄樣式*/
.nav {
width: 800px;
height: 50px;
margin: 0 auto; /*設置導航欄居中*/
line-height: 50px;
}
/*定義導航鏈接樣式*/
.nav a {
display: inline-block;
padding: 0 20px;
color: #000000;
text-align: center;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
/*設置鼠標懸浮樣式*/
.nav a:hover {
background-color: #ffffff;
color: #4bbcfe;
}

在上述代碼中，首先定義了導航欄的樣式，寬度為800px，高度為50px，居中對齊，并設置了行高。接著定義了導航鏈接的樣式，使用了inline-block屬性，讓導航鏈接能夠在一行內顯示，并設置了鏈接的padding、顏色、對齊方式、字體大小和粗細、以及取消下劃線等。最后，設置了鼠標懸浮樣式，當鼠標懸浮在鏈接上時，背景顏色變為白色，文字顏色變為藍色。

這段代碼簡單易懂，代碼量也不大，相信可以讓大家在頁面設計中能夠輕易套用，使網站變得更加美觀、流暢、舒適！