帮我做一个可以适应不同的屏幕大小进行变化的导航栏，左侧有logo，中间是有首页，气候，地貌，洲际，大洋，搜索框，靠右有登录注册按钮，气候，地貌和洲际，大洋都有下拉菜单

可以使用CSS的Flexbox布局来实现一个适应不同屏幕大小的导航栏。下面是一个简单的示例代码：

HTML:

<nav class="navbar">
  <div class="logo">
    <a href="#"><img src="logo.png" alt="Logo"></a>
  </div>
  <ul class="nav-links">
    <li><a href="#">首页</a></li>
    <li class="dropdown">
      <a href="#">气候</a>
      <ul class="dropdown-menu">
        <li><a href="#">温带气候</a></li>
        <li><a href="#">热带气候</a></li>
        <li><a href="#">寒带气候</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#">地貌</a>
      <ul class="dropdown-menu">
        <li><a href="#">山地</a></li>
        <li><a href="#">平原</a></li>
        <li><a href="#">高原</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#">洲际</a>
      <ul class="dropdown-menu">
        <li><a href="#">亚洲</a></li>
        <li><a href="#">欧洲</a></li>
        <li><a href="#">北美洲</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#">大洋</a>
      <ul class="dropdown-menu">
        <li><a href="#">太平洋</a></li>
        <li><a href="#">大西洋</a></li>
        <li><a href="#">印度洋</a></li>
      </ul>
    </li>
  </ul>
  <div class="login">
    <a href="#">登录</a>
    <a href="#">注册</a>
  </div>
</nav>

CSS:

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

.logo img {
  height: 40px;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 60%;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: #333;
  text-decoration: none;
  padding: 10px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.login a {
  color: #333;
  text-decoration: none;
  padding: 10px;
}

上面的代码使用了Flexbox布局来让导航栏的内容在不同屏幕大小下自适应排列。

其中，`.navbar`是整个导航栏的容器，`.logo`是左侧的logo，`.nav-links`是中间的导航链接，`.dropdown`表示有下拉菜单的链接，`.dropdown-menu`是下拉菜单的容器，`.login`是右侧的登录注册按钮。

另外，使用了CSS的伪类`:hover`来实现下拉菜单的显示和隐藏。