首先先看设计稿

图中的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. vue项目如何引用jquery

    虽然vue不推荐直接操作DOM,而且也提供了操作DOM的方式.但是在某些时候还是要用到jquery,那么如何引入jquery呢? 费了半天劲,记录一下: 一 : 安装jquery npm instal ...

  2. Goland sync.Map大白话解析

    Goland sync.Map大白话解析 代码解析链接:https://mp.weixin.qq.com/s/H5HDrwhxZ_4v6Vf5xXUsIg 建议对照参考链接代码食用 结构体 可以简单理 ...

  3. Log4j2详解——XML配置详解

    Log4j2详解--XML配置详解 找到了个很详细的文章链接 https://www.jianshu.com/p/bfc182ee33db

  4. nginx 配置 https,及加载配置文件夹

    首先需要去申请一个域名签名证书,在腾讯云,阿里云都有免费版,然后下载下来按如下配置,请根据自己路径更改 server { listen 80; server_name xxx.xxx.cn; root ...

  5. hive从入门到放弃(三)——DML数据操作

    上一篇给大家介绍了 hive 的 DDL 数据定义语言,这篇来介绍一下 DML 数据操作语言. 没看过的可以点击跳转阅读: hive从入门到放弃(一)--初识hive hive从入门到放弃(二)--D ...

  6. ArcGIs创建企业级数据库

    本文主要描述ArcGIs创建企业级数据库. 目标:创建企业级地理数据库,使用ArcMap通过SDE引擎 与Oracle交互数据,创建完成后将本地的mdb数据库中数据迁移到Oracle的地理数据库当中. ...

  7. 5月9日 python学习总结 外键、表之间的关联关系、修改表、清空表内容、复制表

    一.外键foreign key    外键约束: 1.必须先创建被关联表才能创建关联表 2.插入记录时,必须先插入被关联表的记录,才能插入关联表(要用到被关联表)的记录 3.若不设置同步更新和同步删除 ...

  8. 生成树Toolkit

    STP Toolkit 快速收敛: Port Fast 生成树安全: Root Guard BPDU Guard BPDU Filter Port Security 防环: Loop Guard Po ...

  9. 网络编程－Python的socket库

    一.网络连接经常用到的函数 sk = socket.socket(socket.AF_INET,socket.SOCK_STREAM,0)参数一:地址簇 socket.AF_INET IPv4(默认) ...

  10. kafka报文一直打印的问题

    一.问题描述 今天开发了一个kafka消费者数据接收的功能,基本过程为分别启动本地的kafka服务和代码程序,在服务端手动发送消息,代码来进行接收消费.经测试,代码功能正常,但是再接收到一条kafka ...