一步步教你实现纯CSS的柱形图

网络整理 - 07-27

CSS在处理排版之强大,没有做不到,只有想不到。下面我们将一同实现一个柱状图。

先打好一个具体的框架。我们利用无序列表做整体,里面的东西我们根本选择内联无素span,strong,em来填充。

运行代码

1.<ul class="chart">

2.  <li><em>使命召唤</em><span>: </span><strong>35%</strong></li>

3.  <li><em>机器战争</em><span>:</span><strong>40%</strong></li>

4.  <li><em>CS</em><span>:</span><strong>87%</strong></li>

5.  <li><em>光环</em><span>:</span><strong>45%</strong></li>

6.  <li><em>半条命</em><span>:</span><strong>23%</strong></li>

7.</ul>

解释一下,ul里面的每一个li就代表我们要统计的内容,span为柱身,em为统计项的名字,strong为统计数值。我们可以添加一些背景颜色来区分他们。

01..chart {

02.     list-style: none;

03.     font-family: '宋体';

04.     font-size: 14px;

05.     border: 1px solid #ccc;

06.     margin: 0;

07.     padding: 5px;

08.     background:#F2F1D7;

09.   }

10.   .chart li {

11.     width:400px;

12.     background:#DDF3FF;

13.   }

运行代码

但怎样把li弄成柱状呢?我们首先把li弄成并排显示,要达到这种效果,我们有两个方法:1、把li的display变成inline,2、把li变成浮动元素。估量一翻,选择了后者,因为内联元素的盒子模型是难以控制的,margin与padding的计算会变得很复杂。既然选择后者,我们必须面对一个情况,就是浮动溢出了。对策是父元素也变成浮动元素。浮动容器会向内收缩,自适应子元素的高度与宽度。也就是说,我们专注于li的设计就可以了!为了让li表现得像柱子, 我们让它的高比宽长很多,同时为了让大家好辩认每个li的范围,我先给它们加上边框!

01..chart {

02.  list-style: none;

03.  font-family: '宋体';

04.  font-size: 14px;

05.  border: 1px solid #ccc;

06.  margin: 0;

07.  padding: 5px;

08.  background:#F2F1D7;

09.  float:left;

10.}

11..chart li {

12.  width:70px;

13.  height:300px;

14.  float:left;

15.  background:#DDF3FF;

16.  border:1px solid red;

17.}

运行代码

接着我们要差开li元素里面的内容,由于它们都是内联元素,因此给他们设高与宽是没有意义,我们得把他们伪装成块元素。这时它们就会各自独占一行。由于我们把span中的冒号删除了,里面为空,span就表现为不占空间,我们可以给它们塞点东西进去,我塞的是,当然你们在textarea中是看不到的,要利用火狐的查看元素功能才行。

01..chart {

02.  list-style: none;

03.  font-family: '宋体';

04.  font-size: 14px;

05.  border: 1px solid #ccc;

06.  margin: 0;

07.  padding: 5px;

08.  background:#F2F1D7;

09.  float:left;

10.}

11..chart li {

12.  width:70px;

13.  height:300px;

14.  float:left;

15.  background:#DDF3FF;

16.  border:1px solid red;

17.}

18..chart li em ,

19..chart li span ,

20..chart li strong {

21.   display:block;

22.}

运行代码