CSS導航選項卡是網頁設計中常用的一種元素，它可以用來顯示網站導航欄上的主要菜單項。通過CSS和一些簡單的HTML代碼，我們可以實現漂亮的導航選項卡，使網站更加完美。本篇文章將介紹如何用CSS來創建導航選項卡。

<ul class="nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

上面的代碼片段展示了一個基本的導航選項卡結構。我們使用<ul>和<li>標簽來創建導航選項卡，類名為“nav-tabs”可以作為我們的樣式選擇器。<a>標簽包含鏈接和選項卡中顯示的文本。

接下來，使用CSS為導航選項卡添加樣式：

.nav-tabs {
list-style:none;
margin:0;
padding:0;
display: inline-block;
}
.nav-tabs li {
display:inline;
float:left;
margin-right:20px;
padding:2px 10px;
border:1px solid #999;
}
.nav-tabs li.active a {
background-color:#ffffcc;
}
.nav-tabs li:hover a {
background-color:#cccccc;
}

上面這段CSS代碼包括針對導航選項卡元素的一些基本樣式，如去除默認的列表符號，水平排列選項卡，為選項卡設置邊框和間距，并為選中的選項卡和鼠標懸停的選項卡設置背景色。

現在，我們已經實現了一個基本的導航選項卡，當然您可以進一步加強它的樣式來使它更漂亮。探索一下CSS的各種屬性，打造出滿意的導航選項卡效果！