CSS做Tab是讓網站設計變得更加美觀和易于使用的好方法。Tab通常用于網站上的導航菜單或分類標簽。它們可以讓用戶快速瀏覽網站中的不同內容。下面介紹如何使用CSS做Tab。

/* 創建Tab容器 */
.tab-container {
display: flex;
justify-content: center;
align-items: center;
}
/* 創建Tab導航菜單 */
.tab-nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #eee;
padding: 10px;
}
/* 設置Tab激活狀態 */
.tab-nav .active {
background-color: #fff;
font-weight: bold;
}
/* 創建Tab內容區域 */
.tab-content {
display: none;
padding: 10px;
}
/* 設置Tab激活狀態 */
.tab-content.active {
display: block;
}

需要在HTML中添加Tab的標記，并包裹進創建的Tab容器中：

<div class="tab-container">
<nav class="tab-nav">
<a href="#tab1" class="active">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a href="#tab3">Tab 3</a>
</nav>
<div id="tab1" class="tab-content active">
<p>內容1</p>
</div>
<div id="tab2" class="tab-content">
<p>內容2</p>
</div>
<div id="tab3" class="tab-content">
<p>內容3</p>
</div>
</div>

可以看到，首先創建一個名為“tab-container”的CSS類來作為Tab的容器，然后通過對標簽使用display:flex屬性創建一個彈性盒子，使子元素（導航菜單和內容區域）將水平對齊，同時將縱向居中。接下來，創建名為“tab-nav”的CSS類，用于創建Tab導航菜單，并使用justify-content：space-between屬性在各個Tab鏈接之間創建空間。在“tab-nav”內部，active類用于指示當前展開的Tab，因此可以設置背景色和粗體文本等樣式。對于內容區域，創建名為“tab-content”的CSS類，并將其隱藏。然后定義active類，以在當前Tab被激活時顯示出來。最后，在HTML中將創建的Tab標記包裹在創建的“tab-container”類中，為每個Tab鏈接設置href屬性，并將每條鏈接與其相應的內容區域鏈接在一起。