本 HTML 和 CSS 代码片段可实现在网页底部创建类似于Docker的停靠导航栏，导航条紧贴屏幕边缘，可作为移动导航菜单设计使用，每个链接对应一个图标，点击这些图标就可以进入相应的内容。代码使用 CSS 进行样式设计，包括渐变和悬停效果，以增强导航栏的视觉吸引力。总之，它能实现在不使用 JavaScript 的情况下为网页创建一个具有视觉吸引力和功能性的导航系统。

下面介绍如何使用 HTML 和 CSS 创建 Dock 导航栏

1、首先设置 HTML 结构，该代码定义了网页的不同内容区域，并在 <nav> 元素中包含导航链接。修改每个区域的内容，以适应你的网页。

<h2> This Page Demonstrates Dock Navbar </h2>
<article id="home" class="ui-page">
  <h1>主页</h1>
  <p>这里是主页，这里是主页，这里是主页，这里是主页，这里是主页.</p>
</article>
/*这里仅展示部分示例代码，下载后查看完整版代码*/
<nav class="ui-dock">
  <a href="#home">
    <svg viewBox="0 0 24 24">
      <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>
    </svg>
  </a>
  ...
</nav>

2、现在，将下载后的style.css代码添加到项目中。它将为各部分和导航链接设置样式，并为导航栏创建停靠效果。根据需要自定义每个部分的外观和内容。

3、如果希望个性化导航栏的颜色，可以修改 CSS 代码中的背景颜色。查找标有 [href="#section"] 的部分，根据自己的喜好调整背景颜色。这一步可以让导航栏的颜色与整个网页的主题相匹配。