CSS特效已經成為了網頁設計中不可或缺的一部分。在這里，我們將會學到如何創建一個簡單卻非常實用的選項卡。

HTML代碼如下：
<div class="tab">
<ul class="tab-title">
<li class="active">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="tab-content">
<div class="active">
<p>這是選項卡1的內容</p>
</div>
<div>
<p>這是選項卡2的內容</p>
</div>
<div>
<p>這是選項卡3的內容</p>
</div>
</div>
</div>
CSS代碼如下：
.tab{
width: 500px;
margin: 0 auto;
}
.tab-title{
list-style: none;
margin: 0;
padding: 0;
}
.tab-title li{
float: left;
margin-right: 10px;
padding: 10px;
background-color: #ccc;
cursor: pointer;
}
.tab-title li.active{
background-color: #fff;
}
.tab-content{
clear: both;
padding: 10px;
background-color: #fff;
}
.tab-content div{
display: none;
}
.tab-content div.active{
display: block;
}

通過上述代碼，我們可以看到，我們首先需要一個div來包裹整個選項卡，然后在其內部分別放置一個ul和一個div。在ul中，我們放置了多個li標簽，用于表示不同的選項卡。在div中，我們還需要放置多個div標簽，分別表示不同選項卡的內容。

然后，我們通過CSS來為這些元素添加樣式。首先，我們將ul標簽樣式設為無序列表，然后通過float屬性實現選項卡的橫向排列。通過給li標簽添加不同的背景色，我們還能實現選項卡懸停和選中時顏色的變化。最后，通過給content div中添加display:none樣式，我們實現了默認只顯示第一個選項卡的內容。

在實際應用中，我們還可以通過JS來實現選項卡與內容的動態切換，以便為用戶提供更友好、更便捷的交互體驗。