提示：您可以先修改部分代碼再運行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>CSS進度條柱狀圖</title> <meta content="CSS進度條,css柱狀圖" name="gudao"/> <style type="text/css">/* General */#content h3 { margin: 2em 0 .5em 0; }#content{font-family:微軟雅黑;}.clear{clear:both;height:1px; margin-top:-1px;}/* 簡單進度條 */.graph { position: relative; width: 200px; border: 1px solid #B1D632; padding: 2px; margin-bottom: .5em;}.graph .bar { display: block;position: relative;background: #B1D632; text-align: center; color: #333; height: 2em; line-height: 2em;}.graph .bar span { position: absolute; left: 1em; } /* This extra markup is necessary because IE doesn't want to follow the rules for overflow: visible */ /* 複雜進度條 */dl { margin: 0; padding: 0; }dt { position: relative;clear: both;display: block; float: left; width: 104px; height: 20px; line-height: 20px;margin-right: 17px; font-size: .75em; text-align: right; }dd { position: relative; display: block; float: left; width: 197px; height: 20px; margin: 0 0 15px; background: url("g_colorbar.jpg"); }* html dd { float: none; } /*此處為 IE hack */dd div { position: relative; background: url("g_colorbar2.jpg"); height: 20px; width: 75%; text-align:right; }dd div strong { position: absolute; right: -5px; top: -2px; display: block; background: url("g_marker.gif"); height: 24px; width: 9px; text-align: left;text-indent: -9999px; overflow: hidden;}/*柱狀圖 */#vertgraph { width: 378px; height: 207px; position: relative; background: url("g_backbar.gif") no-repeat; }#vertgraph ul { width: 378px; height: 207px; margin: 0; padding: 0; }#vertgraph ul li { position: absolute; width: 28px; height: 160px; bottom: 34px; padding: 0; margin: 0; background: url("g_colorbar3.jpg") no-repeat;text-align: center; font-weight: bold; color: white; line-height: 2.5em;}#vertgraph li.critical { left: 24px; background-position: 0px bottom; }#vertgraph li.high { left: 101px; background-position: -28px bottom; }#vertgraph li.medium { left: 176px; background-position: -56px bottom; }#vertgraph li.low { left: 251px; background-position: -84px bottom; }#vertgraph li.info { left: 327px; background-position: -112px bottom; }</style></head><body><div id="content"><h3>簡單進度條</h3><div class="graph"><strong class="bar" ><span>54%</span></strong></div><div class="graph"><strong class="bar" ><span>8%</span></strong></div><h3>複雜進度條</h3><dl><dt>喜歡部落格園</dt><dd><div ><strong>25%</strong></div></dd><dt>很喜歡</dt><dd><div ><strong>55%</strong></div></dd><dt>超級喜歡</dt><dd><div ><strong>75%</strong></div></dd></dl><div class="clear"></div><h3>柱狀圖</h3><div id="vertgraph"><ul><li class="critical" >22</li><li class="high" >7</li><li class="medium" >3</li><li class="low" >8</li><li class="info" >2</li></ul></div><div class="clear"></div></div></body></html>
提示：您可以先修改部分代碼再運行
