CSS代码实现百分比柱状图

2020-01-27 14:20:39

字体：大中小

来源：转载

供稿：网友

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" lang="gb2312" xml:lang="gb2312"><head><title>CSS百分比图</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>dl { margin:0; padding:0 0 15px 0; width:401px; height:auto; background:#fff url(/jscss/demoimg/200904/bar3.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>Browser usage (%) - July 2005</dt><dd class="p670">IE.6 = 67% </dd><dd class="p67">IE.5 = 6.7% </dd><dd class="p12">Opera = 1.2% </dd><dd class="p197">Firefox = 19.7% </dd><dd class="p26">Mozilla = 2.6% </dd><dd class="p08">NN7 = 0.8% </dd></dl></body></html>

上一篇：CSS滤镜给字体加阴影、模糊、透明的方法

下一篇：CSS生成图表和曲线，包括圆形百分比