利用flex盒子模型编写一个网易阴阳师的导航栏

可以使用 flex 盒子模型来编写一个简单的网易阴阳师导航栏，以下是一个示例代码：

HTML 代码：

<div class="nav">
  <div class="nav-logo">
    <img src="logo.png" alt="网易阴阳师">
  </div>
  <ul class="nav-menu">
    <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>
    <li><a href="#">商城</a></li>
  </ul>
  <div class="nav-search">
    <input type="text" placeholder="请输入关键字">
    <button>搜索</button>
  </div>
</div>

CSS 代码：

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f7f7f7;
}

.nav-logo img {
  width: 100px;
}

.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}

.nav-menu li {
  margin: 0 10px;
}

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

.nav-search {
  display: flex;
  align-items: center;
}

.nav-search input {
  padding: 5px;
  border: none;
  border-radius: 5px 0 0 5px;
}

.nav-search button {
  padding: 5px 10px;
  border: none;
  background-color: #f00;
  color: #fff;
  border-radius: 0 5px 5px 0;
}

说明：

1. 使用 `display: flex` 将导航栏容器设置为 flex 布局。
2. 使用 `justify-content: space-between` 让 logo、菜单和搜索框之间平均分布。
3. 使用 `align-items: center` 让 logo、菜单和搜索框在垂直方向上居中对齐。
4. 使用 `list-style: none` 去掉菜单项的默认样式。
5. 使用 `margin: 0 10px` 让菜单项之间有一定的距离。
6. 使用 `text-decoration: none` 去掉菜单项链接的下划线。
7. 使用 `padding` 和 `border` 属性美化搜索框和按钮的样式。
8. 使用 `border-radius` 属性让搜索框和按钮的边角变为圆角。