首页 > 网络编程 > JavaScript > 网页特效 > 页面背景 > CSS 直方图

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需刷新才能执行]

CSS 直方图布局示例

您可能感兴趣的文章: