效果展示 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. kafka的一些认识

    原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com   近来无事研究了一下kafka,并且用golang连接kafka做了producer和consumer的简单测试 ...

  2. Atitit 编程语言知识点tech tree v2 attilax大总结

    Atitit 编程语言知识点tech tree v2 attilax大总结 大分类中分类小分类知识点原理与规范具体实现(javac#里面的实现phpjsdsl(自己实现其他语言实现 类与对象实现对象实 ...

  3. fir.im Weekly - 94 个 iOS 开发资源推荐

    距离 2016 年还有 17 个日夜,而你和回家只隔了一张 12306 验证码的距离,祝大家抢票顺利.本期 fir.im Weekly 收集了一些优秀的 GitHub 源码.开发工具和动画特效,希望对 ...

  4. C#设计模式-简单工厂

    工厂模式专门负责将大量有共同接口的类实例化.工厂模式可以动态决定将哪一个类实例化,不必事先知道每次要实例化哪一个类.工厂模式有以下几种形态: 简单工厂(Simple Factory)模式 工厂方法(F ...

  5. 谷毅(WingKu)横空出世

    天空划出一道彩虹,谷毅(WingKu)横空出世,这里的产品全由本人开发制作,如有雷同不胜荣幸,欢迎前往下载使用,如果有啥建议或者使用当中遇到什么问题,也可在此留言评论~OK,开张啦~!以后每个产品会以 ...

  6. iOS-性能优化3

    iOS-性能优化3 UITableView性能优化与卡顿问题 1.最常用的就是cell的重用, 注册重用标识符 如果不重用cell时,每当一个cell显示到屏幕上时,就会重新创建一个新的cell 如果 ...

  7. css 弹出层-透明层

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

  8. 分享10条Visual Studio 2012的开发使用技巧

    使用Visual Studio 2012有一段时间了,并不是追赶潮流,而是被逼迫无可奈何.客户要求的ASP.NET MVC 4的项目,要用.NET 4.5来运行.经过一段时间的摸索,得到一点经验和体会 ...

  9. 【WP 8.1开发】如何把自定义字体塞进应用里

    或许,系统自带的字体不足以体现应用程序的魅力,对于表现极强的汉字来说,更是如此.这时候,我们就会想,要是能把网上下载的艺术字体塞到应用包中,那岂不美哉?那么,这可以实现吗?答案是Yes的. 接下来,阿 ...

  10. java匿名类和匿名对象及this的其他用法

    /* 匿名内部类:就是内部类的简写格式. 必须前提:内部类必须继承或者实现一个类或者接口. 匿名内部类其实就是一个匿名 子类对象. 格式:new 父类对象 or 接口(){ 子类内容:(覆盖父类的, ...