div css仿京东订单流程图样式代码

效果展示 http://hovertree.com/texiao/css/25/本效果适合PC,也适合移动端手机扫描二维码查看效果:效果图:代码如下:转自:http://hovertre

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

效果展示 http://hovertree.com/texiao/css/25/

本效果适合PC,也适合移动端

手机扫描二维码查看效果:
div css仿京东订单流程图样式代码

效果图:
div css仿京东订单流程图样式代码

代码如下:

<!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仿京东订单流程图样式代码

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120376.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 每天一个linux命令(34):du 命令

    每天一个linux命令(34):du 命令

  • linux应急响应检查项_centos7查看服务状态

    linux应急响应检查项_centos7查看服务状态上一篇文章说到Windows的应急响应排查,本篇文章就来说说Linux的应急响应排查。首先,前期交互这部分的内容还是不能少的,毕竟掌握的信息越多,排查的思路就越清晰。Part1熟悉主机环境 uname-a cat/proc/version lsb_release-a 首先,先对排查主机的基本信息有一个了解。Part2运行进程排查首先熟悉一下ps命令的参数:ps[选项] -e显示所有进程。…

  • pycharm2021专业版永久激活码【在线破解激活】

    pycharm2021专业版永久激活码【在线破解激活】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • android studio java和xml_android studio闪退

    android studio java和xml_android studio闪退Program:         $JDKPath$\bin\javah.exeParameters:      -classpath$OutputPath$;$ModuleSdkPath$/platforms/android-25/android.jar-jni-d$ModuleFileDir$/src/main/jni$FileClass$

  • linux 重命名文件名_centos7重命名文件

    linux 重命名文件名_centos7重命名文件在这个简短的教程中,我们将向您展示如何在Linux中重命名文件。通常,这些命令在云服务器上使用,并且在大多数基于Unix的系统(包括CentOS和Ubuntu)上运行。这是我们一系列简短的Linux教程中的第一篇教程。使用mv命令重命名文件在Linux中重命名命令的最基本(相对最简单)的方法是使用mv命令。语法如下:mv[选项]oldfilenamenewfilename这是一个真实的示例…

  • 谷歌浏览器驱动镜像

    谷歌浏览器驱动镜像一、背景在使用selenium时,经常会提示谷歌版本包和当前的selenium不匹配例如下报错:selenium.common.exceptions.SessionNotCreatedException:Message:sessionnotcreated:ThisversionofChromeDriveronlysupportsChromeversion90二、谷歌浏览器驱动镜像下载ChromeDriverMirror…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号