CSS選項卡是一種簡單實用的網頁制作技巧，可以實現頁面內容的分組和靈活的顯示效果。在介紹具體實現之前，我們先來看一下選項卡的基本結構。

<div class="tab-container">
<ul class="tab-title">
<li class="active">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="tab-content">
<div class="active">選項卡1的內容</div>
<div>選項卡2的內容</div>
<div>選項卡3的內容</div>
</div>
</div>

上面是一個簡單的選項卡結構，包括一個ul標簽和一些li標簽作為選項卡的標題，以及div標簽和一些div子元素作為選項卡的內容。其中，選中的選項卡標題和內容用active類來標記。

接下來，我們可以使用CSS來對這個結構進行樣式設置，來達到選項卡的效果。主要的樣式代碼如下：

.tab-container {
border: 1px solid #ccc;
margin: 10px;
}
.tab-title {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.tab-title >li {
flex: 1;
text-align: center;
padding: 10px;
cursor: pointer;
}
.tab-title >li.active {
background-color: #fff;
border-top: 2px solid #f60;
}
.tab-content >div {
display: none;
padding: 20px;
}
.tab-content >div.active {
display: block;
}

通過以上CSS樣式設置，我們就可以完成一個簡單的CSS選項卡。在這個效果中，可以通過點擊選項卡的標題來切換相應的內容，而同時保留其他選項卡的標題和內容。這樣可以讓頁面更加簡潔，內容更加分類和聚焦。