CSS 網頁選項卡樣例是一種在網頁設計中經常使用的技術。網頁選項卡可以幫助用戶快速瀏覽和選擇不同的內容，同時增加網頁的視覺效果和交互性。

下面是一個簡單的 CSS 網頁選項卡樣例。該樣例使用了 HTML 和 CSS 代碼，其中 HTML 代碼定義了選項卡的結構，而 CSS 代碼定義了選項卡的外觀和行為。

<div class="tab">
<button class="tablinks" onclick="openTab(event, 'tab1')">選項卡 1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">選項卡 2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">選項卡 3</button>
<div id="tab1" class="tabcontent">
<p>這是選項卡 1 的內容。</p>
</div>
<div id="tab2" class="tabcontent">
<p>這是選項卡 2 的內容。</p>
</div>
<div id="tab3" class="tabcontent">
<p>這是選項卡 3 的內容。</p>
</div>
</div>
<style>
/* 設置選項卡按鈕的樣式 */
.tab button {
background-color: #f7f7f7;
border: none;
outline: none;
cursor: pointer;
padding: 10px 20px;
margin-right: 5px;
font-size: 18px;
}
/* 設置選項卡按鈕被選中后的樣式 */
.tab button.active {
background-color: #ccc;
}
/* 設置選項卡內容的樣式 */
.tabcontent {
display: none;
padding: 20px;
border: 1px solid gray;
}
/* 設置選項卡內容被選中后的樣式 */
.tabcontent.show {
display: block;
}
</style>

在上述代碼中，我們使用了一個 div 元素，類名為 "tab"，來包含所有的選項卡按鈕和內容。每個按鈕使用了一個 button 元素，類名為 "tablinks"，來觸發對應的選項卡內容。每個選項卡內容使用了一個 div 元素，類名為 "tabcontent"，來包含具體的內容。

在 CSS 代碼中，我們使用了一些選擇器來分別對選項卡按鈕、選項卡內容以及它們的狀態設置樣式。使用了 ".tab button.active" 這個選擇器可以確保選項卡內容始終呈現在按鈕下方。使用了 JavaScript 代碼可以確保點擊按鈕時正確顯示對應的選項卡內容。

總之，CSS 網頁選項卡是一種非常實用和流行的技術，同時也是網頁設計中重要的一環。通過前端技術不斷創新和拓展，可以讓網頁選項卡的形式和功能更加多樣化和實用化。