Html
    Css
    Js

    
                        
* {
	padding:0;
	margin:0;
}
li {
	list-style:none;
}
.jiantou_box {
	text-align:center;
	position:relative;
	top:77px;
	overflow:hidden;
}
.jiantou_box ul {
	font-size:0;
}
.jiantou_box li {
	display:inline-block;
	font-size:16px;
}
.title_top {
	width:139px;
	height:51px;
	border:1px solid #666666;
	line-height:51px;
	display:inline-block;
	background-image:url(http://www.jq22.com/img/cs/500x300-2.png);
	text-align:center;
	cursor:pointer;
}
.title_top:hover {
	color:red;
}
/*流程内容部分*/
.jiantou_cont {
	width:800px;
	height:300px;
	border:1px solid green;
	margin:20px auto 0;
}
.disabled {
	pointer-events:none;
	/*鼠标禁止点击*/
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

流程进度显示

以上代码适用于需要展示某个事件流程以及其流程的详细内容,其中的数据只是假的数据,表示该流程前面四步已经完成,因为图片原因,这里只有三种图片样式,实际中,如果需要表示流程过程,建议使用箭头图片,更能体现流程

0