使用HTML和CSS创建一个简单的导航栏。导航栏应包含以下几个链接：首页、关于我们、产品、联系我们。导航栏的样式和布局可以根据个人喜好进行设计，但需要包含悬停效果和点击效果。 编程语言：HTML和CSS 题目要求： 使用HTML创建导航栏的结构，使用CSS设置导航栏的样式和布局。 导航栏的每个链接应包含适当的HTML标签，并设置合适的样式以显示为横向排列的链接列表。 当鼠标悬停在链接上时，链接应具有明显的悬停效果，可以改变背景颜色、文字颜色或添加其他动画效果。 当链接被点击时，可以通过改变样式或添加其他效果来表示链接的活动状态。

以下是一个简单的导航栏的HTML和CSS代码示例：

HTML代码：

<nav>
  <ul>
    <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;
  height: 50px;
  display: flex;
  justify-content: center;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

li {
  margin: 0 10px;
}

a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  padding: 15px 20px;
}

a:hover {
  background-color: #555;
}

a.active {
  background-color: #fff;
  color: #333;
}

在上述代码中，我们使用了HTML的`<nav>`元素来定义导航栏的结构，`<ul>`和`<li>`元素来创建链接列表，`<a>`元素用于包含每个链接的文本内容和链接地址。

在CSS中，我们设置了导航栏的背景颜色、高度和居中对齐。链接列表的样式设置为去除默认的列表样式，并使用`flexbox`布局使链接横向排列。每个链接的样式设置为块级元素，具有一些内边距、文字颜色和字体大小。当鼠标悬停在链接上时，我们使用`hover`伪类来改变链接的背景颜色。当链接被点击时，使用`.active`类来改变链接的样式表示其活动状态。