使用css实现物流进度的样式的实例代码

效果：

css样式：

<style type="text/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;            margin-left: -7px;            margin-right: 10px        }        .package-status .status-box {            overflow: hidden        }        .package-status .status-list>li {            height: auto;            width: 95%;        }        .package-status .status-list {            margin-top: -8px        }        .package-status .status-box {            position: relative        }        .package-status .status-box:before {            content: " ";            background-color: #f3f3f3;            display: block;            position: absolute;            top: -8px;            left: 20px;            width: 10px;            height: 4px        }        .package-status .status-list {            margin-top: 0px;        }        .status-list>li:not(:first-child) {            padding-top: 10px;        }        .status-content-before {            text-align: left;            margin-left: 25px;            margin-top: -20px;        }        .status-content-latest {            text-align: left;            margin-left: 25px;            color: #0278D8;            margin-top: -20px;        }        .status-time-before {            text-align: left;            margin-left: 25px;            font-size: 10px;            margin-top: 5px;        }        .status-time-latest {            text-align: left;            margin-left: 25px;            color: #0278D8;            font-size: 10px;            margin-top: 5px;        }        .status-line {            border-bottom: 1px solid #ccc;            margin-left: 25px;            margin-top: 10px;        }        .list {            padding: 0 20px;            background-color: #F8F8F8;            margin: 10px 0 0 25px;            border: 1px solid #EBEBEB;        }        .list li {            line-height: 30px;            color: #616161;        }    </style>

　　HTML：

<body>    <div class="package-status">        <div class="status-box">            <ul class="status-list">                <li>                    <div class="status-content-before">您的订单开始处理</div>                    <div class="status-time-before">2017-08-17 23:31 周四</div>                    <div class="status-line"></div>>                </li>                <li>                    <div class="status-content-before">卖家发货</div>                    <div class="status-time-before">2017-08-18 09:11 周五</div>                    <div class="status-line"></div>                </li>                <li>                    <div class="status-content-before">发往深圳中转站</div>                    <div class="status-time-before">2017-08-19 01:21 周六</div>                    <div class="status-line"></div>                </li>                <li>                    <div class="status-content-before">到达深圳</div>                    <div class="status-time-before">2017-08-19 06:21 周六</div>                    <div class="status-line"></div>                </li>                <li>                    <div class="status-content-before">发往潮汕中心</div>                    <div class="status-time-before">2017-08-19 09:21 周六</div>                    <div class="status-line"></div>                </li>                <li class="latest">                    <div class="status-content-latest">快件到达 潮汕中心</div>                    <div class="status-time-latest">2017-08-20 14:16 周日</div>                    <div class="status-line"></div>                </li>            </ul>        </div>    </div></body>

以上所述是小编给大家介绍的使用css完成物流进度的样式的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

使用css实现物流进度的样式的实例代码