使用css完成引导用户按照流程完成任务的进度导航条

curlyCheng 发布于2019-08-29 12:51 / 2728人阅读

首先先看设计稿

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

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

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

贴上代码
HTML




  
  JS Bin


  
    在群内累计布置3天作业，即可加入先锋教师！
    
      1天
      1天
      1天
      1天
      1天
    
  
  
  
  
    在群内累计布置3天作业，即可加入先锋教师！
    
      1天
      1天
      1天
      1天
      1天

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布局更完美。

GPU云服务器云服务器用户需完成的优惠价格完成任务 java任务进度条 css导航条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112192.html

javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 评论0 收藏0
javascript功能插件大集合，写前端的亲们记得收藏

摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

cfanr 2019-08-20 10:34 评论0 收藏0