今天來練習切這個畫面

運用到的觀念

1. flexbox
2. google fonts 字體& icon font圖示載入
3. 加號選取器
4. ~選取器
5. 偽元素使用
6. 絕對定位&相對定位
7. background-image: linear-gradient() 漸層背景色設定
8. box-shadow陰影效果

HTML 結構

    <ol class="list">
      <li>
        <i class="fa fa-file-text" aria-hidden="true"></i>
        收到訂單
      </li>
      <li class="active">
        <i class="fa fa-archive" aria-hidden="true"></i>
        撿貨中
      </li>
      <li>
        <i class="fa fa-truck" aria-hidden="true"></i>
        運送中
      </li>
      <li>
        <i class="fa fa-check-circle" aria-hidden="true"></i>
        送達
      </li>
    </ol>

CSS 結構

1. 設定CSS RESET 和載入字體及圖示連結

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

2. 將高度設成滿版
   設定所有東西都會放到正中間
   設定背景顏色

html, body{
    height: 100%;
}

body{
    display: flex;
    align-items: center;
    background-color: #546377;
}

2. 將ol區塊內的li改成橫向排列
   設定li內字體 並設定居中
   將圖示和文字的排列方式改成並排 且排列方向改成由上到下排列
   將外框改成圓型 背景色改成白色 調整尺寸

.list{
    display: flex;
} 
.list li{
    font-family: "Noto Sans TC", sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100px;
    height: 100px;
    background-color: #fff; 
    border-radius: 50%;
}

3. 將ol區塊設在中間會發現沒反應，因為寬度不是滿版，需將width設定為100%，才有效果

.list{
    width: 100%; 
    display: flex;
    justify-content: center; 
} 

4. 調整圖示的尺寸 增加圖示和文字間的距離
   使用加號選取器 設定除了第一個li以外都加上100px的margin-left

.list li .fa{
    font-size: 25px;
    margin-bottom: 5px;
}

.list li + li{
    margin-left: 100px;
}

5. 使用偽元素::before搭配絕對定位和相對定位來製作連接的線條

.list li 設定 position: relative; 將連接線固定在這個區塊範圍
用加號選取器設定除了第一個li沒有連接線條以外，其他都要加上

.list li{
    font-family: "Noto Sans TC", sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100px;
    height: 100px;
    background-color: #fff; 
    border-radius: 50%;
    position: relative; 
    }

.list li + li::before{
    content: ''; 
    position: absolute;
    top:0;
    bottom:0;
    left:-100px; 
    margin: auto;
    width: 100px;
    height: 5px;
    background-color: #fff;
}

6. 調整li內文字大小及顏色
   背景色彩改成漸層色
   使用box-shadow做出陰影效果

.list li{
    font-family: "Noto Sans TC", sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100px;
    height: 100px;
    background-color: #fff; 
    background-image: linear-gradient(9deg, #185a9d, #43cea2); 
    border-radius: 50%;
    position: relative; 
    font-size: 20px;
    color:#fff;
    box-shadow: 0px 0px 0px 4px #fff; 
}

.list li + li::before{
    content: ''; 
    position: absolute;
    top:0;
    bottom:0; 
    z-index: -1;
    box-shadow: 0px 0px 0px 3px #fff; 
    margin: auto;
    left: -100px;
    width: 100px;
    height: 5px;
    background-color: #43cea2;
}

使用~選取器 設定在class="active"之後的li背景色彩都變成灰色

.list li.active ~ li{
    background-image: linear-gradient(9deg, #999 ,#ccc);
}

.list li.active ~ li::before{
    background-color: #999;
} 

參考資料: 金魚都能懂的這個網頁畫面怎麼切 : 訂單進度條

以上為個人學習筆記整理
若有錯誤，歡迎指正