使用 HTML/CSS 实现 Educoder 顶部导航栏

HTML/CSS 实现 Educoder 顶部导航栏的代码如下：

HTML 代码：

<nav class="navbar">
  <div class="navbar-logo">
    <img src="https://www.educoder.net/static/img/logo.8b4d7e4.png" alt="Educoder" />
  </div>
  <div class="navbar-menu">
    <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>
      <li><a href="#">关于我们</a></li>
    </ul>
  </div>
</nav>

CSS 代码：

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.navbar-logo img {
  height: 40px;
}

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

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

.navbar-menu a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

.navbar-menu a:hover {
  color: #f00;
}

解释：

- `.navbar`：定义导航栏的样式，包括背景颜色、阴影、内边距等；
- `.navbar-logo`：定义导航栏的 LOGO 样式，包括图片高度等；
- `.navbar-menu`：定义导航栏菜单的样式，包括列表样式、内边距、左右对齐等；
- `.navbar-menu ul`：定义菜单列表的样式，包括去掉列表标记、内边距、外边距等；
- `.navbar-menu li`：定义菜单项的样式，包括左右外边距等；
- `.navbar-menu a`：定义菜单项链接的样式，包括块状元素、内边距、文字颜色等；
- `.navbar-menu a:hover`：定义鼠标悬停时菜单项链接的样式，包括文字颜色等。