html底部导航栏代码css

下面是一个简单的 HTML 底部导航栏代码的 CSS 样式示例：

footer {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin: 0 10px;
}

nav a {
  color: #666;
  text-decoration: none;
  font-size: 16px;
  padding: 5px;
}

nav a:hover {
  color: #333;
  background-color: #f2f2f2;
  border-radius: 5px;
}

这些 CSS 样式将底部导航栏的背景设置为淡灰色，并在底部添加一些内边距。`nav ul` 使用了 `flex` 布局，将导航栏中的列表项水平居中。`nav li` 为列表项添加了一些水平间距。`nav a` 设置链接的样式，包括颜色、字体大小和内边距。`nav a:hover` 在鼠标悬停在链接上时，将链接的颜色设置为深灰色，并添加一些背景色和圆角的效果。