使用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. Excel 操作总结

    1.excel 表格中换行:Alt+Enter; 2.Excel2003以上版本设置下拉菜单     DATA->Data Validation ->Data Validation -&g ...

  2. PLSQL Developer V10 注册码

    PLSQL Developer V10 注册码(V10.0.3.1701可以使用)注册时间至:9999/12/31 License Number:999 Product Code:ljkfuhjpcc ...

  3. Microsoft Azure 微软云平台系列新品发布

    在移动为先,云为先的今天,微软为拥抱云文化的企业提供了技术和工具.利用创新且全面的移动解决方案和开发者工具,微软有独到之处,它帮助所有客户在云为先时代中发现潜在价值. 正如希望加快云创新步伐的你们所期 ...

  4. LDF文件丢失, 如何仅用MDF文件恢复数据库呢?

    笔者的一个大小为2 TB的SQL Server的database的LDF文件在玩存储盘映射的过程中莫名其妙的丢失了. 好在MDF文件还在. 笔者慌了, Bruce Ye告诉笔者, 不用着急, 光用MD ...

  5. 《深入理解mybatis原理》 Mybatis数据源与连接池

    对于ORM框架而言,数据源的组织是一个非常重要的一部分,这直接影响到框架的性能问题.本文将通过对MyBatis框架的数据源结构进行详尽的分析,并且深入解析MyBatis的连接池. 本文首先会讲述MyB ...

  6. Windows Server 2003 动态网站IIS设置(图)

    一.安装IIS     Windows Server 2003 虽说是服务器版本,但在默认情况下并没有安装IIS,要在本地浏览asp,PHP等动态网页,就必须安装IIS.在买系统盘的时候,请注意看一下 ...

  7. [翻译] KGModal

    KGModal KGModal is an easy drop in control that allows you to display any view in a modal popup. The ...

  8. centos6.3_gcc安装软件及流程

    分享链接下载文件上传安装即可 链接:https://pan.baidu.com/s/15eUhm9LTUdHDPkXOyRb9Tg 密码:tohr # 文件内置安装脚本,直接安装即可 [root@lo ...

  9. css中的圣杯布局和双飞翼布局

    圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...

  10. Asp.Net MVC源码调试

    首先下载MVC源代码,下载地址为:https://aspnetwebstack.codeplex.com/ 打开项目,卸载test文件夹下的所有项目和System.Web.WebPages.Admin ...