CSS 直方图布局示例_编程学院_广州黛燃商贸商行公司

新闻中心 News 分类>>

联系我们 Contact us

服务热线：020 88798357

地址：广州市增城区中新镇慈岭村埔咀路20号
邮箱：sales@gzdairan.cn

您所在的位置是：首页 > 新闻中心 > 网络学院 > 编程学院

CSS 直方图布局示例

2026-01-16 11:13:34

浏览次数：次

返回列表

<!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 正则时间验证

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

网站首页

关于我们

产品展示

新闻中心

户外常识

在线留言

联系我们

新闻中心 News 分类>>

CSS 直方图布局示例