模仿京东淘宝的物流跟踪模板样式

Posted 2020-09-02 moumou

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模仿京东淘宝的物流跟踪模板样式相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
        <style>
            body,
            html {
                background-color: #f2f2f2;
            }
            ul,li{
                list-style: none;
            }
            .order_track {
                background-color: #fff;
                margin-bottom: 0.5em;
                padding: 0.5em;
            }

            .order_track p {
                font-size: 1.0em;
                line-height: 1.5;
                color: #666;
                margin-bottom: 0;
            }

            .order_track p span {
                color: #333;
            }

            .order_logistics{
                padding-left: 2.0em;
                background-color: #fff;
            }

            .order-flow {
                padding-left: 0em;
                padding-bottom: 1.0em;
                position: relative;
            }
            .order-flow:before{
                content: ‘‘;
                position: absolute;
                width: 200%;
                height: 200%;
                border-left: 1px solid rgb(230, 230, 230);/* 直接改变border的位置即可 */
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: scale(0.5, 0.5);
                transform: scale(0.5, 0.5);
                box-sizing: border-box;
            }

            .of-storey li {
                position: relative;
                padding: 10px;
                /* border-bottom: 1px solid #e8e5e5; */
            }
            .of-storey li:after{
                content: " ";
                position: absolute;
                left: 0;
                width: 100%;
                height: 1px;
                bottom: 0;
                border-bottom: 1px solid rgb(230, 230, 230);
                -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%;
                -webkit-transform: scaleY(.5);
                transform: scaleY(.5);
            }

            .of-storey li span {
                display: block;
                font-size: 1.0em;
                color: #666;
            }

            .of-storey li span.time {
                font-size: 0.9em;
                color: #999;
            }

            .of-storey li .icon {
                position: absolute;
                top: 45%;
                left: -2.75em;
                width: 9px;
                height: 9px;
                border-radius: 5px;
                background-color: #ccc;
            }

            .of-storey li .icon.on {
                background-color: #0099ff;
            }
        </style>
    </head>
    <body>
        <div class="order_logistics">
            <div class="order-flow">
                <ul class="of-storey">
                    <li>
                        <span class="icon on"></span>
                        <span>快递快递快递快递快递快递</span>
                        <span class="time">2017-03-04 9:26</span>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

以上是关于模仿京东淘宝的物流跟踪模板样式的主要内容，如果未能解决你的问题，请参考以下文章

我的快递为啥没有更新物流状态呢。

HTML CSS 模仿京东页面做出的页面。但是打开页面最下面有个左右滑动栏。导致页面不居中。该怎么解决？

京东快递多个单号可以批量查询吗？要怎么查？

以前最佩服马云，现在最佩服京东，很早之前就感觉京东会慢慢替代淘宝

HTML上做一个京东样式的登录界面要怎么搞

京东JOS API 接入使用笔记