首先先看设计稿

图中的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. tf源码中的object_detection_tutorial.ipynb文件

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

  2. 记录一次docker容器内修改my.cnf配置文件max_allowed_packet参数的过程

    1. 问题背景 在一次新版本功能开发完毕,配合测试的过程中,测试反馈某个XxlJob定时任务一直执行失败,在分析了日志之后,找到了报错的原因: Packet for query is too larg ...

  3. tensorflow源码解析之common_runtime-executor-下

    目录 核心概念 executor.h Executor NewLocalExecutor ExecutorBarrier executor.cc structs GraphView ExecutorI ...

  4. 【译】.NET 6 网络改进

    原文 | Máňa Píchová 翻译 | 郑子铭 对于 .NET 的每个新版本,我们都希望发布一篇博客文章,重点介绍网络的一些变化和改进.在这篇文章中,我很高兴谈论 .NET 6 中的变化. 这篇 ...

  5. js开发文档生成工具jsdoc安装使用

    1.全局安装jsdoc,需要先安装node环境哦~ npm install -g jsdoc 2.在项目根目录新建文件conf.json,内容如下: { "tags": { &qu ...

  6. vtk网格剖分

    #include <vtkSmartPointer.h> #include <vtkSimplePointsReader.h> #include <vtkPolyData ...

  7. spring——整合Mybatis

    一.Mybatis整合spring 步骤: 导入相关jar包 junit mybatis mysql数据库 spring-webmvc aop织入 mybatis-spring spring-jdbc ...

  8. Golang 常见设计模式之装饰模式

    想必只要是熟悉 Python 的同学对装饰模式一定不会陌生,这类 Python 从语法上原生支持的装饰器,大大提高了装饰模式在 Python 中的应用.尽管 Go 语言中装饰模式没有 Python 中 ...

  9. windows服务器怎么将证书添加到受信任证书颁发机构

    1.键盘输入win+r 快键键,出现运行,输入mmc. 2.打开控制台根节点,点击上方导航栏的文件-->添加删除管理单元.如下图. 3.在可用的管理单元中选择"证书",计算机 ...

  10. notepad++给每一列数据加单引号及逗号结尾

    原始数据: 对列操作--先加前引号(光标放在第一行哦):编辑-->列块编辑 再加后引号和逗号(文本尾端不齐,就用替换): 打开替换窗口:ctrl+F(其实就是查找) 加完引号和逗号效果:(如果最 ...