免费模板网
当前位置: 新濠天地网上娱乐场官方网站>CSS图表> DIV、UL、LI+CSS制作实用垂直柱状图表

CSS图表

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

分类:CSS图表 时间:2009/6/24 12:41:21 浏览:11455 次

演示效果截图

本文地址:http://www.lanzuda.com/css-chart/detail-6307.aspx
文章摘要: DIV、UL、LI+CSS制作实用垂直柱状图表 ,美高梅娱乐场网址官方网站银河线上娱乐官方网站美高梅网上娱乐场官方网站,澳门葡京国际官方网站新濠天地网上娱乐官方网站新葡京国际娱乐官方网站。

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

用到的图片

 

CSS代码

<style type="text/css">
/* Vertical Bar Graph */
#vertgraph { 					
width: 378px; 
height: 207px; 
position: relative; 
background: url("g_backbar.gif") no-repeat;}
#vertgraph ul { 
width: 378px; 
height: 207px; 
margin: 0; 
padding: 0;}
#vertgraph ul li {  
position: absolute; 
width: 28px; 
height: 160px; 
bottom: 34px; 
padding: 0 !important; 
margin: 0 !important; 
background: url("g_colorbar3.jpg") no-repeat !important;
text-align: center; 
font-weight: bold; 
color: white; 
line-height: 2.5em;}
#vertgraph li.critical { left: 24px; 
background-position: 0px bottom !important; }
#vertgraph li.high { left: 101px; 
background-position: -28px bottom !important; }
#vertgraph li.medium { left: 176px; 
background-position: -56px bottom !important; }
#vertgraph li.low { left: 251px; 
background-position: -84px bottom !important; }
#vertgraph li.info { left: 327px; 
background-position: -112px bottom !important; }
/* Note: The use of !important is to over write 
my site stlyesheets for these examples */
</style>

HTML代码

<h3>www.865171.cn</h3>
<div id="vertgraph">
	<ul>
		<li class="critical" style="height: 150px;">22</li>
		<li class="high" style="height: 80px;">7</li>
		<li class="medium" style="height: 50px;">3</li>
		<li class="low" style="height: 90px;">8</li>
		<li class="info" style="height: 40px;">2</li>
	</ul>
</div>

上一篇:三张图片组合成的水平柱状CSS图表

下一篇:CSS月度每天统计柱状图表

站长常用工具

最新图表

热门图表

赞助商链接

线上新濠天地娱乐场官方网站 网上赌场娱乐官方网站 网上赌场娱乐官方网站 线上新濠天地娱乐场官方网站
澳门永利线上娱乐官方网站 澳门现金网官方网站 新葡京娱乐场官方网站 澳门葡京国际娱乐官方网站
澳门葡京国际娱乐官方网站 澳门新濠天地娱乐场官方网站 威尼斯人手机版官方网站 威尼斯人网上娱乐官方网站
澳门葡京国际娱乐官方网站 澳门金沙网上娱乐官方网站 葡京赌场网址官方网站 太阳城集团官方网站