JS进度条。最原始

最新推荐文章于 2025-08-22 12:18:08 发布

原创最新推荐文章于 2025-08-22 12:18:08 发布 · 820 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #div #html #float #table #java

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文展示了一个使用HTML和CSS实现的进度条示例，该进度条分为多个阶段，每个阶段有不同的颜色和状态标识。

<%@ 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>