`

简单HTML流程状态条

    博客分类:
  • html
阅读更多

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>

 

  • 大小: 10 KB
分享到:
评论
6 楼 antlove 2013-08-26  
jiluo093 写道

不知兄台是哪位高人?
5 楼 antlove 2013-08-26  
lijiejava 写道
通才!好!!!  
谢谢啊》
4 楼 jiluo093 2013-08-25  
3 楼 jiluo093 2013-08-24  
2 楼 jiluo093 2013-08-24  
1 楼 lijiejava 2013-08-23  
通才!好!!!  

相关推荐

    纯HTML流程步骤条

    纯HTML流程步骤条是不依赖于JavaScript或者CSS框架,仅使用HTML标记语言实现的一种简单但实用的步骤条。下面将详细阐述如何创建一个纯HTML流程步骤条,以及其相关知识点。 首先,我们要理解HTML的基本结构。HTML...

    流程进度条(css+div+image)

    在网页设计中,流程进度条是一种非常常见的交互元素,它能清晰地向用户展示任务或流程的完成状态。本教程将详细介绍如何利用CSS(层叠样式表)和HTML中的div元素来实现一个流程进度条的展示。我们将探讨相关的设计...

    在线绘制工作流程图(HTML)

    2. Mermaid:这是一个轻量级的解决方案,通过简单的Markdown-like语法就能生成流程图,非常适合快速原型设计。 3. bpmn.io:专门针对BPMN(业务流程模型与表示法)标准的库,用于绘制和交互业务流程图。 四、工作...

    jQuery+css 流程图插件

    "jQuery+css 实现的单分支流程图插件"是一个利用JavaScript库jQuery和CSS样式来创建简单、动态流程图的解决方案。这种插件特别适合那些希望快速实现流程展示,而无需深入了解复杂图表库的开发者。 **jQuery库的运用...

    html5在线可视化流程图简易绘图工具代码

    7. **绘图API**:开发一个这样的工具,还需要设计一套绘图API,使得用户可以通过简单的调用来创建和修改流程图。这包括选择图形样式、设置属性、以及建立图形之间的关系等功能。 8. **响应式设计**:为了适应不同...

    简单的h5 canvas 绘制流程图.zip

    对于动态流程图,可以通过定时器或事件监听来更新图形,例如改变节点状态或添加新的步骤。 7. **交互性** 可以通过监听Canvas的`click`、`mousemove`等事件,实现对流程图的点击响应,例如高亮选中的节点或显示...

    js流程可视化设计myflow

    4. **分支与节点状态**:myflow.js支持流程图中的分支逻辑,可以设置不同节点的状态,以表示流程中的条件判断和分支路径。这使得流程图能够更准确地反映复杂的工作流程。 5. **工作流程图表样式**:myflow.js提供了...

    js生成流程图

    无论是简单的流程展示还是复杂的业务逻辑表示,JavaScript都能提供足够强大的工具来满足需求。在实际应用中,可以根据项目需求选择适合的绘图库,结合自己的创造力和编程技巧,构建出符合业务场景的流程图。

    workflow流程图制作软件

    5. PlantUML:代码驱动的工具,适合程序员,可通过简单的文本描述生成流程图。 五、使用技巧 1. 保持简洁:避免过度复杂,确保流程图易于理解。 2. 标注清晰:为每个形状添加文字说明,解释其代表的活动或状态。 3....

    JQ 插件简单实用步骤条

    "JQ插件简单实用步骤条"是一个利用jQuery来创建的用户界面组件,主要用于指导用户按照一系列步骤完成任务,常见于表单提交、注册流程或者多步骤购物体验等场景。这个插件为开发者提供了一个方便、直观的方式来展示和...

    web流程图动态绘制-使用raphael

    Raphael.js是一个强大的JavaScript库,专用于在浏览器中创建SVG(可缩放矢量图形)和VML(Vector Markup Language)图形,使得在网页上绘制流程图变得简单易行。本篇文章将深入探讨如何利用Raphael库来实现动态流程...

    网页课程设计&毕业设计_简单宽屏线条博客html5 css模板5400.zip

    这里提供的“简单宽屏线条博客html5 css模板5400.zip”是一个用于教学或个人项目开发的资源,包含了一套基于HTML5和CSS的博客模板。 HTML5是现代网页开发的标准,它增强了网页的交互性和多媒体支持,例如通过`...

    一个轻量级的 JavaScript 库,可用于快速创建流程图.zip

    6. 数据序列化和反序列化:将流程图的状态保存到JSON格式,方便数据持久化或在不同设备间同步。 为了开始使用Flowy,你需要在HTML文件中引入库的JavaScript文件,然后根据文档或示例代码进行初始化和操作。如果你对...

    开源的HTML5 Canvas画图插件 - Literally Canvas

    用户可以通过鼠标进行绘画,同时,所有的绘图操作都会实时保存在Canvas元素的绘图状态中。 Literally Canvas还提供了丰富的API接口,用于获取和修改画布上的内容。例如,你可以通过`lc.getImage()`获取当前画布的...

    logicflow+vue流程可视化开箱即用demo模板

    这个模板提供了直观的界面和基本的交互,使得流程图的创建、编辑和展示变得简单易行。 Vue.js是一个流行的前端JavaScript框架,以其组件化、轻量级和高可维护性而闻名。在本模板中,Vue.js被用作基础架构,负责处理...

    html5 canvas实现简单的超级马里奥游戏功能源码.zip

    通过阅读和分析这个文件,开发者可以学习到HTML5 Canvas的实践应用,了解游戏开发的基本流程和技巧,为自己的项目提供参考和灵感。不过,由于没有具体文件内容,以上分析基于对HTML5 Canvas游戏开发的一般性理解。

    纯CSS3商品订单步骤流程代码.zip

    在这个案例中,jQuery可能被用来监听用户在步骤流程中的交互,比如点击下一步按钮时,更新当前步骤的状态,或者验证表单数据。同时,也可能利用`.animate()`函数创建动画效果,提高用户体验。 4. JavaScript: ...

    html5 canvas躲避类的线条小游戏代码

    标签中的“canvas”和“小游戏”表明这是一个简单的互动体验,适合初学者学习Canvas API和基本的游戏开发概念。 在提供的压缩文件`texiao3717_1560680941`中,可能包含了HTML、CSS和JavaScript文件,分别用于构建...

    用HTML5写的五子棋游戏

    在这个五子棋游戏中,JavaScript负责处理用户输入、判断棋局状态(如是否有五子连珠)以及游戏流程的控制(如轮到哪位玩家下棋)。JavaScript的事件监听机制使得程序能实时响应用户的鼠标点击,判断点击位置是否为...

Global site tag (gtag.js) - Google Analytics