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)


相关推荐

  • oidc auth2.0_使用Spring Security 5.0和OIDC轻松构建身份验证「建议收藏」

    oidc auth2.0_使用Spring Security 5.0和OIDC轻松构建身份验证「建议收藏」oidcauth2.0“我喜欢编写身份验证和授权代码。”〜从来没有Java开发人员。厌倦了一次又一次地建立相同的登录屏幕?尝试使用OktaAPI进行托管身份验证,授权和多因素身份验证。SpringSecurity不仅是一个功能强大且可高度自定义的身份验证和访问控制框架,它还是保护基于Spring的应用程序的实际标准。从前,SpringSecurity需要使用大量的XML来…

  • 查看数据库隔离级别,mysql

    查看数据库隔离级别,mysql1.查看当前会话隔离级别select@@tx_isolation;2.查看系统当前隔离级别select@@global.tx_isolation;3.设置当前会话隔离级别setsessiontransactionisolatinlevelrepeatableread;4.设置系统当前隔离级别setglobaltransac…

  • 关于网站备案相关流程的通知_网站备案需要什么资料

    关于网站备案相关流程的通知_网站备案需要什么资料最近遇到个头疼的事,关于网站备案。目前有个网站W,备案在A,但是服务器不在A,在B(用的是电信的接入ip),就在前几天收到一封来自A的邮件大致意思如下:经A扫描,发现网站W的服务器不在A,A要取消我们网站的接入,让我们处理这个问题。由于自己对这块东西本身就不熟悉,所以走了很多弯路(原因是多方面的,具体就不说了,不是重点),不过好在最终找到解决方案:在电信新增接入(10000号找个电

    2022年10月28日
  • docker部署web项目_docker web程序本地化

    docker部署web项目_docker web程序本地化前言前面我们运行的容器并没有一些什么特别的用处。接下来让我们尝试使用docker构建一个web应用程序。我们将在docker容器中运行一个PythonFlask应用来运行一个web

  • 归一化函数normalize详解_求归一化常数A

    归一化函数normalize详解_求归一化常数A1.归一化归一化就是要把需要处理的数据经过处理后(通过某种算法)限制在你需要的一定范围内。首先归一化是为了后面数据处理的方便,其次是保证程序运行时收敛加快。归一化的具体作用是归纳统一样本的统计分布性。归一化在0-1之间是统计的概率分布,归一化在某个区间上是统计的坐标分布。归一化有同一、统一和合一的意思。归一化的目的,是使得没有可比性的数据变得具有可比性,同时又保持相比较的两个数据之间的相对关系,……

    2022年10月11日
  • CodeForces 484A Bits

    CodeForces 484A Bits

发表回复

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

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