css tab美化

CSS是一种非常强大的样式语言，可以用来优化和美化网站的外观和用户体验。在网页设计中，标签页（Tab）是一种经常使用的工具，可以使用户轻松浏览网站不同部分的内容。本文将介绍如何使用CSS为标签页添加美观的效果。

/* 创建标签页样式 */
.tab {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  background: #eee;
}

/* 创建标签按钮样式 */
.tab button {
  background-color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  margin-right: 5px;
}

/* 添加悬停效果 */
.tab button:hover {
  background-color: #ddd;
}

/* 添加选中效果 */
.tab button.active {
  background-color: #007aff;
  color: #fff;
}

以上代码创建了一个基础的标签页样式，接下来我们创建一个HTML文件并使用该样式。

<div class="tab">
  <button class="active">标签1</button>
  <button>标签2</button>
  <button>标签3</button>
  <button>标签4</button>
</div>

这会在HTML文档中创建一个包含四个标签的标签页。第一个标签被设置为活动状态，因此它的样式应该是不同于其他标签的。接下来，我们可以添加JS代码以使标签按钮的状态在点击时发生变化。