SwfUpload 进度条结构

最新推荐文章于 2021-06-05 13:18:24 发布

BOY

最新推荐文章于 2021-06-05 13:18:24 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： SwfUpload 文章标签： class stylesheet border div url c

本文链接：https://blog.youkuaiyun.com/jiang_bing/article/details/7032268

SwfUpload 专栏收录该内容

4 篇文章

订阅专栏

本文解析了一个具体的文件上传进度条HTML结构与CSS样式，并详细介绍了各个部分的作用及样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<link href="../css/default.css" rel="stylesheet" type="text/css" />
<div class="progressWrapper" id="SWFUpload_0_1" style="opacity: 1;">
<div class="progressContainer green">
<a class="progressCancel" href="#" style="visibility: visible;"> </a>
<div class="progressName">
[欧美][动作][洛杉矶之战][高清RMVB][1280×720][中英双字幕].RMVB
</div>
<div class="progressBarStatus">Uploading...</div>
<div style="border:1px solid">
<div class="progressBarInProgress" style="width: 50%;"></div>
</div>
</div>
</div>
进度条结构:
<div id=progresscontainer>
	     	<div id="progressCancel">
      	<div id=progressName>
       	<div id = progressBarStatus>
   	    	<div id = progressBarInProgress>
</div>
 
 
CSS样式：
.progressWrapper {
 width: 357px;
 overflow: hidden;
}
.progressContainer {
 margin: 5px;
 padding: 4px;
 border: solid 1px #E8E8E8;
 background-color: #F7F7F7;
 overflow: hidden;
}
.progressName {
 font-size: 8pt;
 font-weight: 700;
 color: #555;
 width: 323px;
 height: 14px;
 text-align: left;
 white-space: nowrap;
 overflow: hidden;
}
.progressBarInProgress,
.progressBarComplete,
.progressBarError {
 font-size: 0;
 width: 0%;
 height: 10px;
 background-color:#0C0;
 margin-top: 2px;
}
.progressBarComplete {
 width: 100%;
 background-color: green;
 visibility: hidden;
}
.progressBarError {
 width: 100%;
 background-color: red;
 visibility: hidden;
}
.progressBarStatus {
 margin-top: 2px;
 width: 337px;
 font-size: 7pt;
 font-family: Arial;
 text-align: left;
 white-space: nowrap;
}
a.progressCancel {
 font-size: 0;
 display: block;
 height: 14px;
 width: 14px;
 background-image: url(../images/cancelbutton.gif);
 background-repeat: no-repeat;
 background-position: -14px 0px;
 float: right;
}
a.progressCancel:hover {
 background-position: 0px 0px;
}