css仿淘宝物流进度

css是网页设计的重要组成部分，它可以使页面布局更加美观，例如仿照淘宝物流进度的样式就是一种常见的应用。

/*css样式*/.logistics{
        position:relative;
        margin-top:20px;
        width:100%;
}
.logistics .logistics-step{
        background:#efefef;
        padding:20px;
        border:2px dashed #ccc;
        display:flex;
        justify-content:space-between;
        position:relative;
        z-index:10;
}
.logistics .logistics-step .step-item{
        display:flex;
        flex-direction:column;
        align-items:center;
        position:relative;
}
.logistics .logistics-step .step-item:before{
        content:"";
        position:absolute;
        top:-13px;
        width:16px;
        height:16px;
        border-radius:50%;
        background:#ccc;
}
.logistics .logistics-step .step-item:after{
        content:"";
        position:absolute;
        bottom:-31px;
        width:2px;
        height:26px;
        background:#ccc;
}
.logistics .logistics-step .step-item.active{
        color:#e4393c;
}
.logistics .logistics-step .step-item.active:before{
        background:#e4393c;
}
.logistics .logistics-step .step-item.active:after{
        background:#e4393c;
}
.logistics .logistics-step .step-item .step-text{
        font-size:14px;
        font-weight:bold;
        text-align:center;
        margin-top:18px;
        line-height:20px;
}
.logistics .logistics-step .step-item .step-time{
        font-size:12px;
        color:#ccc;
        margin-top:5px;
        line-height:16px;
}
     

上面的css代码实现了对物流进度的样式设置，其中包括物流条的整体样式、每个步骤的样式、每个步骤的时间和状态，以及步骤的连线。使用flex布局，让每个步骤等分，使得页面显示更加美观。

如果需要使用仿淘宝物流进度的样式，只需要按照上面的样式设置进行模仿即可，这不仅可以提高设计效率，也可以提高页面的美观度和用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！