进度条样式-优快云博客

本文链接：https://blog.youkuaiyun.com/line_aijava/article/details/6399149

<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>进度条</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .prog{ width: 100%; height: 20px; padding: 0px; margin: 0px; } .prog .text{ padding: 3px 0px 0px 5px; position:absolute; float:left; z-index:10 } .prog .pct{ position:relative; z-index:5; height:20px; background-color:#EBEBEB; border-right:white solid 1px; float: left; } .prog .pct2{ z-index:5; height:20px; background-color:#7EC0EE; border-right:white solid 1px; float:left; } </style> </head> <body> <table width="60%"> <tr> <td width="20%">进度条：</td> <td width="80%"> <div> <div class="prog"> <div class="pct" style="width:15%"><div class="text">正跟进</div></div> <div class="pct" style="width:15%"><div class="text">下订单</div></div> <div class="pct2" style="width:15%"><div class="text">合同</div></div> <div class="pct" style="width:15%"><div class="text">收合同</div></div> <div class="pct" style="width:15%"><div class="text">交款中</div></div> <div class="pct" style="width:15%"><div class="text">新开户</div></div> </div> </div> </td> </tr> </table> </body> </html>

JS进度条。最原始