如何使用 CSS 创建固定导航列-之路教程

创建 HTML

创建一个带有“navbar”类的 <div> 元素。
在 <div> 中添加 <a> 标签。

对于 <a> 标签，我们使用 href 属性，它是 <a> 标签的必需属性。它指定网页上的链接或者同一网页上的某个位置，用户单击该链接后会在该位置导航。给他们每个人一个id并输入内容。

在 <body> 部分中创建另一个 <div> 元素，类名为“container”。
在 <h1> 标签中写一个标题并将内容放在 <p> 标签中。

<div class="navbar">
  <a href="#books">Books</a>
  <a href="#quizzes">Quizzes</a>
  <a href="#snippets">Snippets</a>
  <a href="#tools">Tools</a>
  <a href="#stringfunctions">String Functions</a>  
</div>
<div class="container">
  <h1>here must be title</h1>
  <p>Here  must be your content</p>
</div>

添加 CSS

将“navbar”类的溢出属性设置为“隐藏”，将位置设置为“固定”。

通过指定背景颜色、顶部和宽度属性继续为此类设置样式。

设置 <a> 标签的样式。将浮动属性设置为“left”，将显示设置为“block”。

添加 text-align、color、padding、text-decoration 和 font-size 属性。

为 :hover 伪类赋予颜色，以便当我们悬停文本时颜色会发生变化。
使用 padding、margin-top 和 height 属性设置“容器”类的样式。

将容器的高度设置为“2000px”以启用滚动。

.navbar {
  overflow: hidden;
  background-color: #666666;
  position: fixed;
  top: 0;
  width: 100%;
}
.navbar a {
  float: left;
  display: block;
  color: #eeeeee;
  text-align: center;
  padding: 15px 18px;
  text-decoration: none;
  font-size: 18px;
}
.navbar a:hover {
  color: #1c87c9;
}
.container {
  padding: 18px;
  margin-top: 35px;
  height: 2000px;
}

这是完整的代码。

使用 <div> 标签创建固定导航列的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        margin: 0;
      }
      .navbar {
        overflow: hidden;
        background-color: #666666;
        position: fixed;
        top: 0;
        width: 100%;
      }
      .navbar a {
        float: left;
        display: block;
        color: #eeeeee;
        text-align: center;
        padding: 15px 18px;
        text-decoration: none;
        font-size: 18px;
      }
      .navbar a:hover {
        color: #1c87c9;
      }
      .container {
        padding: 18px;
        margin-top: 35px;
        height: 2000px;
      }
    </style>
  </head>
  <body>
    <div class="navbar">
      <a href="#books">Books</a>
      <a href="#quizzes">Quizzes</a>
      <a href="#snippets">Snippets</a>
      <a href="#tools">Tools</a>
      <a href="#stringfunctions">String Functions</a>
    </div>
    <div class="container">
      <h1>
        当滚动页面时，导航条将保持在原始位置
      </h1>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。

      </p>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。

      </p>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。

      </p>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。

      </p>
      <p>
        生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

      </p>
    </div>
  </body>
</html>

使用 <nav> 标签创建固定导航列的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        margin: 0;
        background-color: #f1e9e9;
      }
      .navbar {
        overflow: hidden;
        background-color: #1c87c9;
        position: fixed;
        top: 0;
        width: 100%;
      }
      .navbar a {
        float: left;
        display: block;
        color: #eeeeee;
        text-align: center;
        padding: 15px 18px;
        text-decoration: none;
        font-size: 18px;
      }
      .navbar a:hover {
        color: #ffffff;
      }
      .container {
        padding: 18px;
        margin-top: 35px;
        height: 2000px;
      }
    </style>
  </head>
  <body>
    <nav class="navbar">
      <a href="#books">Books</a>
      <a href="#quizzes">Quizzes</a>
      <a href="#snippets">Snippets</a>
      <a href="#tools">Tools</a>
      <a href="#stringfunctions">String Functions</a>
    </nav>
    <div class="container">
      <h1>
        当滚动页面时，导航条将保持在原始位置
      </h1>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。

      </p>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。

      </p>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。

      </p>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。

      </p>
      <p>
        生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

      </p>
    </div>
  </body>
</html>

使用 <ul> 标签创建固定导航列的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        margin: 0;
        background-color: #f1e9e9;
      }
      ul {
        overflow: hidden;
        background-color: #42cde1;
        position: fixed;
        top: 0;
        margin: 0;
        padding: 0;
        width: 100%;
      }
      ul li {
        list-style-type: none;
        display: inline-block;
      }
      ul li a {
        display: block;
        color: #eeeeee;
        text-align: center;
        padding: 15px 30px 15px 20px;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
        font-family: arial;
      }
      .navbar a:hover {
        color: #ffffff;
      }
      .container {
        padding: 18px;
        margin-top: 35px;
        height: 2000px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <a href="#books">书籍</a>
      </li>
      <li>
        <a href="#tutorial">教程</a>
      </li>
      <li>
        <a href="#codes">源码</a>
      </li>
      <li>
        <a href="#tools">工具</a>
      </li>
    </ul>
    <div class="container">
      <h1>
        当滚动时，导航条将保持在原始位置
      </h1>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。

      </p>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。

      </p>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。

      </p>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。

      </p>
      <p>
        生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

      </p>
    </div>
  </body>
</html>

如何使用 CSS 创建固定导航列

通常，当用户滚动网页时，顶部导航菜单会消失。

许多都普遍使用固定导航列。
换句话说，当我们滚动网页时，固定或者粘性导航列会保持原位。
无论用户在网页上的哪个位置，它们都允许显示界面组件。

固定的导航列很容易创建。
它需要一点 HTML 标记和一些 CSS 属性。

在本教程中，我们将展示如何使用 <div>、<nav> 和 <ul> 元素轻松创建固定导航列。

日期：2020-06-02 22:15:01 来源：oir作者：oir

←如何为 PNG 图像创建投影

如何在input字段周围创建发光边框→

创建 HTML

添加 CSS

使用 <div> 标签创建固定导航列的示例：

使用 <nav> 标签创建固定导航列的示例：

使用 <ul> 标签创建固定导航列的示例：

目录