首先先看设计稿

图中的12345便是主角进度条。

分析需求如下：
线的长度不固定，适应移动端和pc端
点平均地分布在一条线上
点的个数不固定，可能会改变
激活的点之间线的颜色是绿色的

两种种方式 百分比宽度切分和flex布局

贴上代码
HTML

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

</head>

<body>

  <div class="pub-wrap">

    <div class="pub-title" id="pubTitle">在群内累计布置3天作业，即可加入先锋教师！</div>

    <ul class="pub-process process-5" id="pubProcess">

      <li class="active"><span class="ball">1天</span></li>

      <li class="active"><span class="ball">1天</span></li>

      <li><span class="ball">1天</span></li>

      <li><span class="ball">1天</span></li>

      <li><span class="ball">1天</span></li>

    </ul>

  </div>

  <!-- flex版本 -->

  <div class="pub-wrap">

    <div class="pub-title" id="pubTitle">在群内累计布置3天作业，即可加入先锋教师！</div>

    <ul class="pub-process process-5 pub-process-flex" id="pubProcess">

      <li class="active"><span class="ball">1天</span></li>

      <li class="active"><span class="ball">1天</span></li>

      <li><span class="ball">1天</span></li>

      <li><span class="ball">1天</span></li>

      <li><span class="ball">1天</span></li>

    </ul>

  </div>

</body>

</html>

css

ul {

  margin:0;

  padding:0;

}

li {

  list-style: none;

}

.pub-wrap {

  position: relative;

  padding: 0 30px 10px;

  margin-top: 28px;

  border-radius: 6px;

  background-color: #edf2f2;

}

.pub-title {

  padding-top: 14px;

  margin-right: -20px;

  margin-left: -20px;

  font-size: 1.1875rem;

  text-align: center;

}

.pub-process {

  position: relative;

  height: 35px;

  margin-top: 28px;

  margin-left: 35px;

  font-size: 0;

  color: #fff;

}

.pub-process:after {

  position: absolute;

  top: 50%;

  left: 0;

  z-index: 1;

  width: 99%;

  height: 4px;

  content: "";

  -webkit-transform: translate(0, -50%);

  transform: translate(0, -50%);

  background-color: #d9d9d9;

}

.pub-process li {

  position: relative;

  z-index: 5;

  display: inline-block;

  width: 25%;

  height: 35px;

  font-size: .875rem;

}

.pub-process li:first-child {

  width: 35px;

  margin-left: -35px;

}

.pub-process .ball {

  position: absolute;

  top: 0;

  right: 0;

  z-index: 7;

  width: 35px;

  height: 35px;

  line-height: 35px;

  content: "";

  text-align: center;

  border-radius: 50%;

  background-color: #d9d9d9;

}

.pub-process .active .ball {

  background-color: #11c2c2;

}

.pub-process .active + .active:after {

  position: absolute;

  top: 50%;

  left: 0;

  z-index: 6;

  width: 100%;

  height: 4px;

  content: "";

  -webkit-transform: translate(0, -50%);

  transform: translate(0, -50%);

  background-color: #11c2c2;

}

.process-3 li {

  width: 50%;

}

.process-5 li {

  width: 25%;

}

/* flex ver */

.pub-process-flex {

  display: -webkit-box;

}

.pub-process-flex li {

  display: list-item;

  -webkit-box-flex: 1;

  width: auto;

}

.pub-process-flex li:first-child {

  width: 35px;

  margin-left: -35px;

  -webkit-box-flex: 0;

}

实现效果如图

使用百分比因为宽度是百分比设死的，这样在点的数量修改时，我们还是要改css，所以建议使用flex布局更完美。

