效果展示 http://hovertree.com/texiao/css/25/

本效果适合PC，也适合移动端

手机扫描二维码查看效果：

效果图：

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />

<title>div css仿京东订单流程图样式代码—何问起</title>

<base target="_blank" />

<style>

.hovertree-tracklist ul li {

list-style: none;

}

.hovertree-trackrcol {

max-width: 900px;

border: 1px solid #eee;

}

.hovertree-tracklist {

margin: 20px;

padding-left: 5px;

position: relative;

}

.hovertree-tracklist li {

position: relative;

padding: 9px 0 0 25px;

line-height: 18px;

border-left: 1px solid #d9d9d9;

color: #999;

}

.hovertree-tracklist li.first {

color: red;

padding-top: 0;

border-left-color: #fff;

}

.hovertree-tracklist li .node-icon {

position: absolute;

left: -6px;

top: 50%;

width: 11px;

height: 11px;

background: url(http://hovertree.com/texiao/css/25/img/order-icons.png) -21px -72px no-repeat;

}

.hovertree-tracklist li.first .node-icon {

background-position: 0 -72px;

}

.hovertree-tracklist li .time {

margin-right: 20px;

position: relative;

top: 4px;

display: inline-block;

vertical-align: middle;

}

.hovertree-tracklist li .txt {

max-width: 600px;

position: relative;

top: 4px;

display: inline-block;

vertical-align: middle;

}

.hovertree-tracklist li.first .time {

margin-right: 20px;

}

.hovertree-tracklist li.first .txt {

max-width: 600px;

}

.hovertreeinfo{margin-top:10px;}

.hovertreeinfo a{color:blue;}

</style>

</head>

<body>

<div class="hovertree-trackrcol">

<div class="hovertree-tracklist">

<ul>

<li class="first">

<i class="node-icon"></i>

<span class="time">2016-06-06 18:07:15</span>

<span class="txt">感谢您在何问起购物，欢迎您再次光临！</span>

</li>

<li>

<i class="node-icon"></i>

<span class="time">2016-06-06 17:57:23</span>

<span class="txt">配送员【何问起】已出发，联系信息【微信公众号：何问起，感谢您的耐心等待，参加评价还能赢取何币呦】</span>

</li>

<li>

<i class="node-icon"></i>

<span class="time">2016-06-06 16:27:05</span>

<span class="txt">您的订单在中山分拨中心【何问起】站验货完成，正在分配送员</span>

</li>

<li>

<i class="node-icon"></i>

<span class="time">2016-06-06 01:07:50</span>

<span class="txt">您的订单已在何问起广州分拨中心发货完成，准备发往中山分拨中心</span>

</li>

<li>

<i class="node-icon"></i>

<span class="time">2016-06-05 10:07:15</span>

<span class="txt">您的订单已经进入何问起南京分拨中心，准备发往广州分拨中心</span>

</li>

<li>

<i class="node-icon"></i>

<span class="time">2016-06-05 8:00:05</span>

<span class="txt">您提交了订单，请等待何问起系统的确认</span>

</li>

</ul>

</div>

</div>

<div class="hovertreeinfo">

<a href="http://hovertree.com">首页</a>

<a href="http://hovertree.com/texiao/">特效</a>

<a href="http://hovertree.com/h/bjaf/csswuliu.htm">代码说明</a>

</div>

</body>

</html>

转自：http://hovertree.com/h/bjaf/csswuliu.htm

特效汇总：http://www.cnblogs.com/roucheng/p/texiao.html

觉得夏天不好，太热了

div css仿京东订单流程图样式代码的更多相关文章

  1. CSS 仿 iOS 系统通知数字样式

    /** 仿 iOS 系统通知数字样式 **/ .num_span{ background-color: #f00; background-image: -webkit-linear-gradient( ...

  2. html网页什么样的字体最好看，css设置各种中文字体样式代码

    css代码如下:{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,Mi ...

  3. DIV+CSS颜色边框背景等样式

    1.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两 ...

  4. 如何从零开始学习DIV+CSS

    CSS是样式,DIV是层.DIV+CSS是网站标准(web标准),通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别.因为XHTML网站设计标准中,不再使用表格定位技术,而是采用D ...

  5. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

  6. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  7. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  8. 去除冗余 – 精简您的CSS样式代码

    讲讲常见的一些没有必要使用CSS代码情况,而这些不起作用可以去掉的CSS代码可能是我们经常忽视的.越是对CSS理解不够,越容易出现这些问题. 二.一些常见不必要CSS样式 1.与默认CSS样式一致 我 ...

  9. div+css样式命名规则，值得收藏

    div+css样式命名规则,值得收藏 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:w ...

随机推荐

  1. Java使用snakeyaml解析yaml

    YAML Yaml是一种"是一个可读性高并且容易被人类阅读,容易和脚本语言交互,用来表达资料序列的编程语言."类似于XML但比XML更简洁,语法详见 http://www.ruan ...

  2. 基础才是重中之重~方法override详解

    回到 目录 之所以写这篇文章,完全是因为这次代码审核,这次代码审核过程当中,出现了很多我认为基础知识不够扎实的问题,所以,打算把它们记录下来,共大家分享. 方法的override,即方法的覆写或者重写 ...

  3. Nginx下WordPress的Rewrite

    最近接触WP Super Cache,该插件要求固定链接必须是重写的,故用到Rewrite. 我的是这样配置的: /usr/local/nginx/conf/rewrite/wordpress.con ...

  4. Oracle Redo 以及 Archived日志简述

    Oracle通过Redo Archived实现数据的归档 什么是Redo日志 Redo日志记录了数据的变更,用于在数据库出现故障后,进行数据恢复. 功能主要由三个组件实现:Redo Log Buffe ...

  5. 带你走近AngularJS - 体验指令实例

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  6. Atitit usrQBM2331 参数格式化规范

    Atitit usrQBM2331 参数格式化规范 String sql = "insert agent(uid,parent_id,pwd,name,tel,wechat,bkkad,si ...

  7. Workflow中InArgument与OutArgument区别

    序号 InArgument[In参数] OutArgument[Out参数] 1 可以用VS设计器在xaml中定义[In参数]  可以用VS设计器在xaml中定义[Out参数] 2 在xaml中定义的 ...

  8. .NET程序集强命名删除与再签名技术 源代码剖析

    如果你想去除一个程序集的强签名(strong name),目前为止可以有两个途径 1  反编译为IL代码,删除签名部分,再编译为程序集 2  应用Re-Sign程序,直接对一个程序集再签名 生成和读取 ...

  9. SQL Server 2014云特性：无缝集成公有云

    本篇是我在IT168的约稿,原文地址:http://tech.it168.com/a2014/0620/1637/000001637358_all.shtml       IT行业已经进入了云时代,未 ...

  10. WPF自定义控件与样式(13)-自定义窗体Window & 自适应内容大小消息框MessageBox

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 自定义 ...