当前位置:首页 > 开发 > 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

    震惊

    震惊

编辑推荐
最近做了个简单的flex版本的jBPM流程状态显示,效果图如下 想拿来卖点钱帮助一些人,这个程序可扩展
主动建立TCP链接情况: 被动建立TCP链接情况 主动断开链接的情况 被动断开连接的情况 在TIME_WAIT阶
最经看了一些关于https的东西,比较乱,现在做个总结(不一定正确,而且很多细节没挖掘,只是目前的
这是我们(东方易维)工作流产品设计过程中采取的设计: 一、流程实例的状态 状态分为5种:实例化、
这是我们(东方易维)工作流产品设计过程中采取的设计: 一、流程实例的状态 状态分为 5种:实例化
曾经做过一个结算系统,对于一段期间内完成的订单做金额费用的结算,根据订单的金额付款,并计算出
曾经做过一个结算系统,对于一段期间内完成的订单做金额费用的结算,根据订单的金额付款,并计算出
最近发现一个Vim插件可以美化状态条到极致。 该插件叫powerline。它重新定义了Unicode中保留给应用
当Web容器收到客户端的请求时,便会根据Web。xml文件中的相关配置信息找到相应的处理 servlet。一般
环境说明和准备 -------------------------------------------------- 所需软件: JDK-1.6.0.32 HADO
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号