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

时间 2019-12-04

原文原文链接

首先先看设计稿css

图中的12345即是主角进度条。html

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

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

贴上代码
HTMLflex

<!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>

cssspa

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