html+CSS实现图表效果(代码)


建站学奉献给大家一个非常漂亮的图表实例,可以用在数据分析统计上,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;
}

使用到的素材图片:下载地址



相关阅读:
利用PHP实现与ASP Banner组件相似的类
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
JavaScript框架:跨浏览器的标准化Ajax请求
Ubuntu Linux 7.10 系统下改变域名映射
带你轻松了解 SQL Server数据库的组成
FROM_UNIXTIME 格式化MYSQL时间戳函数
几种常见的保护数据库的方法
JavaScript 颜色梯度和渐变效果
web打印的另类方法
怎样才能保护好 SQL Server 数据库
利用php来自动调用不同服务器上的flash
MySQL集群配置
freebsd下重启网络相关命令分析
ASP利用Google实现在线翻译功能
快速导航

Copyright © 2016 phpStudy |