在網頁開發中，設置導航欄是常見的需求。使用CSS可以輕松地實現導航欄的樣式和交互效果。下面是一個關于如何使用CSS設置導航欄的教程。

// HTML代碼
<ul class="navigation">
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">聯系我們</a></li>
</ul>

在上面的HTML代碼中，我們使用<ul>和<li>元素來創建導航欄。

// CSS代碼
.navigation {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
display: flex;
justify-content: center;
}
.navigation li {
flex: 1;
text-align: center;
}
.navigation li a {
display: block;
color: #fff;
padding: 12px 16px;
text-decoration: none;
}
.navigation li a:hover {
background-color: #111;
}

在CSS代碼中，我們設置了導航欄的樣式和交互效果。具體來說：

• 我們將<ul>的列表樣式設為none，設置了一些基本的邊距和背景色；
• 我們使用了flexbox布局，讓導航欄的各個選項水平居中排列；
• 我們為每個<li>元素設置了flex:1屬性，使它們平均分配導航欄的寬度；
• 我們為每個<a>元素設置了樣式，使它們可以作為塊元素顯示，并設置一些基本的邊距和顏色；
• 我們使用:hover偽類為選定的<a>元素設置了鼠標懸停樣式。

通過以上步驟，我們就可以輕松地實現導航欄的樣式和交互效果了。當然，在實際開發中，我們還可以根據需求進行更加細致的調整。