使用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完成物流进度的样式的更多相关文章

  1. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  2. N 种仅仅使用 HTML/CSS 实现各类进度条的方式

    本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式,通过本文,你可能可以学会: 通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 &l ...

  3. 最简单的android自定义进度条样式

    一.自定义圆形进度条样式 1.在安卓项目drawable目录下新建一个xml文件如下:<?xml version="1.0" encoding="utf-8&quo ...

  4. 纯CSS打造好看的按钮样式

    好看的按钮.链接.div样式,效果预览: http://hovertree.com/code/run/css/s8o19792.html 发现今天积分和排名不错: 代码如下: <!DOCTYPE ...

  5. 炫！一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  6. div css仿京东订单流程图样式代码

    效果展示 http://hovertree.com/texiao/css/25/ 本效果适合PC,也适合移动端 手机扫描二维码查看效果: 效果图: 代码如下: <!DOCTYPE html> ...

  7. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  8. CSS 实现滚动进度条效果

    参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...

  9. QT QProgressBar QProgressDialog 模态，位置设置，无边框，进度条样式

    一  关于模态设置 QProgressDialog可以设置模态(需要在new的时候传入parent),QProgressBar设置不好: 只有dialog可以设置模态,widget不能设置模态(QPr ...

随机推荐

  1. ElasticSearch初体验之使用

    好久没写博文了, 最近项目中使用到了ElaticSearch相关的一些内容, 刚好自己也来做个总结.现在自己也只能算得上入门, 总结下自己在工作中使用Java操作ES的一些小经验吧. 本文总共分为三个 ...

  2. Azure 虚拟机如何配置 AntiMalware

    本文仅演示通过 PowerShell 方式安装并配置 AntiMalware 的过程. 经典虚拟机          立即访问http://market.azure.cn 加载 Antimalware ...

  3. dADas

    Linux(Centos)之安装Nginx及注意事项 - Kencery - 博客园   怪才(Kencery) 菜鸟的里程中只有奋斗,别无其他 博客园 首页 新随笔 联系 订阅 管理   Linux ...

  4. Mysql常用函数汇总-经典实用

    以下是对mysql中的常用函数进行了汇总介绍.需要的朋友可以过来参考下. 一.数学函数ABS(x) 返回x的绝对值BIN(x) 返回x的二进制(OCT返回八进制,HEX返回十六进制)CEILING(x ...

  5. 转自csdn：计算机启动过程

    启动第一步--加载BIOS 当你打开计算机电源,计算机会首先加载BIOS信 息,BIOS信息是如此的重要,以至于计算机必须在最开始就找到它.这是因为BIOS中 包含了CPU的相关信息.设备启动顺序信息 ...

  6. python 获取当前目录，上级目录，上上级目录

    import os print '***获取当前目录***' print os.getcwd() print os.path.abspath(os.path.dirname(__file__)) pr ...

  7. java抽象继承-模板方法

    //模板方法:步骤提前设计好,用的时候只需要改步骤内容 public class TemplateDemo { public static void main(String[] args) { // ...

  8. Java HttpURLConnection模拟请求Rest接口解决中文乱码问题

    转自:http://blog.csdn.net/hwj3747/article/details/53635539 在Java使用HttpURLConnection请求rest接口的时候出现了POST请 ...

  9. php memcache分布式和要注意的问题

    Memcache的分布式介绍 memcached虽然称为“分布式”缓存服务器,但服务器端并没有“分布式”功能.服务器端仅包括内存存储功能,其实现非常简单.至于memcached的分布式,则是完全由客户 ...

  10. python之使用__future__

    Python的新版本会引入一些新的功能特性,但一般一部分的新功能可以在旧版本上测试,测试成功再移植到新的版本上,旧版本可以通过导入__future__模块的某些功能,测试新版本的新功能.(注意:fut ...