免费模板网
当前位置: 首页>CSS图表> 三张图片组合成的水平柱状CSS图表

CSS图表

三张图片组合成的水平柱状CSS图表

分类:CSS图表 时间:2009/6/24 12:35:55 浏览:5884 次

演示效果截图

 三张图片组合成的水平柱状CSS图表

用到的图片

 

CSS代码

<style type="text/css">			
/* Complex Bar Graph */
dl { margin: 0;padding: 0;}
dt { 
position: relative; /* IE is dumb */
clear: both;
display: block; 
float: left; 
width: 104px; 
height: 20px; 
line-height: 20px;
margin-right: 17px;              
font-size: .75em; 
text-align: right;}
dd { 
position: relative; /* IE is dumb */
display: block; 				
float: left;	 
width: 197px; 
height: 20px; 
margin: 0 0 15px; 
background: url("g_colorbar.jpg");}
* html dd { float: none; } 
/* IE is dumb; Quick IE hack, apply favorite 
filter methods for wider browser compatibility */
dd div { 
position: relative; 
background: url("g_colorbar2.jpg"); 
height: 20px; 
width: 75%; 
text-align:right;}
dd div strong { 
position: absolute; 
right: -5px; 
top: -2px; 
display: block; 
background: url("g_marker.gif"); 
height: 24px; 
width: 9px; 
text-align: left;
text-indent: -9999px; 
overflow: hidden;}
</style>

HTML代码

<h3>www.865171.cn</h3>
<dl>
	<dt>Love Life</dt>
	<dd>
		<div style="width:25%;"><strong>25%</strong></div>
	</dd>
	<dt>Education</dt>
	<dd>
		<div style="width:55%;"><strong>55%</strong></div>
	</dd>
	<dt>War Craft 3 Rank</dt>
	<dd>
		<div style="width:75%;"><strong>75%</strong></div>
	</dd>
</dl>

上一篇:DL、DT、DD+CSS实现橙色水平统计图表

下一篇:DIV、UL、LI+CSS制作实用垂直柱状图表

站长常用工具

最新图表

热门图表

赞助商链接