選項(xiàng)卡是常見的網(wǎng)頁交互方式，利用 CSS 可輕松地實(shí)現(xiàn)選項(xiàng)卡效果。下面是一個(gè)簡單的例子：

<div class="tabs-container">
<ul class="tabs-nav">
<li class="active"><a href="#tab1">選項(xiàng)卡1</a></li>
<li><a href="#tab2">選項(xiàng)卡2</a></li>
<li><a href="#tab3">選項(xiàng)卡3</a></li>
</ul>
<div class="tabs-content">
<div class="tab-panel active" id="tab1">
<p>這是選項(xiàng)卡1的內(nèi)容</p>
</div>
<div class="tab-panel" id="tab2">
<p>這是選項(xiàng)卡2的內(nèi)容</p>
</div>
<div class="tab-panel" id="tab3">
<p>這是選項(xiàng)卡3的內(nèi)容</p>
</div>
</div>
</div>
<style>
.tabs-container {
margin: 0 auto;
max-width: 600px;
}
.tabs-nav {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
.tabs-nav li {
margin: 0 1rem;
}
.tabs-nav li.active a {
color: red;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
</style>

如上面的代碼所示，選項(xiàng)卡的 HTML 結(jié)構(gòu)包含一個(gè)選項(xiàng)卡導(dǎo)航和對(duì)應(yīng)的內(nèi)容區(qū)域。導(dǎo)航使用無序列表實(shí)現(xiàn)，每個(gè)選項(xiàng)卡由一個(gè)列表項(xiàng)表示，內(nèi)容部分使用一個(gè) div 外層包裹，選項(xiàng)卡內(nèi)容使用內(nèi)部的 div 包裹。

通過 CSS，可以為選項(xiàng)卡導(dǎo)航和內(nèi)容區(qū)域添加樣式。使用 flex 布局使導(dǎo)航水平居中，項(xiàng)與項(xiàng)之間設(shè)置間隔。選中的選項(xiàng)卡導(dǎo)航樣式可以通過設(shè)置選中項(xiàng)的類名修改，這里為 active。內(nèi)容區(qū)域的隱藏和顯示是通過設(shè)置樣式 display 實(shí)現(xiàn)，選中的選項(xiàng)卡的類名控制顯示。

以上是一個(gè)簡單的選項(xiàng)卡的實(shí)現(xiàn)，可以根據(jù)實(shí)際需求添加更多的樣式和交互效果。