html + css 实现进度条

 

 

1.HTML

<ul class="steps">
        <li class="active">
            <div class="active-title">买家下单</div>
            <div class="active-view"></div>
            <div class="active-datetime">2020-10-23</div>
        </li>
        <li>
            <div class="active-title">买家付款</div>
            <div class="active-view"></div>
            <div class="active-datetime">2020-10-23</div>
        </li>
        <li>
            <div class="active-title">商家发货</div>
            <div class="active-view"></div>
            <div class="active-datetime">2020-10-23
            </div>
        </li>
        <li>
            <div class="active-title">订单完成</div>
            <div class="active-view"></div>
            <div class="active-datetime"></div>
        </li>
    </ul>

2.css 代码

       .steps li {
            list-style-type: none;
            font-size: 14px;
            text-align: center;
            width: 25%;
            position: relative;
            float: left;
            /*height: 40px;*/
            line-height: 40px;
            padding: 10px 0;
        }
            
            .steps li > .active-view:before {
                display: block;
                content: counter(step); 
                counter-increment: step;
                width: 15px;
                height: 15px;
                background-color: #ccc;
                line-height: 10px;
                border-radius: 15px;
                font-size: 0;
                color: #fff;
                text-align: center;
                font-weight: 600;
                margin: 0 auto 9px auto;
            }

            .steps li > .active-title{
                font-size:16px;
                font-weight:600;
                letter-spacing:2px;
            }

            .steps li > .active-datetime{

            }

    .active .active-title {
        color: #23B393;
    }

            
            .steps li .active-view:after {
                content: '';
                width: 95%;
                height: 3px;
                background-color: #ccc;
                position: absolute;
                top: 55px;
                z-index: 0;
                left:-47%;
            }

            .steps li:first-child .active-view::after {
                content: '' !important;
                display: none !important;
            }

    .steps li.active .active-view:before, .steps li.active .active-view:after {
        background-color: #23B393;
    }