站长资源 网络编程

CSS 直方图布局示例

整理:jimmy2026/8/6浏览2次

简介CSS直方图示例 .chart { font-family: Tahoma; font-size: 12px; border: 1px solid #ccc; float: left; margin: 0; padding: .4em .1em;

<!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需再刷新一下页面才能执行]

上一篇：jquery 动态调整textarea高度

下一篇：实用的JS表单验证提示效果

站长资源 网络编程

CSS 直方图布局示例

最新资源

一句话新闻

标签云