使用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. ruby-程序员最好的朋友

    ruby一门开源的动态编程语言,注重简洁和效率.Ruby 的句法优雅,读起来自然,写起来舒适. 介绍 这是个不会超过20分钟的 Ruby 简介.阅读前请您先将 Ruby 安装好.(如果您还没有安装Ru ...

  2. spring+quarts常见问题

    javax/transaction/UserTransactionCaused by: java.lang.NoClassDefFoundError: javax/transaction/UserTr ...

  3. TCP协议 状态解析和状态统计

    一.三次握手和四次挥手 1.建立连接(三次握手)   (1)服务器会处于listen状态,客户端发送一个带SYN标志的TCP报文到服务器.   (2)服务器端回应客户端的请求,这是三次握手中的第2个报 ...

  4. maven(十)-继承

     继承 如果项目划分了多个模块,都需要依赖相似的jar包,只需要创建一个父模块,在它的pom.xml文件中配置依赖jar包.功能模块只需要继承父模块,就可以自动得到其依赖jar包,而不需要在每个模 ...

  5. linux系统PKWindows系统，从各方便分析linux和Windows的优劣

    服务器系统linux系统和linux系统哪个好用,公说公有理婆说婆有理,今天鼎峰凡凡大概对Linux系统与Windows系统的优缺点PK!可以从以下几个方面来看 ①成本  赞成Linux的声音Linu ...

  6. C# 递归函数详细介绍及使用方法

    什么是递归函数/方法? 任何一个方法既可以调用其他方法也可以调用自己,而当这个方法调用自己时,我们就叫它递归函数或递归方法. 通常递归有两个特点: 1. 递归方法一直会调用自己直到某些条件被满足 2. ...

  7. 10、Node.js模块系统

    ##################################################################################介绍Node.js模块系统为了让No ...

  8. 【[CQOI2015]选数】

    这道题自然是可以反演的 按照反演的套路我们先设出两个函数 \(F(n)\)表示从\([L,H]\)中任选\(N\)个数的最大公约数是\(n\)或者\(n\)的倍数的情况数 \(f(n)\)表示从\([ ...

  9. Apollo2.5摄像头安装

    前言:在Apollo美研团队和长沙CiDi团队的支持下,最近完成了Apollo推荐的摄像头AR023ZWDR(Rev663F12)调试,在这里对Apollo的笔记做一个补充,希望以后的开发者不用在踩我 ...

  10. [转]Ribbon界面介绍（1）

    小弟最近在学习VS2010中Ribbon界面的介绍,相比与C#的界面设计的强大,C++的界面实在太难做了,但没办法,项目需求,又不得不做,遍查网络上的资料,发现有用的基本上就是MSDN的帮助,又是全英 ...