html+css做一个导航栏，点击导航栏的时候，导航栏下方展示内容，进入默认点击了第一个

好的，以下是一个简单的 HTML + CSS 导航栏实现，点击导航栏时下方对应的内容会显示出来，初始时默认显示第一个导航栏对应的内容。

HTML代码：

<div class="container">
  <ul class="nav">
    <li class="active"><a href="#">导航1</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
  </ul>
  <div class="content">
    <div class="item active">导航1对应的内容</div>
    <div class="item">导航2对应的内容</div>
    <div class="item">导航3对应的内容</div>
    <div class="item">导航4对应的内容</div>
  </div>
</div>

CSS代码：

.container {
  width: 800px;
  margin: 0 auto;
}

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

.nav li {
  margin-right: 20px;
}

.nav li a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

.nav li.active a {
  color: #f00;
}

.content {
  margin-top: 20px;
}

.item {
  display: none;
}

.item.active {
  display: block;
}

在上面的代码中，我们使用了 `flex` 布局实现了导航栏的水平排列，并且给当前被激活的导航栏添加了 `.active` 类名。在内容部分，我们利用 `.item` 类名来控制内容的显示和隐藏，初始时默认显示第一个导航栏对应的内容，也就是 `.item.active`。当用户点击导航栏时，我们通过 JavaScript 代码来切换 `.active` 类名，从而实现对应内容的显示和隐藏。