容易的订单状态的导航图

简单的订单状态的导航图
容易的订单状态的导航图
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #progressBar{
            width: 600px;
            height: 50px;
            position: relative;
            margin: 50px 0 0 100px;
        }
        #progressBar .div{
            width: 100%;
            height: 5px;
            position: absolute;
            top:44%;
            left: 0;
            margin-top:-20px;
            border:1px solid #ddd;
            background: #ccc;
        }
        #progressBar .div span{
            position: absolute;
            display: inline-block;
            background: #ED5565;
            height: 5px;
            width: 50%;
        }
        #progressBar>span{
            position: absolute;
            top:0;
            margin-top: -10px;
            width: 25px;
            height: 25px;
            border:2px solid #ddd;
            border-radius: 50%;
            background: #ED5565;
            margin-left: 0;
            color:#fff;
        }
        #progressBar>span:nth-child(1){
            left: 0%;
        }
        #progressBar>span:nth-child(2){
            left: 25%;
            background:#ED5565;
        }
        #progressBar>span:nth-child(3){
            left: 50%;

            background:#ED5565;
        }
        #progressBar>span:nth-child(4){
            left: 75%;
            background:#ccc;
        }
        #progressBar>span:nth-child(5){
            left: 100%;
            background:#ccc;
        }
        #progressBar p{
            text-align: center;font-size: 12px;padding: 0;margin: 0;
        }
    </style>
</head>
<body>
<div id="progressBar">
    <!-- 进度条 -->
    <div class="div">
        <span></span>
    </div>
    <!-- 五个圆 -->
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <div class="subBar" style="position: absolute;left: -3%;top:22px">
        <p>订单下达</p>
        <p>20.7/11/29</p>
    </div>
    <div class="goodsBar" style="position: absolute;left: 22%;top:22px">
        <p>订单确认</p>
        <p>20.7/11/29</p>
    </div>
    <div class="goodsBar" style="position: absolute;left: 47%;top:22px">
        <p>订单完工</p>
        <p>20.7/11/29</p>
    </div>
    <div class="goodsBar" style="position: absolute;left: 73%;top:22px">
        <p style="color: #ccc">订单开船</p>
        <p></p>
    </div>
    <div class="goodsBar" style="position: absolute;left: 96%;top:22px;width: 80px">
        <p style="color: #ccc">订单到港</p>
        <p></p>
    </div>
</div>
</body>
</html>
容易的订单状态的导航图

相关推荐
