* {
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;
/*鼠标禁止点击*/
}
以上代码适用于需要展示某个事件流程以及其流程的详细内容,其中的数据只是假的数据,表示该流程前面四步已经完成,因为图片原因,这里只有三种图片样式,实际中,如果需要表示流程过程,建议使用箭头图片,更能体现流程