頁面選項卡是網頁中常見的一種導航方式，可以在同一個頁面中展示多個內容區域，讓頁面更加清晰、詳盡。使用CSS樣式可以為選項卡增加更多的交互效果和美觀風格。

下面是一個使用CSS實現選項卡效果的示例代碼：

HTML部分：
<div class="tab">
<ul class="tab-nav">
<li class="active"><a href="#">選項卡1</a></li>
<li><a href="#">選項卡2</a></li>
<li><a href="#">選項卡3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active">選項卡1的內容</div>
<div class="tab-pane">選項卡2的內容</div>
<div class="tab-pane">選項卡3的內容</div>
</div>
</div>
CSS部分：
.tab-nav li.active a,
.tab-nav li:hover a {
background-color: #eee;
}
.tab-content .tab-pane {
display: none;
}
.tab-content .active {
display: block;
}

以上代碼實現了選項卡的基本功能。在HTML中，選項卡的標題和對應的內容區域被分別封裝在tab-nav和tab-content中。通過CSS樣式設置，選項卡標題在激活狀態下會被高亮，點擊選項卡標題會切換對應的內容區域。

除了基本的樣式設置，我們還可以通過CSS實現更多的選項卡效果，如淡入淡出、滑動等動畫效果，以及不同的布局和風格風格樣式的設置。使用CSS可以讓我們更加靈活地實現選項卡的設計和布局，為網頁增加更多的交互性和美觀度。