效果展示 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. video.js html5 视频播放器

    我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...

  2. jQuery实现在线文档

    1.1.1 摘要 现在,许多网站都提供在线图片和图书阅读的功能,这种方式比下载后阅读来的直观和人性化,要实现该功能涉及到点击处理和图片动态加载. 在接下来的博文中,我们将通过Javascript方式实 ...

  3. [备忘]删除SQL Server中无登录名的用户

    这个问题通常会在还原虚拟主机的备份SQL文件后发生,原先在虚拟主机上的用户会被还原到本地,但是本地没有权限对其进行操作. SELECT N'ALTER AUTHORIZATION ON SCHEMA: ...

  4. boost常用记录

    1.BOOST_FOREACH 经常会遍历容器,写for/while循环到手痛,使用BOOST_FOREACH可以减少我们的工作.支持容器vector/list/set/deque/stack/que ...

  5. EF架构~充血模型设置不被持久化的属性

    回到目录 在Poco实体中,一般只有属性没有方法,这在软件设计中称为贫血模型,而在DDD领域驱动设计中,比较提倡充血模型,即你的Poco实体中,即有属性,也有操作属性的方法,注意这里说的是操作属性的方 ...

  6. Docker镜像

    docker镜像123? 额,由于没有实验环境,没有亲手实践,因此理解可能有不对的地方. 反正也是学习笔记,以后再修改吧... docker的镜像跟virtualbox的镜像不一样.在虚拟机中,镜像是 ...

  7. iOS开发——网络使用技术OC篇&网络爬虫－使用正则表达式抓取网络数据

    网络爬虫-使用正则表达式抓取网络数据 关于网络数据抓取不仅仅在iOS开发中有,其他开发中也有,也叫网络爬虫,大致分为两种方式实现 1:正则表达 2:利用其他语言的工具包:java/Python 先来看 ...

  8. Searching for a valid kernel header path... The path "" is not a valid path to the ***** kernel headers. Would you like to change it? [yes]

    在centos 6.5安装vmtools时候,解压包,mount挂载后,安装pl过程中报 这个问题,半天没有解决,google 后发现这样就行了 I installed the kernel-deve ...

  9. java基础—继承题目：编写一个Animal类，具有属性：种类；具有功能：吃、睡。定义其子类Fish

    编写一个Animal类,具有属性:种类:具有功能:吃.睡.定义其子类Fish package zhongqiuzuoye; public class Animal { //属性 private Str ...

  10. 【WP 8.1开发】推送通知测试服务端程序

    所谓推送通知,用老爷爷都能听懂的话说,就是: 1.我的服务器将通知内容发送到微软的通知服务器,再由通知服务器帮我转发消息. 2.那么,微软的推送服务器是如何知道我的服务器要发消息给哪台手机呢?手机客户 ...