html 物流状态,css+html实现物流进度样式的方法

css+html实现物流进度样式的方法

发布时间：2020-08-31 14:22:27

来源：亿速云

阅读：249

作者：小新

小编给大家分享一下css+html实现物流进度样式的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

效果：

css样式：

ul li {

list-style: none;

}

.package-status {

padding: 18px 0 0 0

}

.package-status .status-list {

margin: 0;

padding: 0;

margin-top: -5px;

padding-left: 8px;

list-style: none;

}

.package-status .status-list>li {

border-left: 2px solid #0278D8;

text-align: left;

}

.package-status .status-list>li:before {

/* 流程点的样式 */

content: '';

border: 3px solid #0278D8;

background-color: #0278D8;

display: inline-block;

width: 6px;