一步步教你实现纯CSS的柱形图.docx
《一步步教你实现纯CSS的柱形图.docx》由会员分享，可在线阅读，更多相关《一步步教你实现纯CSS的柱形图.docx（17页珍藏版）》请在冰豆网上搜索。
一步步教你实现纯CSS的柱形图
一步步教你实现纯CSS的柱形图
CSS在处理排版之强大，没有做不到，只有想不到。
下面我们将一同实现一个柱状图。
先打好一个具体的框架。
我们利用无序列表做整体，里面的东西我们根本选择内联无素span，strong，em来填充。
-----------------------------------------------------------------------------------------------------
使命召唤:35%机器战争:40%CS:87%光环:45%半条命:23%-----------------------------------------------------------------------------------------------------
运行代码
1.
2.
使命召唤：35%3.
机器战争：40%4.
CS：87%5.
光环：45%6.
半条命：23%7.
解释一下，ul里面的每一个li就代表我们要统计的内容，span为柱身，em为统计项的名字，strong为统计数值。
我们可以添加一些背景颜色来区分他们。
01..chart{
02. list-style:
none;
03. font-family:
'宋体';
04. font-size:
14px;
05. border:
1pxsolid#ccc;
06. margin:
0;
07. padding:
5px;
08. background:
#F2F1D7;
09. }
10. .chartli{
11. width:
400px;
12. background:
#DDF3FF;
13. }
-----------------------------------------------------------------------------------------------------
.chart{
list-style:
none;
font-family:
'宋体';
font-size:
14px;
border:
1pxsolid#ccc;
margin:
0;
padding:
5px;
background:
#F2F1D7;
}
.chartli{
width:
400px;
background:
#DDF3FF;
}
使命召唤:35%机器战争:40%CS:87%光环:45%半条命:23%-----------------------------------------------------------------------------------------------------
运行代码
但怎样把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:
1pxsolid#ccc;
06. margin:
0;
07. padding:
5px;
08. background:
#F2F1D7;
09. float:
left;
10.}
11..chartli{
12. width:
70px;
13. height:
300px;
14. float:
left;
15. background:
#DDF3FF;
16. border:
1pxsolidred;
17.}
-----------------------------------------------------------------------------------------------------
.chart{
list-style:
none;
font-family:
'宋体';
font-size:
14px;
border:
1pxsolid#ccc;
margin:
0;
padding:
5px;
background:
#F2F1D7;
float:
left;
}
.chartli{
width:
70px;
height:
300px;
float:
left;
background:
#DDF3FF;
border:
1pxsolidred;
}
非法修改button的onclick事件
使命召唤35%机器战争40%CS87%光环45%半条命23%-----------------------------------------------------------------------------------------------------
运行代码
接着我们要差开li元素里面的内容，由于它们都是内联元素，因此给他们设高与宽是没有意义，我们得把他们伪装成块元素。
这时它们就会各自独占一行。
由于我们把span中的冒号删除了，里面为空，span就表现为不占空间，我们可以给它们塞点东西进去，我塞的是 ，当然你们在textarea中是看不到的，要利用火狐的查看元素功能才行。
（你们自己可以查一下 ， ， ， 与 的区别！
）
01..chart{
02. list-style:
none;
03. font-family:
'宋体';
04. font-size:
14px;
05. border:
1pxsolid#ccc;
06. margin:
0;
07. padding:
5px;
08. background:
#F2F1D7;
09. float:
left;
10.}
11..chartli{
12. width:
70px;
13. height:
300px;
14. float:
left;
15. background:
#DDF3FF;
16. border:
1pxsolidred;
17.}
18..chartliem,
19..chartlispan,
20..chartlistrong{
21. display:
block;
22.}
-----------------------------------------------------------------------------------------------------
.chart{
list-style:
none;
font-family:
'宋体';
font-size:
14px;
border:
1pxsolid#ccc;
margin:
0;
padding:
5px;
background:
#F2F1D7;
float:
left;
}
.chartli{
width:
70px;
height:
300px;
float:
left;
background:
#DDF3FF;
border:
1pxsolidred;
}
.chartliem,
.chartlispan,
.chartlistrong{
display:
block;
}
使命召唤35%机器战争40%CS87%光环45%半条命23%-----------------------------------------------------------------------------------------------------
运行代码
接着我们把柱子占的空间突现出来，并把相关的东西居中对齐一下。
01..chart{
02. list-style:
none;
03. font-family:
'宋体';
04. font-size:
14px;
05. border:
1pxsolid#ccc;
06. margin:
0;
07. padding:
5px;
08. background:
#F2F1D7;
09. float:
left;
10.}
11..chartli{
12. width:
70px;
13. height:
300px;
14. float:
left;
15. background:
#DDF3FF;
16. border:
1pxsolidred;
17.}
18..chartliem{
19. display:
block;
20. height:
20px;
21. text-align:
center;
22.}
23..chartlispan{
24. display:
block;
25. background:
#F1FAFA;
26. height:
260px;
27.}
28..chartlistrong{
29. display:
block;
30. height:
20px;
31. text-align:
center;
32.}
-----------------------------------------------------------------------------------------------------
.chart{
list-style:
none;
font-family:
'宋体';
font-size:
14px;
border:
1pxsolid#ccc;
margin:
0;
padding:
5px;
background:
#F2F1D7;
float:
left;
}
.chartli{
width:
70px;
height:
300px;
float:
left;
background:
#DDF3FF;
border:
1pxsolidred;
}
.chartliem{
display:
block;
height:
20px;
text-align:
center;
}
.chartlispan{
display:
block;
background:
#F1FAFA;
height:
260px;
}
.chartlistrong{
display:
block;
height:
20px;
text-align:
center;
}
使命召唤35%机器战争40%CS87%光环45%半条命23%-----------------------------------------------------------------------------------------------------
运行代码
然后我们为li元素添加一张图片，它就是传说的圆柱了，然后用span为作罩遮层，li所在项目的统计是多少，我们就露出多少，为了方便计算，我们把span的高度重设为100px，li的高度相应改为140px。
em与strong设置与li相同的背景颜色，遮住柱子的最上面与最下面。
01..chart{
02. list-style:
none;
03. font-family:
'宋体';
04. font-size:
14px;
05. border:
1pxsolid#ccc;
06. margin:
0;
07. padding:
5px;
08. background:
#F2F1D7;
09. float:
left;
10. }
11. .chartli{
12. width:
70px;
13. height:
140px;
14. float:
left;
15. border:
1pxsolidred;
16. background:
#DDF3FFurl（centercenterrepeat-y;
17. }
18. .chartliem, .chartlispan,.chartlistrong{
19. display:
block;
20. height:
20px;
21. text-align:
center;
22. }
23. .chartliem, .chartlistrong{
24. background:
#DDF3FF;
25. }
26. .chartlispan{
27. height:
100px;
28. }
-----------------------------------------------------------------------------------------------------
.chart{
list-style:
none;
font-family:
'宋体';
font-size:
14px;
border:
1pxsolid#ccc;
margin:
0;
padding:
5px;
background:
#F2F1D7;
float:
left;
}
.chartli{
width:
70px;
height:
140px;
float:
left;
border:
1pxsolidred;
background:
#DDF3FFurl（centercenterrepeat-y;
}
.chartliem,.chartlispan,.chartlistrong{
display:
block;
height:
20px;
text-align:
center;
}
.chartliem,.chartlistrong{
background:
#DDF3FF;
}
.chartlispan{
height:
100px;
}
使命召唤35%机器战争40%CS87%光环45%半条命23%-----------------------------------------------------------------------------------------------------
运行代码
接着我们在span弄一张背景图片，颜色与li元素的一样，统计数字为多少，我们就向上移多少！
为了方便，我们用内联样式设置这个backgroundPositionY数值。
最后去掉li元素的边框便大功告成了！
01..chart{
02. list-style:
none;
03. font-family:
'宋体';
04. font-size:
14px;
05. border:
1pxsolid#ccc;
06. margin:
0;
07. padding:
5px;
08. background:
#F2F1D7;
09. float:
left;
10.}
11..chartli{
12. width:
70px;
13. height:
140px;
14. float:
left;
15. background:
#DDF3FFurl（centercenterrepeat-y;
16.}
17..chartliem, .chartlispan,.chartlistrong{
18. display:
block;
19. height:
20px;
20. text-align:
center;
21. background:
#DDF3FF;
22.}
23..chartlispan{
24. height:
100px;
25. background:
transparenturl（ no-repeat;
26.}
1.
升级会员 