HTML CSS JavaScript前端开发流程示例-CSDN博客

本文链接：https://blog.csdn.net/iteye_5753/article/details/82536449

processtab.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 首tab高亮  */
.first_step_on{
	height: 35px;
 	background-image: url(processtab.png);
  	display: inline-block;  
  	width: 330px;
  	line-height: 35px;
  	
  	color: white;
	font-weight: bold;
	text-indent:20px;
}
/* 首tab不亮  */
.first_step_off{
	height: 35px;
 	background-image: url(processtab.png);
 	background-position: 0 -70px;
  	display: inline-block;  
  	width: 330px;
  	line-height: 35px;
  	
  	color:#9B9696;
  	font-weight: bold;
  	text-indent:20px;
}
/* 中间tab高亮  */
.step_on{
	height: 35px;
	background-image: url(processtab.png);
	background-position: -326px -35px;
	display: inline-block;
	width: 334px;
	line-height: 35px;
	margin-left: -8px;
	
	color: white;
	font-weight: bold;
	text-indent:20px;
}
/* 中间tab不亮  */
.step_off{
	height: 35px;
	background-image: url(processtab.png);
	background-position: -330px 0;
	display: inline-block;
	width: 330px;
	line-height: 35px;
	margin-left: -4px;
	
	color:#9B9696;
  	font-weight: bold;
  	text-indent:20px;
}
/* 末tab高亮  */
.end_step_on{
	height: 35px;
	background-image: url(processtab.png);
	background-position: -656px -70px;
	display: inline-block;
	width: 334px;
	line-height: 35px;
	margin-left: -8px;
	
	color: white;
	font-weight: bold;
	text-indent:20px;
}
/* 末tab不亮  */
.end_step_off{
	height: 35px;
	background-image: url(processtab.png);
	background-position: -660px 0;
	display: inline-block;
	width: 330px;
	line-height: 35px;
	margin-left: -4px;
	color:#9B9696;
  	font-weight: bold;
  	text-indent:20px;
}
</style>
</head>
<body>
	<div>step1</div>
	<div class="first_step_on">1.填写账户信息</div>
	<div class="step_off">2.验证账户信息</div>
	<div class="end_step_off">3.注册成功</div>
	
	<div>step2</div>
	<div class="first_step_off">1.填写账户信息</div>
	<div class="step_on">2.验证账户信息</div>
	<div class="end_step_off">3.注册成功</div>
	
	<div>step3</div>
	<div class="first_step_off">1.填写账户信息</div>
	<div class="step_off">2.验证账户信息</div>
	<div class="end_step_on">3.注册成功</div>
</body>
</html>

简单HTML流程状态条