Day29 切版笔记 -订单进度条

今天来练习切这个画面

运用到的观念

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;
} 

参考资料: 金鱼都能懂的这个网页画面怎麽切 : 订单进度条

以上为个人学习笔记整理
若有错误，欢迎指正