css 制作tab页

使用HTML和CSS制作Tab页

HTML结构通常包含一个包含标签标题的容器和一个包含内容的容器。标签标题使用<ul>和<li>元素，内容使用<div>元素。

<div class="tab-container">
  <ul class="tab-titles">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div class="tab-contents">
    <div class="tab-content active">Content 1</div>
    <div class="tab-content">Content 2</div>
    <div class="tab-content">Content 3</div>
  </div>
</div>

CSS样式设置

基础样式包括标签标题的布局和内容的显示控制。标签标题通常水平排列，内容默认隐藏，只有活动标签的内容显示。

.tab-titles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  border-bottom: 1px solid #ccc;
}

.tab-titles li {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  margin-right: 5px;
}

.tab-titles li.active {
  border-color: #ccc;
  border-bottom-color: #fff;
  background: #fff;
}

.tab-contents {
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

添加交互效果

使用CSS的:hover伪类为标签标题添加悬停效果，增强用户体验。

.tab-titles li:hover {
  background-color: #f0f0f0;
}

响应式设计

通过媒体查询调整标签布局，以适应不同屏幕尺寸。在小屏幕上，标签标题可以垂直排列。

@media (max-width: 600px) {
  .tab-titles {
    flex-direction: column;
  }

  .tab-titles li {
    margin-right: 0;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
  }

  .tab-titles li.active {
    border-bottom-color: #ccc;
  }
}

使用CSS变量

通过CSS变量统一管理颜色和间距，便于维护和修改。

:root {
  --tab-border-color: #ccc;
  --tab-active-bg: #fff;
  --tab-hover-bg: #f0f0f0;
  --tab-padding: 10px 20px;
}

.tab-titles {
  border-bottom: 1px solid var(--tab-border-color);
}

.tab-titles li {
  padding: var(--tab-padding);
}

.tab-titles li.active {
  background: var(--tab-active-bg);
}

.tab-titles li:hover {
  background-color: var(--tab-hover-bg);
}

动画效果

为内容切换添加淡入淡出效果，提升视觉体验。

.tab-content {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tab-content.active {
  opacity: 1;
}