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

2024-07-11 08:39:55

字體：大中小

來源：轉載

供稿：網(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 </div> </div> <div id="iwvjtn8m0" class=page1> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1343292.html'>設置鏈接顏色的偽類選擇符的順序為LVHA</a></div> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1343294.html'>用CSS讓img input select button 圖片,文本框,下拉菜單,按扭垂直居中的</a></div> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="iwvjtn8m0" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒什么話要說嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td>發(fā)表評論</td> <td align="right"><a href="/e/pl/?classid=215&id=1343293">共有<script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1343293&down=2"></script>條評論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發(fā)表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

學習交流