免费模板网
当前位置: 首页>CSS图表> UL、LI + CSS实现水平柱状图表

CSS图表

UL、LI + CSS实现水平柱状图表

分类:CSS图表 时间:2009/6/2 17:04:29 浏览:5082 次

演示效果截图

CSS水平柱状图表

用到的图片

CSS代码

<style type="text/css">
ul {list-style-type:none;display:block;border:1px solid #ccc;
width:240px;height:210px;padding:0;margin:0;}
ul li {color:#fff;font-weight:bold;text-align:center;
height:34px;display:block;margin-top:10px;}
#q1 {width:100px;
background:url(02008428202910.gif) #fff no-repeat scroll -190px 0;}
#q2 {width:190px;
background:url(02008428202910.gif) #fff no-repeat scroll -100px -34px;}
#q3 {width:140px;
background:url(02008428202910.gif) #fff no-repeat scroll -150px -68px;}
#q4 {width:70px;
background:url(02008428202910.gif) #fff no-repeat scroll -220px -102px;}
</style>

HTML代码

<ul>
<li id="q1">100</li>
<li id="q2">190</li>
<li id="q3">140</li>
<li id="q4">70</li>
</ul>
www.865171.cn

上一篇:UL、LI + CSS实现垂直柱状图表

下一篇:DIV、UL、LI + CSS实现复杂柱状图

站长常用工具

最新图表

热门图表

赞助商链接