div css仿京东订单流程图样式代码
2016-06-07 09:33
549 查看
效果展示 http://hovertree.com/texiao/css/25/
本效果适合PC,也适合移动端
手机扫描二维码查看效果:
效果图:
代码如下:
转自:http://hovertree.com/h/bjaf/csswuliu.htm
特效汇总:http://www.cnblogs.com/roucheng/p/texiao.html
觉得夏天不好,太热了
本效果适合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
觉得夏天不好,太热了
相关文章推荐
- box-shadow使用, border-radius使用
- CSS之显示天气
- iOS全局设置navigation的样式
- 使用css3 box-reflect设计倒影效果
- 如何使用CSS来编辑文本
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
- 20个非常绚丽的 CSS3 特性应用演示
- 【转】纯CSS3制作的Tab选项卡
- Flex 布局教程:语法篇
- div+css 定位浅析
- 3行Css实现div水平、垂直居中
- css换行属性和文本属性
- 使用CSS样式表
- 动态修改样式和层叠样式表
- CSS盒模型
- css 去除点击之后的虚线
- CSS技巧(一):清除浮动
- CSS文字排版
- SnackBar 笔记(二)样式美化
- 改变CSS世界纵横规则的writing-mode属性