当前位置:首页 > 开发 > Web前端 > HTML > 正文

简单HTML流程状态条

发表于: 2013-08-23   作者:antlove   来源:转载   浏览:
摘要: 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="

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流程状态条

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号