css-写一个导航栏

HTML代码：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">新闻资讯</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS代码：

nav {
  background-color: #333;  /* 导航栏背景色 */
  color: #fff;  /* 导航栏文字颜色 */
  font-size: 16px;  /* 导航栏文字大小 */
  height: 50px;  /* 导航栏高度 */
}

nav ul {
  list-style: none;  /* 去掉列表样式 */
  margin: 0;  /* 去掉默认外边距 */
  padding: 0;  /* 去掉默认内边距 */
  display: flex;  /* 使用 Flex 布局 */
  justify-content: center;  /* 水平居中 */
  align-items: center;  /* 垂直居中 */
  height: 100%;  /* 让子元素撑满父元素 */
}

nav ul li {
  margin: 0 10px;  /* 左右间距 */
}

nav ul li a {
  color: #fff;  /* 链接文字颜色 */
  text-decoration: none;  /* 去掉下划线 */
  padding: 10px;  /* 上下间距 */
  border-radius: 5px;  /* 圆角 */
  transition: background-color 0.3s ease;  /* 过渡效果 */
}

nav ul li a:hover {
  background-color: #fff;  /* 鼠标悬停时背景色 */
  color: #333;  /* 鼠标悬停时文字颜色 */
}

效果预览：