Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.