粘性导航栏 - HTML

在网站开发过程中，粘性导航栏是经常需要使用的一种布局方式。该布局方式通过固定导航栏位置，使得用户在滚动页面时可以始终看到导航栏，方便用户浏览网站的所有内容。下面是如何实现粘性导航栏的 HTML 代码示例。

<nav class="sticky-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

上面的代码中，nav 元素表示导航栏，ul 和 li 元素表示导航栏中的菜单项，a 元素表示菜单项的链接。下面是 CSS 代码示例，通过将导航栏的 position 属性设置为 fixed，使导航栏固定在页面顶部，并通过给导航栏添加背景色、阴影等样式来美化导航栏。

.sticky-nav {
  position: fixed;
  top: 0;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.sticky-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

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

.sticky-nav a {
  text-decoration: none;
  color: #333;
}

在上面的 CSS 代码中，我们设置了导航栏的宽度为 100%，并使用 flex 布局使菜单项在导航栏中平均分布。此外，我们调整了菜单项之间的间距，并将菜单项的链接颜色设置为黑色，从而提高用户体验。

通过上面的 HTML 和 CSS 代码，我们就成功实现了一个简单的粘性导航栏。当用户滚动页面时，导航栏会始终停留在页面的顶部，方便用户随时访问导航栏中的菜单项。