步骤导航 CSS：让网页导航更简洁明了-前端问答-PHP中文网

步骤导航 CSS：让网页导航更简洁明了

PHPz

发布： 2023-04-24 14:47:37

原创

941人浏览过

在如今的互联网时代，页面的导航成为了网页设计中不可或缺的一部分。步骤导航是一种将页面内容分为多个步骤，并为用户提供明确指引的导航方式。它不仅可以使用户更好地理解页面结构，还可以提高用户的操作流畅性，降低用户的操作难度。在本篇文章中，我们将讨论步骤导航的前端实现——基于 css 的步骤导航。

一、背景

步骤导航是一种将页面内容分为多个步骤，并为用户提供明确指引的导航方式。这种导航方式通常被用于引导用户完成一系列复杂的操作流程。在互联网应用中常常出现的场景，例如注册流程、订单流程、付款流程等等。

让用户清晰地知道他们现在处于哪个步骤，以及下一个步骤是什么，是步骤导航最重要的功能。如果用户清楚地认识到他们处于流程的哪个步骤，将可以更好地理解该步骤的作用及其与其他步骤的关系，并可以在进行下一步操作之前对其进行确认。

为实现这一目标，开发者通常会将步骤导航显示在页面的头部或者侧边栏中。并为每个步骤提供一个可选择的按钮来提示用户该步骤正在进行或者已经完成。

立即学习“前端免费学习笔记（深入）”；

二、前端实现——基于 CSS 的步骤导航

在 CSS 中，可以运用这种样式来实现一个完整的步骤导航。在本节中，我们将学习如何使用 HTML 和 CSS 来创建基于 CSS 的步骤导航。

HTML

创建 HTML 代码时，可以采用以下基本结构：

<div class="steps-navigation">
  <ul>
    <li class="active">
      <div class="step">
        <span>步骤1</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤2</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤3</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤4</span>
      </div>
    </li>
  </ul>
</div>

登录后复制

在这个代码段中，我们创建了一个包裹在 ul 标签中的步骤导航。在 li 中，每一个步骤都以一个名为“步骤x”的名字显示。其中，x 表示第几步骤的数字。我们还创建了一个名为“step”的 div，其中嵌套了一个 span 来保存步骤名称。

在 CSS 中，可以使用以下样式来打造一个美丽的步骤导航。

.steps-navigation {
  margin: 0;
  padding: 0;
}
.steps-navigation ul {
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}
.steps-navigation ul li {
  display: table-cell;
  text-align: center;
  position: relative;
}
.steps-navigation ul li .step {
  display: block;
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  border: 3px solid #999;
  border-radius: 50%;
  background-color: #fff;
  margin: 30px auto;
  cursor: pointer;
  -webkit-transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.steps-navigation ul li.active .step {
  color: #fff;
  background-color: #00bcd4;
  border-color: #00bcd4;
}
.steps-navigation ul li:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ccc;
}
.steps-navigation ul li:last-child:before {
  display: none;
}
.steps-navigation ul li.active~li:before {
  background-color: #00bcd4;
}
.steps-navigation ul li:first-child .step {
  margin-left: 0;
}
.steps-navigation ul li:last-child .step {
  margin-right: 0;
}

登录后复制

上述代码中包含了许多样式，每一个都有着特定的目的。这是理解 CSS 步骤导航需要掌握的一部分。

职优简历

一款专注于互联网从业者的免费简历制作工具

233

查看详情

样式讲解

在此，我们对样式进行一一解读。

.steps-navigation {
  margin: 0;
  padding: 0;
}

登录后复制

这个部分的作用是设置步骤导航的外边距和内边距。

.steps-navigation ul {
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}

登录后复制

这个部分的作用是设置步骤导航和外层 ul 元素的兼容。

.steps-navigation ul li {
  display: table-cell;
  text-align: center;
  position: relative;
}

登录后复制

这个部分的作用是设置每个步骤包含的 li 元素。它使用了 display:table-cell 样式，将 li 元素设置为内联元素。

.steps-navigation ul li .step {
  display: block;
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  border: 3px solid #999;
  border-radius: 50%;
  background-color: #fff;
  margin: 30px auto;
  cursor: pointer;
  -webkit-transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

登录后复制

这个部分的作用是设置每个步骤中的“步骤x”和“span”元素。它使用了许多样式来设置其属性，包括元素宽度、高度、边框、背景等等。

.steps-navigation ul li.active .step {
  color: #fff;
  background-color: #00bcd4;
  border-color: #00bcd4;
}

登录后复制

这个部分的作用是设置选中的步骤的样式。当步骤处于活动状态（即当前步骤），背景颜色，字体颜色等也将发生改变。

.steps-navigation ul li:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ccc;
}

登录后复制

这个部分的作用是为每一个步骤添加横向分割线。

.steps-navigation ul li.active~li:before {
  background-color: #00bcd4;
}

登录后复制

这个部分的作用是当步骤处于活动状态（即当前步骤）时，修改其前导横向分割线的背景颜色。

四、总结

在本篇文章中，我们讨论了使用 CSS 来创建步骤导航的前端实现。步骤导航是一种在互联网应用中普遍采用的导航方式，它可以让用户更好地理解页面结构，提高操作流畅性，减少操作难度。通过使用上述技术，我们可以为我们的网站或应用程序创建一个流畅的用户界面，提高用户体验。在 CSS 步骤导航的基础上，我们可以进一步扩展实现，例如使用 JavaScript 来添加动画或交互效果。相信这将成为你网页导航设计的不错选择！

以上就是步骤导航 CSS：让网页导航更简洁明了的详细内容，更多请关注php中文网其它相关文章！