How to implement logistics progress style with css+html (code example)-CSS Tutorial-php.cn

How to implement logistics progress style with css+html (code example)

青灯夜游

Release： 2018-10-23 17:50:53

forward

6301 people have browsed it

The content of this article is to introduce how to implement logistics progress style (code example) in css html. Friends in need can refer to it. I hope it will be helpful to you.

Effect:

css style:

<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: &#39;&#39;;
            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>

Copy after login

HTML:

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

</body>

Copy after login

The above is the detailed content of How to implement logistics progress style with css+html (code example). For more information, please follow other related articles on the PHP Chinese website!