免费模板网
当前位置: 新濠天地网上娱乐场官方网站>CSS图表> 纯CSS代码实现动态水平图表

CSS图表

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

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

演示效果截图

本文地址:http://www.lanzuda.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.lanzuda.com/023">www.865171.cn</a></p>

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

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

站长常用工具

最新图表

热门图表

赞助商链接

线上新濠天地娱乐场官方网站 澳门银河网上娱乐官方网站 银河娱乐官方网站 线上新葡京娱乐场官方网站
澳门永利线上娱乐官方网站 葡京国际娱乐官方网站 澳门葡京娱乐官方网站 澳门银河国际娱乐官方网站
线上新濠天地娱乐场官方网站 葡京棋牌官方网站 葡京网上娱乐场官方网站 葡京棋牌官方网站
澳门葡京国际娱乐官方网站 威尼斯人网上娱乐官方网站 澳门新濠天地网上娱乐官方网站 澳门威尼斯人线上娱乐官方网站