流程图PC,M站点做法

by xiaobai

HTML

<p>
  一.流程图PC站点做法
</p>
<div class="demo">
  <ul>
    <li class="on"></li>
    <li>
      <div class="num">1</div>
      <div class="text">实名认证</div>
    </li>
    <li class="on"></li>
    <li>
      <div class="num">2</div>
      <div class="text">实名认证</div>
    </li>
    <li></li>
    <li>
      <div class="num">3</div>
      <div class="text">实名认证</div>
    </li>
    <li></li>
    <li>
      <div class="num">4</div>
      <div class="text">实名认证</div>
    </li>
  </ul>
</div>


<p>
  二.流程图M站点做法
</p>
<div class="demo2">
  <ul>
    <li class="on"></li>
    <li>
      <div class="num">1</div>
      <div class="text">实名认证</div>
    </li>
    <li class="on"></li>
    <li>
      <div class="num">2</div>
      <div class="text">实名认证</div>
    </li>
    <li></li>
    <li>
      <div class="num">3</div>
      <div class="text">实名认证</div>
    </li>
    <li></li>
    <li>
      <div class="num">4</div>
      <div class="text">实名认证</div>
    </li>
  </ul>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  padding: 10px 20px;
}

ul {
  list-style-type: none;
}

p {
  height: 20px;
  margin: 20px 0;
}

.demo {
  position: relative;
}

.demo ul {
  display: table;
  width: 100%;
}

.demo li {
  display: table-cell;
  vertical-align: top;
  text-align: center;
}

.demo .num {
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  background: #cdcdcd;
  border-radius: 50%;
}

.demo li:nth-child(2n+1):before {
  content: '';
  display: block;
  margin: 15px 10px;
  border-top: #cdcdcd 1px solid;
}

.demo li:nth-child(2n) {
  width: 1%;
  white-space: nowrap;
}

.demo li:first-child {
  display: none;
}

.demo li.on:before {
  border-color: #f60;
}

.demo li.on + li .num {
  background: #f60;
  color: #fff;
}

.demo2 {
  position: relative;
}

.demo2 ul {
  display: flex;
  width: 100%;
}

.demo2 li {
  text-align: center;
}

.demo2 .num {
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  background: #cdcdcd;
  border-radius: 50%;
}

.demo2 li:nth-child(2n+1) {
  flex: 1;
  margin: 15px 10px;
  border-top: #ddd 1px solid;
}

.demo2 li:first-child {
  display: none;
}

.demo2 li.on {
  border-color: #f60;
}

.demo2 li.on + li .num {
  background: #f60;
  color: #fff;
}