使用css完成引导用户按照流程完成任务的进度导航条的更多相关文章

  1. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  2. 辛星与您使用CSS导航条

    第一步.我们创建了一个新的my.html档.在内容填入如下面.这个html文件不动,直到最后.正是这些内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  3. 【AGC】引导用户购买提升用户留存率

    借助AGC的云数据库.云托管.应用内消息.App Linking等服务,您可以给不同价值用户设置不同的优惠套餐活动,引导用户持续购买,增强用户黏性.判断用户价值,发送营销短信,引导用户参与营销活动,提 ...

  4. 【 Jquery插件】引导用户如何操作网站功能的向导

    Joyride是一个jQuery插件,可以利用它来创建一个引导用户如何操作网站功能的向导.通过定义一个操作步骤顺序,这个插件会在需要操作的HTML元素旁边显示一个帮助说明的Tooltips. http ...

  5. SpringSecurity个性化用户认证流程

    ⒈自定义登录页面 package cn.coreqi.security.config; import org.springframework.context.annotation.Bean; impo ...

  6. 【微信小程序开发】使用button标签的open-type="getUserInfo"引导用户去授权

    一. 前言 小程序官方文档,上面说明 > wx.getUserInfo(OBJECT) 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type=&qu ...

  7. 使用button的open-type="getUserInfo"引导用户进行授权

    https://blog.csdn.net/weixin_39602178/article/details/80295684 一. 前言 小程序官方文档,上面说明 > wx.getUserInf ...

  8. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_01-用户认证-用户认证流程分析

    1 用户认证 1.1 用户认证流程分析 用户认证流程如下: 访问下面的资源需要携带身份令牌和jwt令牌,客户端可以通过身份认证的令牌从服务端拿到长令牌, 一会要实现认证服务请求用户中心从数据库内来查询 ...

  9. 【小程序开发】 点击button按钮，引导用户授权

    一. 前言 小程序官方文档,上面说明 wx.getUserInfo(OBJECT) 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type="ge ...

随机推荐

  1. Qt：foreach

    0.说明 Qt提供一个关键字foreach(实际上是<QtGlobal>中定义的一个宏)用于方便地访问容器中的所有数据项. foreach关键字用于遍历容器中的所有数据项 注意 forea ...

  2. Python：输入关键字进行百度搜索并爬取搜索结果

    学习自:手把手教你用Python爬取百度搜索结果并保存 - 云+社区 - 腾讯云 如何利用python模拟百度搜索,Python交流,技术交流区,鱼C论坛 指定关键字,对其进行百度搜索,保存搜索结果, ...

  3. docker入门-docker应用场景和优势

    一.什么是docker Docker是一个使用 Go 语言开发的,并且开源的应用容器引擎,基于LXC(Linux Container)内核虚拟化技术实现,提供一系列更强的功能,比如镜像.Dockerf ...

  4. tf源码中的object_detection_tutorial.ipynb文件

    今天看到原来下载的tf源码的目标检测源码中test的代码不知道跑哪儿去了,这里记录一下... Imports import numpy as np import os import six.moves ...

  5. MySql的事务及数据的导入导出

    Mysql的事务及应用 1.补充数据库的导入与导出 导入 mysql -u root -p database < E:/SS/Test.sql -- 即执行sql文件 导出 -- 结构+数据 m ...

  6. 网络标准之:永远是1.0版本的MIME

    目录 简介 MIME详解 MIME头 MIME-Version Content-Type Content-Disposition Content-Transfer-Encoding Encoded-W ...

  7. JS 实现排序算法

    冒泡排序 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所有的元素重复以上的步骤,除了 ...

  8. 神奇的 CSS，让文字智能适配背景颜色

    最近几天,有好几个同学都问了同样一个问题. 页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色.像是下面这样: 文本在黑色底色上表现为白色,在白色底色上表现为黑色.看 ...

  9. Java学习笔记:04面向对象-内部类_访问修饰符_final

    04面向对象-内部类/访问修饰符/final 1.static的介绍 static:关键字,静态的 static的作用是用来修饰类中的成员 2.访问一个类中的某一个成员变量 方法一: _1.创建对象 ...

  10. 《shader入门精要》13.2再谈运动模糊中片元着色器的世界坐标的计算

    具体在书p275页 这里为啥需要除D.w呢. 首先我们得到的NDC的坐标是已经归一化的,但是CurrenViewProjectionMatrix的作用,是把世界空间转化为尚未归一化的裁剪空间. 这里看 ...