今天小编跟大家讲解下有关CSS实现类似条状统计表效果的方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现类似条状统计表效果的方法 的相关资料，希望小伙伴们看了有所帮助。
本文实例讲述了CSS实现类似条状统计表效果的方法。分享给大家供大家参考。具体实现方法如下：
复制代码代码如下:<!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 http-equiv="Content-Type"content="text/html; charset=utf-8"/><style>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%;}</style></head><body><dl><dt>主流浏览器用户数(%) - July 2009</dt><dd class="p670"><b>IE6 = 21% </b></dd><dd class="p67"><b>IE7 = 52% </b></dd><dd class="p12"><b>Opera = 3.2% </b></dd><dd class="p197"><b>Firefox = 16.7% </b></dd><dd class="p26"><b>Mozilla = 6.3% </b></dd><dd class="p08"><b>NN7 = 1.2% </b></dd></dl><div>AIDIhttps:///</div></body></html>
希望本文所述对大家的css+div网页设计有所帮助。
来源：爱蒂网
