要使用 CSS 制作选项卡，需要使用以下关键词和技术：
HTML 结构：选项卡通常使用 ul 和 li 元素来创建，每个选项卡都是一个 li 元素，选项卡的内容通常使用 div 元素包裹。
CSS 选择器：使用伪类选择器（:hover、:active）来为选项卡添加鼠标悬停和点击效果。
层叠样式表：使用 CSS 的样式规则来设置选项卡的外观和行为，例如设置选项卡的背景色、字体颜色、字体大小等样式属性。
下面是一个简单的选项卡示例：
HTML 结构：
<ul class="tab">
<li><a href="#tab1">选项卡1</a></li>
<li><a href="#tab2">选项卡2</a></li>
<li><a href="#tab3">选项卡3</a></li>
</ul>
<div id="tab1">选项卡1的内容</div>
<div id="tab2">选项卡2的内容</div>
<div id="tab3">选项卡3的内容</div>CSS 样式：
.tab {
list-style: none;
margin: 0;
padding: 0;
}
.tab li {
display: inline-block;
margin-right: 10px;
}
.tab li a {
display: block;
padding: 5px 10px;
background-color: #ccc;
color: #333;
text-decoration: none;
}
.tab li a:hover {
background-color: #333;
color: #fff;
}
.tab li a.active {
background-color: #fff;
color: #333;
}
#tab1,
#tab2,
#tab3 {
display: none;
}
#tab1:target,
#tab2:target,
#tab3:target {
display: block;
}解释：
ul 和 li 元素用于创建选项卡的整体结构，每个选项卡都是一个 li 元素，选项卡的标题使用 a 元素，并且设置 href 属性为对应的内容 div 元素的 id。
.tab 类用于设置选项卡的样式，包括去除标记样式（list-style: none）、margin 和 padding 为 0。
li 元素设置为 inline-block，使得选项卡水平排列，同时设置 margin-right 为 10px，增加选项卡之间的间距。
a 元素设置为 block，使得选项卡标题可以占据整个 li 元素的宽度，同时设置 padding、background-color、color 和 text-decoration 属性。
:hover 伪类选择器用于设置当鼠标悬停在选项卡标题上时的样式。
.active 类用于设置当前选中的选项卡标题的样式。
:target 伪类选择器用于设置当前选项卡标题对应的内容的样式，将它们的 display 属性设置为 block，以显示选项卡内容。
这样就可以通过 CSS 制作简单的选项卡了。