效果展示 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. Unity3D骨骼动画的分解（CleanData.Ani详解）

    CleanData是什么 CleanData以前没有特定的名字,(在easydown这个开源项目中,作为一个GameObjParser模块存在).在某三国项目中,我们使用GameObjParser将N ...

  2. 剑英陪你玩转图形学(五)focus

    很久没来和大家交流业务(zhuangbi)水平了,最近实在是很忙,报名了小游戏大赛,一点时间都抽不出,已经坑了. 今天抓紧时间和大家介绍一个小效果: 新手引导的时候,我们会需要一种全屏幕黑掉,只有一个 ...

  3. 02- Shell脚本学习--运算符

    Shell运算符 Bash 支持很多运算符,包括算数运算符.关系运算符.布尔运算符.字符串运算符和文件测试运算符. 算术运算符 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 aw ...

  4. JSP连接mysql数据库的重点

    1:用mysql驱动把mysql与tomcat的连接起来.把mysql驱动包(不用解压)放到Tomcat安装目录中lib文件夹下即可. 2:然后在自己的新建的web应用程序上面就可以下下面的代码 3: ...

  5. DOM_01之树及遍历

    1.DOM:ECMAScript+DOM+BOM,Document Object Model,核心DOM+HTML DOM+XML DOM: 2.辨析:①HTML:专门编写网页内容的语言:②XHTML ...

  6. javascript_core_08之闭包、对象、原型

    1.闭包: ①外层函数包裹受保护的变量和操作变量的内层函数: ②外层函数将内层函数返回到外部: ③调用外部函数,获得内层函数的对象: 2.面向对象:用对象描述现实一个具体事物属性和功能,按需调用功能, ...

  7. 利用@property实现可控的属性操作

    利用@property实现可控的属性操作 Python中没有访问控制符, 不像java之类的 public class Person{ private int x public int getAge( ...

  8. APP性能测试

    方法一: 本地安装安卓模拟器,用LR选择模拟器录制方式录制 方法二: 手机真机需要root,可以在电脑上下载一键root工具(如卓大师),然后手机和电脑用数据线连接,然后root. 在手机上运行 Mo ...

  9. IOS-各控件默认尺寸和参考图标大小

    UITabBar

  10. 【WP开发】使用磁倾仪

    磁倾仪,也叫倾斜仪,主要用来检测手机设备在各个轴上旋转的角度.注意,磁倾仪与陀螺仪的差异,陀螺仪的关注点是旋转的角速度,它并不关注角度,只注重速度.而磁倾仪的读数就是设备倾斜的角度. 不管是使用重力感 ...