html顶部导航栏代码：HTML顶部导航栏代码实现

使用CSS美化导航栏

我们使用CSS来美化导航栏，使其居中显示，并添加一些基本的样式，如背景颜色、文字颜色、链接样式等。

nav {
  background-color: #333; /* 导航栏背景颜色 */
  padding: 10px 20px; /* 内边距 */
}
nav ul {
  list-style-type: none; /* 移除列表默认样式 */
  margin: 0;
  padding: 0;
  display: flex; /* 使用弹性布局使链接水平排列 */
  justify-content: center; /* 水平居中 */
}
nav ul li {
  margin: 0 10px; /* 链接之间的间距 */
}
nav ul li a {
  color: white; /* 链接文字颜色 */
  text-decoration: none; /* 移除下划线 */
  padding: 5px 10px; /* 链接内边距 */
  display: inline-block; /* 将链接设置为内联块元素，便于控制 */
}
nav ul li a:hover {
  background-color: #ddd; /* 鼠标悬停时的背景颜色 */
  color: black; /* 鼠标悬停时的文字颜色 */
}

响应式设计

为了让导航栏在不同设备上都能良好显示，我们可以使用媒体查询来调整导航栏在小屏幕上的样式，当屏幕宽度小于一定尺寸时,我们可以将导航栏改为垂直排列。

@media screen and (max-width: 600px) {
  nav ul {
    flex-direction: column; /* 改为垂直排列 */
  }
  nav ul li {
    margin: 5px 0; /* 调整小屏幕上的间距 */
  }
}

添加下拉菜单（可选）

如果导航项较多，可以考虑使用下拉菜单，这里我们以"服务"为例,添加一个下拉菜单。

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li class="dropdown">
      <a href="#">服务</a>
      <ul class="dropdown-content">
        <li><a href="#">服务一</a></li>
        <li><a href="#">服务二</a></li>
        <li><a href="#">服务三</a></li>
      </ul>
    </li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

.dropdown {
  position: relative;
}
.dropdown-content {
  display: none; /* 默认隐藏 */
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  float: left;
  border: none;
  outline: none;
  transition: 0.2s;
}
.dropdown-content a:hover {
  background-color: #ddd;
}
.dropdown:hover .dropdown-content {
  display: block; /* 鼠标悬停时显示下拉菜单 */
}

通过以上步骤，我们可以创建一个基本的HTML顶部导航栏，并使用CSS进行美化和响应式设计，根据实际需求，还可以进一步调整样式和功能，例如添加图标、搜索框、用户登录等。

希望本文能帮助你快速实现一个美观实用的导航栏！