首先先看设计稿

图中的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. LeetCode-008-字符串转换整数 (atoi)

    字符串转换整数 (atoi) 题目描述:请你来实现一个 myAtoi(string s) 函数,使其能将字符串转换成一个 32 位有符号整数(类似 C/C++ 中的 atoi 函数). 函数 myAt ...

  2. LeetCode-028-实现 strStr()

    实现 strStr() 题目描述:实现 strStr() 函数. 给你两个字符串 haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串出现的第一个位置(下 ...

  3. Linux du命令和df命令区别

    du 命令 1．命令格式: du [选项][文件] 2．命令功能: 显示每个文件和目录的磁盘使用空间. 3．命令参数: -a或-all 显示目录中个别文件的大小. -b或-bytes 显示目录或文件大 ...

  4. java实现上传图片并压缩图片大小功能

    缩略图压缩文件jar包 <!-- 图片缩略图 --> <dependency> <groupId>net.coobird</groupId> <a ...

  5. 物理机迁移至vmware

    使用用vmware vcenter converter standalone将物理机迁移到虚拟机. 6.2版本下载地址如下: https://www.filehorse.com/download-vm ...

  6. 关于malloc源码中的bin_at宏定义的个人见解

    0x01:简介 在堆中的内存申请和释放中,为了减少使用系统调用函数对内存操作,malloc_state(分配区)结构中使用了fastbinsY数组和bins数组.当chunk被free后,bins链会 ...

  7. Spring AOP Xml配置过程及解释

    目录 Spring AOP(基于xml) 专业术语: 基于xml的声明式AspectJ 具体实践 Spring AOP(基于xml) 目前主流的AOP框架有两个,分别是Spring AOP和Aspec ...

  8. Redis 新特性：多线程模型解读

    Redis 官方在 2020 年 5 月正式推出 6.0 版本,提供很多振奋人心的新特性,所以备受关注. 主要特性如下: 多线程处理网络 IO: 客户端缓存: 细粒度权限控制(ACL): RESP3  ...

  9. Numpy库基础___四

    Numpy数据存取 •数据的csv文件的存取 只能有效存取和读取一维和二维数据 a = np.arange(100).reshape(5,20) #用delimiter分割,默认为空格 np.save ...

  10. 5月28日 python学习总结 CSS学习（二）

    CSS属性相关 宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. 字体属性 文字字体 font-family可以把多 ...