CSS 直方图布局示例

更新时间：2009年11月04日 14:48:28 作者：

利用CSS布局一个直方图，可能比较实用，主要是考验使用CSS布局的能力，看看效果吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS直方图示例</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <style type="text/css"> .chart { font-family: Tahoma; font-size: 12px; border: 1px solid #ccc; float: left; margin: 0; padding: .4em .1em; } .chart li { list-style: none; float: left; width: 5em; text-align: center; background: url(/upload/2009-11/20091104144827988.gif) center 1.6em no-repeat; } .chart li span { display: block; text-indent: -999em; padding-bottom: 90px; background: url(/upload/2009-11/20091104144827692.gif) center -1px no-repeat; border-top: 5px solid #fff; } .chart strong { display: block; text-align: center; font-weight: normal; } </style> </head> <body> <ul class="chart"> <li>一月: 35%</li> <li>二月: 40%</li> <li>三月: 87%</li> <li>四月: 45%</li> <li>五月: 23%</li> </ul> &nbsp; <ul class="chart"> <li>一月: 35%</li> <li>二月: 40%</li> <li>三月: 87%</li> <li>四月: 45%</li> <li>五月: 23%</li> </ul> &nbsp; </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS 网页安全色调色板 DW风格
利用JS做的一个网页安全色调色板希望大家用得上！
2008-12-12
javascript背投广告代码的完善
对于背投广告的原理来说并没有什么难度，无非打开的窗口失去焦点（blur），而原来页面得到焦点（focus）。但对于流行的浏览器来说，如果非用户行为的弹出窗口（即 onload 时，直接window.open ），会被浏览器默认拦截。
2008-04-04
JavaScript判断窗口是否最小化的代码(跨浏览器)
有些朋友需要判断页面是不是被最小化了，然后再进行相应的操作。
2010-08-08
网页背景渐变效果代码
网页背景渐变效果代码...
2007-04-04
div scroll始终在最底部的实现代码
想要设定一个div始终scroll到它的最底部，可以用如下代码
2009-03-03
js实现小鱼吐泡泡在页面游动特效
非常逼真的用js写的，在页面中有一条游动的吐泡泡小鱼，对于爱好海洋类的个人网站，加这个效果蛮漂亮的
2008-09-09
JavaScript 地震特效
JavaScript 地震特效
2009-11-11
很弱的js表格换行效果（表格移动行）
很弱的js表格换行效果（表格移动行），可以将表格的一行向上或向下移动，主要是学习dom之表格控制操作
2012-11-11
js实现的层变换效果
js实现的层变换效果...
2007-09-09
背景，文字渐变（无闪屏）
背景，文字渐变（无闪屏）...
2007-02-02

软件下载

源码下载

软件编程

网络编程

在线工具

数据库

CMS

常用工具

CSS 直方图布局示例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具