CSS bar chart implementation is actually very simple

 

Siente is the United States here mentioned the CSS bar chart implementation method: http://www.cnblogs.com/rubylouvre/archive/2009/08/08/1541914.html

The implementation here is not that complicated. Please referCode

Code
<! Doctype html >
< Head >
< Style >
Ul. Chart { Padding : 0 ; Margin : 0 ; List-style : None ; Border : 1px # CCC solid ; Height : 255px ; Font-size : 9pt ; Background : # Ddf3ff }
Ul. Chart P { Padding : 0 ; Margin : 0 }
Ul. Chart. Title { Text-align : Center ; Height : 25px ; Line-height : 25px ; }
Ul. Chart Li { Width : 80px ; Float : Left ; Padding : 0 ; }
Ul. Chart Li: hover { Background : # F7f7f7 ; }
Ul. Chart. Total { Height : 230px ; Position : Relative ; }
Ul. Chart. percent { Background : # F0f ; Width : 20px ; Position : Absolute ; Left : 25px ; Bottom : 0 ; }
</ Style >
</ Head >
< Body >
< Ul Class = Chart >
< Li > < P Class = Title > Final Fantasy </ P > < Div Class = Total > < P Class = Percent Style = "Height: 50% ;" > 50% </ P > </ Div > </ Li >
< Li > < P Class = Title > Sea of stars </ P > < Div Class = Total > < P Class = Percent Style = "Height: 10% ;" > 10% </ P > </ Div > </ Li >
< Li > < P Class = Title > White Knight </ P > < Div Class = Total > < P Class = Percent Style = "Height: 70% ;" > 70% </ P > </ Div > </ Li >
</ Ul >
</ Body >