物流进度页面html,使用css完成物流进度的样式

使用css完成物流进度的样式

效果：

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;

height: 6px;

border-radius: 10px;