HTML CSS選項卡設置 選項卡是網頁設計中常用的功能，它可以讓用戶方便地瀏覽不同的內容。使用HTML和CSS很容易就可以創建一個選項卡。 首先，我們需要一個HTML結構來容納選項卡。我們可以使用ul和li標簽來創建一個簡單的列表，每個列表項表示一個選項卡。

<ul class="tab">
<li class="active"><a href="#tab-1">選項卡1</a></li>
<li><a href="#tab-2">選項卡2</a></li>
<li><a href="#tab-3">選項卡3</a></li>
</ul>

每個li標簽中包含了一個a標簽，這個a標簽用來表示選項卡的標題文字。我們可以給每個li標簽添加一個class屬性，來表示當前選中的選項卡，同時在a標簽中添加一個href屬性，來指向選項卡中對應的內容區域。 接下來，我們需要CSS來定義我們的選項卡樣式。首先，我們需要定義一個.tab的樣式來設置選項卡的基本樣式。

.tab {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ddd;
}

這個樣式設置了列表項的樣式為無序列表，去掉了列表默認的樣式，將各個選項卡設置為水平排列，并在底部添加了一個1像素的灰色邊框。 接下來，我們需要為每個選項卡定義樣式，以區分選中狀態和非選中狀態的樣式。

.tab li {
flex-basis: 0;
flex-grow: 1;
padding: 10px;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tab li.active {
background-color: #f1f1f1;
}
.tab li a {
color: #333;
text-decoration: none;
}
.tab li.active a {
font-weight: bold;
}

這個樣式設置了li標簽的樣式，使用flex布局，將每個選項卡的寬度平分，并且添加了一些padding和圓角邊框樣式。其中，li.active表示選中狀態的樣式，將背景顏色設置為淺灰色。此外，我們還為a標簽設置了字體顏色和劃線樣式，并在選中狀態下加粗字體。 最后，我們需要定義選項卡內容的樣式，使得它們與選項卡標題對應。

.tab-content {
display: none;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.tab-content.active {
display: block;
}

這個樣式設置了.tab-content的樣式，將它們初始狀態設置為不可見，并添加了一些padding和外觀樣式。同時，.tab-content.active設置選中狀態下的樣式，將它們顯示出來。 現在，我們就可以通過簡單的HTML和CSS代碼創建一個選項卡效果了。只需要將它們復制到你的網頁中，并設置正確的鏈接和內容，就可以自己制作出漂亮實用的選項卡效果了！