選項卡是網頁中常見的一個元素，用于展示不同的內容。在這篇文章中，我們將介紹如何用CSS來實現選項卡。 首先，我們需要在HTML中創建選項卡的結構。使用ul和li標簽來創建一個無序列表，li標簽中嵌套a標簽，用于展示選項卡的標題。每個選項卡對應一個div標簽，用于展示對應的內容。以下是一個基本的選項卡結構：

<ul class="tabs">
<li><a href="#tab1">選項卡1</a></li>
<li><a href="#tab2">選項卡2</a></li>
<li><a href="#tab3">選項卡3</a></li>
</ul>
<div class="tab-content">
<div id="tab1">選項卡1的內容</div>
<div id="tab2">選項卡2的內容</div>
<div id="tab3">選項卡3的內容</div>
</div>

接下來，我們要用CSS來實現選項卡的樣式。首先，設置ul標簽的樣式：

.tabs {
list-style: none; /* 去掉圓點 */
margin: 0;
padding: 0;
}

然后，設置li標簽的樣式：

.tabs li {
float: left;
}
.tabs li a {
display: block;
padding: 10px 20px;
background-color: #eee;
color: #333;
text-decoration: none;
border: 1px solid #ccc;
border-radius: 5px 5px 0 0;
}
.tabs li.active a{
background-color: #fff; /* 激活狀態的背景色為白色 */
border-bottom: none; /* 激活狀態的底部邊框設為無 */
}

上面的代碼設置了選項卡標題的樣式，包括背景色、邊框等。另外，我們還為激活狀態的選項卡設置了不同的樣式，使其與其他選項卡區別開來。 最后，設置選項卡內容的樣式：

.tab-content div {
display: none; /* 隱藏所有內容 */
padding: 10px;
}
.tab-content div.show {
display: block; /* 顯示激活狀態的內容 */
}

這段代碼設置了選項卡內容的樣式，包括隱藏所有內容和顯示激活狀態的內容。 綜上所述，我們可以用上述代碼來實現一個選項卡。請注意，以上僅僅是基本的選項卡實現，具體的樣式會隨著需求的不同而有所變化。