關于項目中下單流程HTML設計的一些思考 - 追夢子

需求

上面文字和圈圈是對齊的。

想法

一開始是想把文字和圈圈分開來的，也就是兩個盒子放置。但操作中發現，想把它們對齊非常的難，總有一些是無法對齊的。

最終換了一種實作方式，按照需求，不就是想把它們關聯起來嘛，既然如此不把它們分開就好了，那個圈圈就用僞元素來實作，最終代碼如下：

<div class="route">
    <em>下單</em>
    <em class="active">付款</em>
    <em>配貨</em>
    <em>出庫</em>
    <em>完成</em>
</div>
<style>
.route{
  position:relative;
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  padding:10px;
  background-color:#fff;
}
.route::after{
  content:"";
  position:absolute;
  left:0;
  top:58px;
  width:calc(100% - 3.6rem);
  height:1px;
  margin:0 1.8rem;
  background-color:#e1e1e1;
}
.route em{
  position:relative;
  margin:10px 0 40px;
  color:#999;
  font-size:1.3rem;
  font-style:normal;
}
.route em::after{
  content:"";
  position:absolute;
  bottom:-24px;
  left:50%;
  width:1rem;
  height:1rem;
  border-radius:100%;
  background-color:#e1e1e1;
  transform:translateX(-50%);
}
.route .active::after{
  width: 1.2rem;
  height: 1.2rem;
  background-color: #1bc865;
  z-index: 999;
  top: 32px;
  box-shadow: 0 0 0px 5px #adebc7,0 0 0px 10px #dcf7e7;
}
</style>
           

這種實作方式，就簡單的多了，如果不把它們關聯起來，在不同手機裡面，對齊是很難實作的。

感想

有些東西之是以難實作，就是沒有想清楚它們之間的關系，如果能早點想清楚，一切就簡單的多。