Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title>css progress bar Chart </title> <met A content= "CSS progress bar, CSS histogram" name= "Gudao"/> <style type= "Text/css" >/* General */#content h3 {Marg In:2em 0 5em 0; #content {font-family: Microsoft James Black;} . clear{clear:both;height:1px; margin-top:-1px; * * * Simple progress bar/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 are necessary because IE doesn ' t want to fol Low the rules for overflow:Visible * * * Complex progress bar/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}//* Here is 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; }/* Column chart */#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> </pead> <body> <div id= "Content" > <p> simple progress bar </p> <div class= "graph" > & Lt;strong class= "Bar" ><span>54%</span></strong> </div> <div class= "graph" > <strong class= "Bar" ><span>8%</span></strong> </div> <p> Complex progress bar &L t;/h3> <dl> <dt> Favorite Blog Park </dt> <dd> <div ><strong>25%</stro Ng></div> </dd> <dt> very much like </dt> <dd> <div ><strong>55% </strong></div> </dd> <dt> Super like </dt> <dd> <div ><str ong>75%</strong></div> </dd> </dl> <div class= "Clear" ></div> <p> Columnar chart </p> <div id= "Vertgraph" > <ul> <li class= "Critical" >2 2</li> <Li class= "high" >7</li> <li class= "Medium" >3</li> <li class= "Low" >8</LI&G T <li class= "Info" >2</li> </ul> </div> <div class= "Clear" ></div> </div> </body> </ptml>
Tip: You can modify some of the code before running
