电商后台 js实现订单状态

最新推荐文章于 2022-05-18 00:43:53 发布

丫丫-lucy

最新推荐文章于 2022-05-18 00:43:53 发布

阅读量5.2k

点赞数 1

本文展示了淘宝订单状态页面的HTML结构及样式代码。该页面详细记录了从拍下商品到评价完成的所有步骤，并通过清晰的时间戳标记每个阶段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

copy淘宝的订单状态

页面html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<link href="orderStatusPro.css"  rel="stylesheet" type="text/css"/>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
		<title></title>
	</head>
	<body>
	
<div id="appStepbar">
 <div data-control="Stepbar" class="flowstep" >
 <ol class="detail-stepbar flowstep-5" >
 <li class="step-first" >
 <div class="step-done" >
 <div class="step-name" >拍下商品</div>
 <div class="step-no" >1</div>
 <div class="step-time" >
 <div class="step-time-wraper" >2016-11-11 22:25:35</div>
 </div>
 </div>
 </li>
 <li class="" >
 <div class="step-done" >
 <div class="step-name" >付款到支付宝</div>
 <div class="step-no" >2</div>
 <div class="step-time" >
 <div class="step-time-wraper" >2016-11-11 22:25:47</div>
 </div>
 </div>
 </li>
 <li class="" >
 <div class="step-done" >
 <div class="step-name" >卖家发货</div>
 <div class="step-no" >3</div>
 <div class="step-time" >
 <div class="step-time-wraper" >2016-11-11 22:32:38</div>
 </div>
 </div>
 </li>
 <li class="" >
 <div class="step-cur" >
 <div class="step-name" >确认收货</div>
 <div class="step-no" >4</div>
 </div>
 </li>
 <li class="step-last" >
 <div class="" >
 <div class="step-name" >评价</div>
 <div class="step-no" >5</div>
 <span ></span>
 </div>
 </li>
 </ol>
 </div>
 </div>
	</body>
</html>

orderStatusPro.css

ul,li,ol{
list-style:none;
margin:0
}
.flowstep{position:relative;width:990px;margin:0 auto}
.flowstep .detail-stepbar{margin:12px auto 0;overflow:hidden;zoom:1}
.flowstep .detail-stepbar .step-no,.flowstep .detail-stepbar .step-sub-box .step-sub{
	background:url(T1ze0ZXA0aXXcVlxZa-734-340.png) no-repeat 50% -102px}
.flowstep .detail-stepbar ol{overflow:hidden;zoom:1}
.flowstep .detail-stepbar li{float:left;text-align:center}
.flowstep .detail-stepbar .step-name{
padding:3px 0;
font-weight:700;
color:#888
}
.flowstep .detail-stepbar .step-no{
height:34px;
line-height:34px;
font-family:'arial black';
color:#fff;
font-size:18px
}
.flowstep .detail-stepbar .step-last .step-no{
background-position:50% -136px
}
.flowstep .detail-stepbar .step-time{
margin-top:10px;
color:#999;
padding:8px 0
}
.flowstep .detail-stepbar .step-time .step-time-wraper,.flowstep .detail-stepbar .step-time .step-time-min-wraper{
width:210px;
margin:0 auto;
display:inline-block;
zoom:1
}
.flowstep .detail-stepbar .step-time .step-time-min-wraper{
width:80px
}
.flowstep .detail-stepbar .step-time .time-first,.flowstep .detail-stepbar .step-time .time-last{
display:inline-block;
*display:inline;
*zoom:1;
width:68px
}
.flowstep .detail-stepbar .step-time .time-last{
padding-left:25px
}
.flowstep .detail-stepbar .step-cur .step-name{
color:#009349
}
.flowstep .detail-stepbar .step-cur .step-no{
background-position:50% 0
}
.flowstep .detail-stepbar .step-first .step-cur .step-no{
background-position:50% -34px
}
.flowstep .detail-stepbar .step-last .step-cur .step-no{
background-position:50% -68px
}
.flowstep .detail-stepbar .step-done .step-no{
background-position:50% -170px
}
.flowstep .detail-stepbar .step-first .step-done .step-no{
background-position:50% -204px
}
.flowstep .detail-stepbar .step-sub{
position:relative;
margin:0 auto;
width:120px;
height:34px
}
.flowstep .detail-stepbar .step-sub-box .step-sub-done{
background-position:50% -238px
}
.flowstep .detail-stepbar .step-sub-box .step-sub-none{
background-position:50% -272px
}
.flowstep .detail-stepbar .step-sub-box .step-sub-half{
background-position:50% -306px
}
.flowstep .detail-stepbar .step-sub .sub-first,.flowstep .detail-stepbar .step-sub .sub-last{
position:absolute;
top:11px;
font-weight:700;
color:#888;
white-space:nowrap
}
.flowstep .detail-stepbar .step-sub .sub-first{
right:120px;
text-align:right
}
.flowstep .detail-stepbar .step-sub .sub-last{
left:120px
}
.flowstep .stepbar-6{
width:100%
}
.flowstep .stepbar-6 .step-name{
height:42px;
*height:48px
}
.flowstep .stepbar-6 li{
width:165px
}
.flowstep .flowstep-6{
	width:100%
	}
.flowstep .flowstep-6 .step-name{
	height:42px;*height:48px
	}
.flowstep .flowstep-6 li{
	width:165px
	}
.flowstep .flowstep-5{
	margin-left:-30px;
	width:1050px
	}
.flowstep .flowstep-5 li{
	width:210px
	}
.flowstep .flowstep-4{
	margin-left:-63px;
	width:1120px
	}
.flowstep .flowstep-4 li{
	width:280px
	}

同时需要拷贝下图到项目中，图片