CSS写一个导航栏，并且用两个盒子进行布局

好的，以下是一个简单的导航栏，使用两个盒子进行布局：

HTML 结构：

<div class="container">
  <div class="logo-box">
    <a href="#"><img src="logo.png" alt="Logo"></a>
  </div>
  <nav class="nav-menu">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</div>

CSS 样式：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.logo-box {
  width: 100px;
  height: 100px;
}

.logo-box img {
  max-width: 100%;
  max-height: 100%;
}

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

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

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

解释一下代码：

- `.container` 使用 flex 布局，将两个子元素分别放在左右两侧，并垂直居中对齐。
- `.logo-box` 设置一个固定宽高的盒子用于放置 Logo。
- `.nav-menu ul` 设置一个横向菜单列表，去除默认的列表样式。
- `.nav-menu li` 设置每个菜单项之间的间距。
- `.nav-menu a` 设置菜单项的样式，包括去除链接下划线、字体颜色和加粗等。