首先先看设计稿

图中的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. VSCode 前端常用插件

    1.Auto Close Tag 自动闭合HTML/XML标签 2.Auto Rename Tag 自动完成另一侧标签的同步修改 3.Beautify 格式化代码,值得注意的是,beautify插件支 ...

  2. Liunxa安装Nignx,Git

    Linux安装Nignx 1.安装依赖 执行语句 yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel open ...

  3. 非关系型数据库redis

    Redis初始 redis中不区分字母的大小写 查看端口 ss tnlp 安装 编译安装(需要先配置epel源) yum install -y redis 编译安装 wget https://down ...

  4. git常用命令及问题

    Git基本操作 git init 创建新的git仓库 git clone [url] 使用 git clone 拷贝一个 Git 仓库到本地 git status 查看工作区 git stash li ...

  5. [] == ![] 返回 true

    对于==来说,如果数据类型不同,就会进行隐式类型转换. 首先判断是否在对比 null 和 undefined,是的话就会返回 true: 判断其中一方是否为 string ,在与 number进行比较 ...

  6. Linux环境下安装Maven

    最近在搞虚拟机,记录下虚拟机内Maven环境的搭建流程 一.选择合适的版本(由于Maven运行需要依赖于JDK,所以安装之前需要保证当前虚拟机下已经安装并配置好JDK环境,安装流程参见) https: ...

  7. 想让DBA瞬间崩溃，那就让他去做SQL性能优化

    摘要:很多大数据计算都是用 SQL 实现的,跑得慢时就要去优化 SQL,但常常碰到让人干瞪眼的情况. 本文分享自华为云社区<做 SQL 性能优化真是让人干瞪眼>,作者: 石臻臻的杂货铺 . ...

  8. office online在线预览服务与https的tls证书兼容问题

    问题现象:k8s环境配置证书后,无法调用office online 服务,附件无法预览 问题原因:ingress默认启用得是tls1.2,不兼容以下版本 k8s环境解决方法:增加ingress配置,兼 ...

  9. rancher更新集群证书

    进入rancher 等待更新完成 查看证书到期时间 >>>在rancher容器内部执行查看集群证书信息 for i in ls /var/lib/rancher/k3s/server ...

  10. 5月31日 python学习总结 JavaScript概述

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...