CSS導航選項卡是網站中常用的一種導航方式。它通過設置不同的樣式和狀態，使用戶可以快速地找到所需的內容。下面我們來學習一下如何使用CSS來創建一個簡單的導航選項卡。

<div class="nav">
<a href="#" class="active">首頁</a>
<a href="#">新聞</a>
<a href="#">產品</a>
<a href="#">聯系我們</a>
</div>
<style>
/* 設置導航樣式 */
.nav {
background-color: #eee;
overflow: hidden;
}
/* 設置導航中每個選項卡的樣式 */
.nav a {
float: left;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 設置選中狀態下選項卡的樣式 */
.nav a.active {
background-color: #4CAF50;
color: white;
}
/* 設置鼠標懸停狀態下選項卡的樣式 */
.nav a:hover {
background-color: #ddd;
color: black;
}
</style>

在上面的代碼中，我們首先使用了一個div標簽來包含我們的導航選項卡。然后，我們對導航進行了一些樣式的設置，使它看起來更加美觀。接著，我們通過設置a標簽的樣式和不同狀態下的樣式，來設置每個選項卡的樣式。最后，我們將所有的CSS代碼放在style標簽內，使其生效。

這是一個非常簡單的實例，您可以根據自己的需要來進行擴展和修改。例如，您可以通過設置不同的顏色、圖形或字體來增加選項卡的樣式。您還可以使用JavaScript來實現懸?；螯c擊選項卡時的動態效果。