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