<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;
}