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

前端  /  管理员 发布于 7年前   144

效果：

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完成物流进度的样式的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！


  • 上一条：
    利用CSS3动画实现圆圈由小变大向外扩散的效果实例
    下一条：
    css实现中间文字两边横线效果

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客