使用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. 自学git心得-5

    标签管理也是git里面比较重要的一部分内容,我们下载软件的时候经常看到诸如v2.0.v2.3.0这样的版本号,在git里也是一样,有时为了避免分支的名称五花八门而发生混淆的情况,我们常常会 给分支贴上 ...

  2. JQuery学习---JQuery基础知识

    JQuery介绍: [官网]http://jquery.com [参考API]http://jquery.cuishifeng.cn/ JQuery的低版本支持IE低版本,JQuery的2版本不太支持 ...

  3. MYSQL数据库、用户、表等基础构建

    MYSQL数据库.用户.表等基础构建: 1.->:创建数据库: 1.1. create schema [数据库名称] default character set utf8 collate utf ...

  4. easy_encode_decode

    s = input("输入:") result = '' for i in range(len(s)): result += chr(ord(s[i])^2000) print(r ...

  5. 遍历Map集合的几种方式

    import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entr ...

  6. canvas小球 时间倒计时demo-优化

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. 大屏FAQ

    1. 大屏可以分为哪几类?帆软有哪些大屏硬件合作商?编辑 拼接屏:通常由单个46-55寸的液晶显示屏组成屏幕墙,存在拼缝,借助矩阵.屏控系统来进行信号的输入与输出控制,可以实现屏幕墙上多个屏幕的组合. ...

  8. jquery实现的时间轴

    代码 样式文件style.css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 ...

  9. InputStream TO byte

    public class ByteToInputStream { public static final InputStream byte2Input(byte[] buf) { return new ...

  10. BZOJ3174:[TJOI2013]拯救小矮人(DP)

    Description 一群小矮人掉进了一个很深的陷阱里,由于太矮爬不上来,于是他们决定搭一个人梯.即:一个小矮人站在另一小矮人的 肩膀上,知道最顶端的小矮人伸直胳膊可以碰到陷阱口.对于每一个小矮人, ...