CSS 直方图布局示例

ttx9n · 发表于 2009-11-4 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> 
  
<ul class="chart"> 
<li>一月: 35%</li> 
<li>二月: 40%</li> 
<li>三月: 87%</li> 
<li>四月: 45%</li> 
<li>五月: 23%</li> 
</ul> 
  
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

额呵呵 · 发表于 2022-8-20 16:14:46

8888888888888888

JosephSA · 发表于 2022-11-8 15:58:07

激动人心，无法言表！

bp5jgbcnt · 发表于 2022-11-14 05:12:17

搞个免费的用用

7jbiiz · 发表于 2022-12-17 21:40:27

好东西可以可以可以可以

qq303604905 · 发表于 2022-12-23 12:00:19

呵呵呵呵呵呵

雪龙Ui79 · 发表于 2023-3-19 14:44:03

老衲笑纳了

uj9lpc · 发表于 2023-5-18 11:48:46

激动人心，无法言表！

i1efp6c · 发表于 7 天前

dfdsafdsfdsfdsf

账号		自动登录	找回密码
密码			立即注册

[JavaScript] CSS 直方图布局示例

相关帖子