进度展示图

对应样式：

.tab_flow_step{ background-color: #E6E6E6; margin-bottom: 10px; }

.tab_flow_step td{ border: 0px solid #d9d9d9; height: 32px !important; font-weight: bold; background-repeat:no-repeat; text-align: center;

　　line-height: 32px !important; font-size:14px; padding-right: 20px; }

.status_past{ background-position:right -0px; background-color: #CEE2FF;

　　background-image: url("${pageContext.request.contextPath}/images/bg_flow_step_32.png"); }

.status_past_last{ background-position:right -32px; background-color: #CEE2FF;

　　background-image: url("${pageContext.request.contextPath}/images/bg_flow_step_32.png"); }

.status_current{ color: white; background-position:right -64px; background-color: #3164AF;

　　background-image: url("${pageContext.request.contextPath}/images/bg_flow_step_32.png"); }

.status_future{ background-position:right -64px;

　　background-image: url("${pageContext.request.contextPath}/images/bg_flow_step_32.png"); background-color: #E6E6E6; }

.status_last{ background-image: none; } 

 

<table class="tab_flow_step" width="96%" align="center">   

　　<td class="status_past_last">新增</td>   

　　<td class="status_current">待编辑审核</td>   

　　<td class="status_future">待广电审核</td>   

　　<td class="status_future">待上架</td>   

　　<td class="status_future">已上架</td>   

　　<td class="status_future">待下架</td>   

　　<td class="status_future status_last">已下架</td>

</table>

 

资源图片：