CSS实现百分比柱效果图

   CSS代码实现百分比柱状图,很实用的CSS功能,这里主要是用CSS控制平铺的背景,达到柱状显示的功能,你可以试着更改这些参数,看有什么美妙的变化。

CSS实现百分比柱效果图_第1张图片


<!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百分比图 JS代码 小猪站长学院</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(http://www.codefans.net/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"><b>IE.6 = 67% </b></dd>
    <dd class="p67"><b>IE.5 = 6.7% </b></dd>
    <dd class="p12"><b>Opera = 1.2% </b></dd>
    <dd class="p197"><b>Firefox = 19.7% </b></dd>
    <dd class="p26"><b>Mozilla = 2.6% </b></dd>
    <dd class="p08"><b>NN7 = 0.8% </b></dd>
    </dl>
    <p>小猪站长学院致力于网页标准的传播,提供DIV CSS XHTML等学习教材,标准化的网页代码</p>
    <p>符合W3C标准的网页设计,提供建站资源,设计字体等资源下载的综合性站长学习平台</p>
    <p>你所下载的代码来自<a href="http://www.pigzz.com" _fcksavedurl="http://www.pigzz.com">
    小猪站长学院</a> ,欢迎下载
    使用</p>
    </body>
    </html>

你可能感兴趣的:(html,xml,XHTML,css,Class,float)