純css制作的漂亮好看的進度條

2024-07-11 08:26:38

字體：大中小

來源：轉載

供稿：網(wǎng)友

效果
50%
兼容
IE6/7/8
Chrome 4
Firefox 3.5 等等
更多效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title> new document </title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"   /><style>.process-bar{width:100px;display:inline-block;*zoom:1;}.pb-wrapper{border:1px solid gray;border-style:solid none;position:relative;background:#cfd0d2;}.pb-container{border:1px solid gray;border-style:none solid;height:12px;position:relative;left:-1px;margin-right:-2px;font:1px/0 arial;padding:1px;}.pb-highlight{position:absolute;left:0;top:0;_top:1px;width:100%;opacity:0.6;filter:alpha(opacity=60);height:6px;background:white;font-size:1px;line-height:0;z-index:1}.pb-text{width:100%;position:absolute;left:0;top:0;text-align:center;font:10px/12px arial;}.pb-value{height:100%;width:50%;background:#19d73d;}.pb-text{color:black;font:10px/12px arial}/* -- 以下是重寫的皮膚 -- *//* green */.skin-green .pb-wrapper{border-color:#666;border-top-color:#628c2d;}.skin-green .pb-container{border-color:#666;border-left-color:#628c2d;}.skin-green .pb-text{ color:black }/* blue */.skin-blue .pb-wrapper{border-color:#0e7c78;border-top-color:#41beb9;}.skin-blue .pb-container{border-color:#0e7c78;border-left-color:#41beb9;}.skin-blue .pb-text{color:white}.skin-blue .pb-value{background:#159b96;}/* red */.skin-red .pb-wrapper{border-color:#8e1411;border-top-color:#cb3d3a;}.skin-red .pb-container{border-color:#8e1411;border-left-color:#cb3d3a;}.skin-red .pb-text{color:#470200;}.skin-red .pb-value{background:#d70500}/* orange */.skin-orange .pb-wrapper,.skin-orange .pb-container{border-color:#d55110;}.skin-orange .pb-text{color:#250f00;}.skin-orange .pb-value{background:#d75a00;}/* purple */.skin-purple .pb-wrapper,.skin-purple .pb-container{border-color:#a90561;}.skin-purple .pb-text{color:#720040;}.skin-purple .pb-value{background:#9d118e}/* black */.skin-black .pb-wrapper,.skin-black .pb-container{border-color:black}.skin-black .pb-text{color:gray;}.skin-black .pb-value{background:#111111;}/* 分割線樣式 */.hua-li-de-fen-ge-xian{border-bottom:2px dashed #eee;height:1px;font-size:1px;margin:5px 0}</style></head><body>     <div class="process-bar skin-green">     <div class="pb-wrapper">     <div class="pb-highlight"></div>     <div class="pb-container">     <div class="pb-text">10%</div>     <div class="pb-value"></div>     </div>     </div>     </div>     <div class="hua-li-de-fen-ge-xian"></div>     <div class="process-bar skin-blue">     <div class="pb-wrapper">     <div class="pb-highlight"></div>     <div class="pb-container">     <div class="pb-text">100%</div>     <div class="pb-value" style="width:100%"></div>     </div>     </div>     </div>     <div class="hua-li-de-fen-ge-xian"></div>     <div class="process-bar skin-red">     <div class="pb-wrapper">     <div class="pb-highlight"></div>     <div class="pb-container">     <div class="pb-text">18%</div>     <div class="pb-value" style="width:18%"></div>     </div>     </div>     </div>     <div class="hua-li-de-fen-ge-xian"></div>     <div class="process-bar skin-orange">     <div class="pb-wrapper">     <div class="pb-highlight"></div>     <div class="pb-container">     <div class="pb-text">55%</div>     <div class="pb-value" style="width:55%"></div>     </div>     </div>     </div>     <div class="hua-li-de-fen-ge-xian"></div>     <div class="process-bar skin-purple">     <div class="pb-wrapper">     <div class="pb-highlight"></div>     <div class="pb-container">     <div class="pb-text">32%</div>     <div class="pb-value" style="width:32%"></div>     </div>     </div>     </div>     <div class="hua-li-de-fen-ge-xian"></div>     <div class="process-bar skin-black">     <div class="pb-wrapper">     <div class="pb-highlight"></div>     <div class="pb-container">     <div class="pb-text">78%</div>     <div class="pb-value" style="width:78%"></div>     </div>     </div>     </div></body></html>

上一篇：IE6 select z-index無效，遮擋div bug的解決方法

下一篇：讓Firefox未載入圖片顯示邊框

發(fā)表評論

共有條評論