導航欄是網頁中非常重要的元素之一。在網頁中，導航欄能夠起到導向作用，幫助用戶迅速找到所需的內容。使用 CSS 樣式來設計一個漂亮的導航欄非常重要。下面我們來看看怎么使用 CSS 樣式來實現一個簡單的導航欄。

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">服務項目</a></li>
<li><a href="#">新聞資訊</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>

上面的代碼是一個簡單的導航欄的 HTML 結構。接下來我們可以為這個導航欄添加 CSS 樣式，并將導航欄的樣式美化。

nav {
background-color: #333; /* 導航背景色 */
height: 50px; /* 導航高度 */
}
nav ul {
list-style-type: none; /* 列表樣式 */
margin: 0;
padding: 0;
overflow: hidden; /* 隱藏溢出部分 */
}
nav li {
float: left; /* 浮動 */
}
nav li a {
display: block;
color: white; /* 顏色 */
text-align: center;
padding: 14px 16px; /* 上下左右內邊距 */
text-decoration: none; /* 去除下劃線 */
font-size: 16px;
}
nav li a:hover {
background-color: #111; /* 鼠標懸浮背景色 */
}

上面的 CSS 樣式可以讓導航欄變得美觀，更加易于用戶操作。我們可以根據具體場景，根據需求增刪一些樣式屬性，來實現更多樣式的效果。