演示效果截图

用到的图片

CSS代码

<style>
body {
margin:0;
padding:40px;
background:#fff;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;}
h1{
font-size:180%;
font-weight:normal;
color:#555;}
dl, dt, dd{margin:0;padding:0;}
dd{
width:216px;
height:41px;
background:url(bg_bar.gif) no-repeat 0 0;
position:relative;}
dd span{
position:absolute;
display:block;
width:200px;
height:25px;
background:url(bar.gif) no-repeat 0 0;
top:8px;
left:8px;
overflow:hidden;
text-indent:-8000px;}
dd em{
position:absolute;
display:block;
width:200px;
height:25px;
background:url(bg_cover.gif) repeat-x;
top:0;}
.progressBar{
width:216px;
height:41px;
background:url(bg_bar.gif) no-repeat 0 0;
position:relative;}
.progressBar span{
position:absolute;
display:block;
width:200px;
height:25px;
background:url(bar.gif) no-repeat 0 0;
top:8px;
left:8px;
overflow:hidden;
text-indent:-8000px;}
.progressBar em{
position:absolute;
display:block;
width:200px;
height:25px;
background:url(bg_cover.gif) repeat-x 0 0;
top:0;}
</style>

HTML代码

<h1>纯CSS代实现动态水平图表</h1>
<h2>www.865171.cn</h2>
<dl>
<dt>Ability to Annoy People</dt>
<dd>
<span><em style="left:160px">80%</em></span>
</dd>
<dt>Food Shortage Tolerance</dt>
<dd>
<span><em style="left:20px">10%</em></span>
</dd>	
<dt>Karaoke Singing Skills</dt>
<dd>
<span><em style="left:100px">50%</em></span>
</dd>				
</dl>
<p>Instead of list you can use any 
block level element.</p> 	
<p class="progressBar">
<span><em style="left:50px">25%</em></span>
</p>
<p><a href="http://www.865171.cn">www.865171.cn</a></p>