澳门鸿运国际,让你建站更便捷和轻松!
您当前的位置:鸿运娱乐 > 网页制作 > html/xhtml
html+CSS实现图表效果(代码)
来源:澳门鸿运国际  时间:2011-04-05 22:14:47

建站教学网奉献给大家一个非常漂亮的图表实例,可以用在数据分析统计上,html+css代码实现:

html部分:

<ul class="graph">
<li class="percent20">20%</li>
<li class="percent40">40%</li>
<li class="percent60">60%</li>
<li class="percent80">80%</li>
<li class="percent100">100%</li>
</ul>

CSS代码部分:

ul.graph
{
margin: 0;
padding: 0;
list-style-type: none;
}

ul.graph li
{
margin-bottom: .5em;
padding: .2em;
background: #600;
color: #fff;
}

ul.graph li.percent20
{
background: url(graph20.jpg) repeat-y 20% 0;
}

ul.graph li.percent40
{
background: url(graph40.jpg) repeat-y 40% 0;
}

ul.graph li.percent60
{
background: url(graph60.jpg) repeat-y 60% 0;
}

ul.graph li.percent80
{
background: url(graph80.jpg) repeat-y 80% 0;
}

 

责任编辑:风中的自由

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
CopyRight 2008-2009, favnav.com, Inc. All Rights Reserved
皖ICP备09015033号