使用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