使用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. C语言二级指针（指向指针的指针）

    转载:http://c.biancheng.net/cpp/html/85.html 指针可以指向一份普通类型的数据,例如 int.double.char 等,也可以指向一份指针类型的数据,例如 in ...

  2. Win10系统创建关机快捷方式和快捷键的方法,实现一键关机

    想不想关机变得更加简单?在Win10中总有些朋友想要快速的操作体验,所以关机这个经常使用的功能也被设置的更简单,下面小编要分享的是“Win10系统创建关机快捷方式和快捷键的方法”. 1.在win10下 ...

  3. 全网数据实时备份方案[inotify,sersync]

    环境搭建 0.环境安装   gcc  yum install gcc -y 1.安装inotify(源码软件包) 文件下载:https://files.cnblogs.com/files/ftl101 ...

  4. 企业级Apache详解2

    http_conf主配置说明 root@lamp01 apache]# grep -Ev "#|^$" conf/httpd.conf DocumentRoot "/us ...

  5. IOS 对JSON解析的要求

    JOSN格式的原始字符串中, 键名必须为 引号 “” 包含的字符串,值必须是数组("[]" 用中括号包起来的部分),字典("{}" 用中括号包起来的部分),数字 ...

  6. java万年历

    import java.util.Scanner; public class perpetualCalendar { public static void main(String[] args) { ...

  7. redis.conf 具体配置详解

    redis.conf 具体配置详解 # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => ...

  8. Inno Setup新建项目

    一．准备一个例子工程WEI 运行起来是这样的 二．开始新建 使用Inno Setup Compiler或Inno Script Studio新建都可以,我这里先用Inno Setup Compiler ...

  9. controller中的路径明明书写正确，浏览器中访问的url也拼接正确，但报404

    Bug:controller中的路径明明书写正确,浏览器中访问的url也拼接正确,但报404 原因一:由于路由地址对应的处理方法存在同名而造成的,此时应该检查controller的方法们,看看有没有同 ...

  10. Odoo中报表PDF样式出错的解决办法

    如果发现生成的pdf样式不对,那可能是wkhtmltopdf没办法访问web服务器导致的.wkhtmltopdf进程使用web.base.url作为根url来生成对应文件路径,但这个地址是每次管理员登 ...