免费模板网
当前位置: 澳门永利官方网站>CSS图表> 纯CSS代码实现动态水平图表

CSS图表

纯CSS代码实现动态水平图表

分类:CSS图表 时间:2009/7/11 12:11:13 浏览:17087 次

演示效果截图

本文地址:http://www.5hawgs.com/css-chart/detail-6371.aspx
文章摘要: 纯CSS代码实现动态水平图表 ,澳门新濠天地官网澳门大三巴官方网站澳门银河官方网站,澳门美高梅官网澳门黄金城官方网站澳门大三巴官网。

纯CSS代码实现动态水平图表

用到的图片




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.5hawgs.com/342">www.865171.cn</a></p>
友荐云推荐

上一篇:CSS代码实现的电子图表,似电火花

下一篇:超简单水平CSS图表

站长常用工具

最新图表

热门图表

赞助商链接