效果展示 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. php json与xml序列化/反序列化

    在web开发中对象的序列化与反序列化经常使用,比较主流的有json格式与xml格式的序列化与反序列化,今天想写个jsop的小demo,结果发现不会使用php序列化,查了一下资料,做个笔记 简单数组js ...

  2. CSS折行小记

    最近项目中遇到字段内容过长的显示问题. 后来在网上找了资料,http://www.php100.com/html/webkaifa/DIV_CSS/2009/0416/2453.html  用了td( ...

  3. redis数据结构整理（二）

    摘要: 1.各个数据结构的应用举例 1.1 String类型应用举例 1.2List类型应用举例 1.3Set类型应用举例 1.4Sorted Set类型应用举例 1.5Hash类型应用举例 内容: ...

  4. Oracle增删改DML脚本记录

    --insert into添加数据 ','王军','男'); --提交事物 commit; --回滚事物 --rollback; insert into teacher1 select * from ...

  5. WebApi系列~通过HttpClient来调用Web Api接口~续~实体参数的传递

    回到目录 上一讲中介绍了使用HttpClient如何去调用一个标准的Web Api接口,并且我们知道了Post,Put方法只能有一个FromBody参数,再有多个参数时,上讲提到,需要将它封装成一个对 ...

  6. lua跨平台文件夹遍历匹配查找

    require"lfs" --[[Desc:在B路径D文件中下 搜寻A路径下的没用到的C类文件: 并且将没用到的B类文件名称打印出来: 设置好路径拖到lua自带编辑器中即可运行之; ...

  7. Bootstrap的学习

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架. Bootstrap 是基于 HTML.CSS.JAVASCRIPT <link href="http://c ...

  8. iOS----Xcode6或者Xcode7设置LaunchImage图标

    最近设置LaunchImage图标时发现怎么都没有效果,后来发现是Xcode6中新建项目的时候会默认添加一个LaunchScreen.xib的文件,我们启动程序的时候也会发现,加载的时LaunchSc ...

  9. iOS-推送通知详解

    这是一篇编译的文章,内容均出自Parse.com的iOS开发教程,同时作者还提供了视频讲解.本文将带领开发者一步一步向着iOS推送通知的深处探寻,掌握如何配置iOS推送通知的奥义. 介绍一点点背景资料 ...

  10. node.js 简介

    简介:     Node,是一个可以让 JavaScript 运行在服务器端的平台.它可以让 JavaScript 脱离浏览器的束缚运行在一般的服务器环境下     Node.js 是一个为实时Web ...