如何在移动屏幕上创建覆盖导航菜单，同时在普通屏幕上具有普通导航栏

在移动屏幕上创建覆盖导航菜单，同时在普通屏幕上具有普通导航栏，可以通过响应式设计和媒体查询来实现。

响应式设计：响应式设计是一种能够根据设备屏幕大小和分辨率自动调整布局和样式的设计方法。通过使用CSS媒体查询，可以根据屏幕宽度来应用不同的样式和布局。
创建覆盖导航菜单：在移动屏幕上，常见的做法是使用汉堡菜单图标，点击后展开或滑出导航菜单。可以使用HTML和CSS来实现这一效果。例如，可以使用HTML的<nav>元素来定义导航菜单，然后使用CSS来设置菜单的样式和动画效果。
普通导航栏：在普通屏幕上，可以使用传统的水平导航栏。可以使用HTML的<ul>和<li>元素来创建导航栏的列表结构，然后使用CSS来设置样式。

以下是一个示例代码，展示了如何使用响应式设计和媒体查询来创建覆盖导航菜单和普通导航栏：

HTML代码：

<!-- 覆盖导航菜单 -->
<div class="overlay-menu">
  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle">&#9776;</label>
  <nav>
    <ul>
      <li><a href="#">菜单项1</a></li>
      <li><a href="#">菜单项2</a></li>
      <li><a href="#">菜单项3</a></li>
    </ul>
  </nav>
</div>

<!-- 普通导航栏 -->
<nav class="normal-menu">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</nav>

CSS代码：

/* 覆盖导航菜单样式 */
.overlay-menu {
  position: relative;
}

.overlay-menu label {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  cursor: pointer;
}

.overlay-menu nav {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #f1f1f1;
  display: none;
}

.overlay-menu input[type="checkbox"]:checked + nav {
  display: block;
}

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

.overlay-menu nav ul li {
  padding: 10px;
}

.overlay-menu nav ul li a {
  color: #333;
  text-decoration: none;
}

/* 普通导航栏样式 */
.normal-menu {
  display: none;
}

@media (min-width: 768px) {
  .normal-menu {
    display: block;
  }
}

在上述示例中，通过使用CSS的媒体查询，当屏幕宽度大于等于768px时，普通导航栏显示，覆盖导航菜单隐藏。当屏幕宽度小于768px时，普通导航栏隐藏，覆盖导航菜单显示。用户可以点击汉堡菜单图标来展开或隐藏覆盖导航菜单。