设计导航栏和tab栏：要求设计五个页面，导航栏背景色为白色，文字为“测试”tab栏背景色为白色，选中颜色为红色

设计导航栏和Tab栏是一个常见的前端UI任务，通常用于组织网站或应用的主要入口。以下是基于您的需求的一个基本步骤描述：

**导航栏设计**：
1. **布局**：保持简洁，你可以选择水平或垂直布局。由于您提到背景色为白色，可以考虑将“测试”字样设为中心或居中对齐。
2. **样式**：创建一个白色的`<nav>`标签作为容器，设置宽度为100%。每个页面链接可以用`<a>`标签表示，文字内容为"测试"，字体颜色为黑色（CSS代码如：`.navbar a { color: black; }`）。
3. **选中状态**：为当前页添加特定类名（例如`.active`)，对应的CSS会改变其文本颜色为白色（`.navbar .active a { color: white; background-color: red;}`），以便用户识别。

**Tab栏设计**：
1. **结构**：同样采用类似的方式，使用`<ul>`和`<li>`创建一个Tab列表。每个`<li>`代表一个页面，同时包含一个内部的`<a>`标签。
2. **样式**：设置初始背景色为白色，当选中时（可能是通过JavaScript监听点击事件）改变背景色为红色。如`:hover`效果下背景变为灰色，选中时 `.tab-bar li.active` 类的背景色为红色。
3. 使用伪元素`:before`和`:after`添加合适的图标或者边框指示当前选中状态。

.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: white;
}
.tab-bar li {
  list-style-type: none;
  cursor: pointer;
}
.tab-bar li a {
  color: black;
  padding: 10px 20px;
}
.tab-bar li:hover {
  background-color: grey;
}
.tab-bar li.active {
  background-color: red;
  border-bottom: 4px solid red;
}