How to achieve the effect of similar bar statistical tables with CSS
Editor to share with you how CSS to achieve similar bar statistical table effect, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
The specific implementation methods are as follows:
The code is as follows:
The effect of designing similar bar statistical tables with CSS
Dl {
Margin:0
Padding:0 0 15px 0
Width:401px
Height:auto
Background:#fff url (bar.gif) bottom left no-repeat
}
Dt {
Text-align:center
Font-size:12px
Border-bottom:3px solid # fff
}
Dd {
Margin:0
Display:block
Width:400px
Height:2em
Background:#0a0
Border-bottom:1px solid # fff
Font-size:12px
}
Dd b {
Float:right
Display:block
Margin-left:auto
Background:#cec
Height:2em
Line-height:2em
Text-align:right
Font-size:12px
}
Dd.p670 b {width:33%;}
Dd.p67 b {width:93.3%;}
Dd.p12 b {width:98.8%;}
Dd.p197 b {width:80.3%;}
Dd.p26 b {width:97.3%;}
Dd.p08 b {width:99.2%;}
Number of mainstream browser users (%)-July 2009
IE6 = 21%
IE7 = 52%
Opera = 3.2%
Firefox = 16.7%
Mozilla = 6.3%
NN7 = 1.2%
Script House http://www.jb51.net/
The above is all the content of this article "how to achieve similar bar statistical table effect in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
