1、2011 至尊恋爱秘籍男人幸福必备！ www.lover21.info一步步教你实现纯 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 为
2、统计项的名字，strong 为统计数值。我们可以添加一些背景颜色来区分他们。01chart 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. -2011 至尊恋爱秘籍男人幸福必备！ www.lover21.info.chart
3、 list-style: none;font-family: 宋体;font-size: 14px;border: 1px solid #ccc;margin: 0;padding: 5px;background:#F2F1D7;.chart li width:400px;background:#DDF3FF;使命召唤: 35%机器战争: 40%CS: 87%光环: 45%半条命: 23%-运行代码但怎样把 li 弄成柱状呢？我们首先把 li 弄成并排显示，要达到这种效果，我们有两个方法：1 、把 li 的display 变成 inline，2、把 li 变成浮动元素。估量一翻，选择了后者，因
4、为内联元素的盒子模型是难以控制的，margin 与 padding 的计算会变得很复杂。既然选择后者，我们必须面对一个情况，就是浮动溢出了。对策是父元素也变成浮动元素。浮动容器会向内收缩，自适应子元素的高度与宽度。也就是说，我们专注于 li 的设计就可以了！为了让 li 表现得像柱子， 我们让它的高比宽长很多，同时为了让大家好辩认每个 li 的范围，我先给它们加上边框！01chart 02. list-style: none; 03. font-family: 宋体; 04. font-size: 14px; 05. border: 1px solid #ccc; 06. margin: 0;
5、 07. padding: 5px; 08. background:#F2F1D7; 2011 至尊恋爱秘籍男人幸福必备！ www.lover21.info09. float:left; 10. 11chart li 12. width:70px; 13. height:300px; 14. float:left; 15. background:#DDF3FF; 16. border:1px solid red; 17.-.chart list-style: none;font-family: 宋体;font-size: 14px;border: 1px solid #ccc;margin:
6、0;padding: 5px;background:#F2F1D7;float:left;.chart li width:70px;height:300px;float:left;background:#DDF3FF;border:1px solid red;非法修改 button 的 onclick 事件使命召唤35%机器战争40%CS87%光环45%半条命23%-2011 至尊恋爱秘籍男人幸福必备！ www.lover21.info运行代码接着我们要差开 li 元素里面的内容，由于它们都是内联元素，因此给他们设高与宽是没有意义，我们得把他们伪装成块元素。这时它们就会各自独占一行。由于我们把
7、 span 中的冒号删除了，里面为空，span就表现为不占空间，我们可以给它们塞点东西进去，我塞的是，当然你们在 textarea 中是看不到的，要利用火狐的查看元素功能才行。(你们自己可以查一下， ，与的区别！)01chart 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. 11chart li 12. w
8、idth:70px; 13. height:300px; 14. float:left; 15. background:#DDF3FF; 16. border:1px solid red; 17. 18chart li em , 19chart li span , 20chart li strong 21. display:block; 22.-.chart list-style: none;font-family: 宋体;font-size: 14px;border: 1px solid #ccc;margin: 0;padding: 5px;background:#F2F1D7;float
9、:left;2011 至尊恋爱秘籍男人幸福必备！ www.lover21.info.chart li width:70px;height:300px;float:left;background:#DDF3FF;border:1px solid red;.chart li em ,.chart li span ,.chart li strong display:block;使命召唤 -35%机器战争 -40%CS-87%光环 -45%半条命 -23%-运行代码接着我们把柱子占的空间突现出来，并把相关的东西居中对齐一下。01chart 02. list-style: none; 03. font-
10、family: 宋体; 04. font-size: 14px; 05. border: 1px solid #ccc; 06. margin: 0; 07. padding: 5px; 08. background:#F2F1D7; 09. float:left; 10. 11chart li 12. width:70px; 13. height:300px; 14. float:left; 15. background:#DDF3FF; 16. border:1px solid red; 17. 18chart li em 2011 至尊恋爱秘籍男人幸福必备！ www.lover21.in
11、fo19. display:block; 20. height:20px; 21. text-align:center; 22. 23chart li span 24. display:block; 25. background:#F1FAFA; 26. height:260px; 27. 28chart li strong 29. display:block; 30. height:20px; 31. text-align:center; 32.-.chart list-style: none;font-family: 宋体;font-size: 14px;border: 1px solid
12、 #ccc;margin: 0;padding: 5px;background:#F2F1D7;float:left;.chart li width:70px;height:300px;float:left;background:#DDF3FF;border:1px solid red;.chart li em display:block;height:20px;text-align:center;.chart li span display:block;background:#F1FAFA;height:260px;2011 至尊恋爱秘籍男人幸福必备！ www.lover21.info.ch
13、art li strong display:block;height:20px;text-align:center;使命召唤 -35%机器战争 -40%CS-87%光环 -45%半条命 -23%-运行代码然后我们为 li 元素添加一张图片，它就是传说的圆柱了，然后用 span 为作罩遮层，li 所在项目的统计是多少，我们就露出多少，为了方便计算，我们把 span 的高度重设为 100px，li 的高度相应改为140px。em 与 strong 设置与 li 相同的背景颜色，遮住柱子的最上面与最下面。01chart 02. list-style: none; 03. font-family: 宋
14、体; 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:140px; 14. float:left; 15. border:1px solid red; 16. background:#DDF3FF url(http:/ center center repeat-y; 17. 18. .chart li em, .
15、chart li span,.chart li strong 19. display:block; 20. height:20px; 21. text-align:center; 2011 至尊恋爱秘籍男人幸福必备！ www.lover21.info22. 23. .chart li em, .chart li strong 24. background: #DDF3FF; 25. 26. .chart li span 27. height:100px; 28. -.chart list-style: none;font-family: 宋体;font-size: 14px;border: 1
16、px solid #ccc;margin: 0;padding: 5px;background:#F2F1D7;float:left;.chart li width:70px;height:140px;float:left;border:1px solid red;background:#DDF3FF url(http:/ center center repeat-y;.chart li em, .chart li span,.chart li strong display:block;height:20px;text-align:center;.chart li em, .chart li
17、strongbackground: #DDF3FF;.chart li span height:100px;使命召唤 -35%机器战争 -40%CS-87%2011 至尊恋爱秘籍男人幸福必备！ www.lover21.info光环 -45%半条命 -23%-运行代码接着我们在 span 弄一张背景图片，颜色与 li 元素的一样，统计数字为多少，我们就向上移多少！为了方便，我们用内联样式设置这个 backgroundPositionY 数值。最后去掉 li 元素的边框便大功告成了！01chart 02. list-style: none; 03. font-family: 宋体; 04. fon
18、t-size: 14px; 05. border: 1px solid #ccc; 06. margin: 0; 07. padding: 5px; 08. background:#F2F1D7; 09. float:left; 10. 11chart li 12. width:70px; 13. height:140px; 14. float:left; 15. background:#DDF3FF url(http:/ center center repeat-y; 16. 17chart li em, .chart li span,.chart li strong 18. display
19、:block; 19. height:20px; 20. text-align:center; 21. background: #DDF3FF; 22. 23chart li span 24. height:100px; 25. background:transparent url(http:/ no-repeat; 26.1. 2. 使命召唤35% 3. 机器战争40% 4. CS87% 2011 至尊恋爱秘籍男人幸福必备！ www.lover21.info5. 光环45% 6. 半条命23% 7. -.chart list-style: none;font-family: 宋体;font-
20、size: 14px;border: 1px solid #ccc;margin: 0;padding: 5px;background:#F2F1D7;float:left;.chart li width:70px;height:140px;float:left;background:#DDF3FF url(http:/ center center repeat-y;.chart li em, .chart li span,.chart li strong display:block;height:20px;text-align:center;.chart li em, .chart li s
21、trongbackground: #DDF3FF;.chart li span height:100px;background:transparent url(http:/ no-repeat;使命召唤35%机器战争40%CS87%光环45%2011 至尊恋爱秘籍男人幸福必备！ www.lover21.info半条命23%-运行代码=华丽的分界线，与题目无关 =-var dataSet = “最终幻想 “:95,“白骑士 “:20,“星之海样 “:84,“北欧女神 “:77,“勇者斗恶龙 “:90,“异度装甲 “:100,“圣剑传说 “:68,“影之心 “:72,“传说系列 “:85,“失落奥
22、德赛 “:92,“光明之风 “:40var markPollarChart= function(parent,dataset)var p = document.createElement(“div“),builder = ;builder.push(“);for(var i in dataset)builder.push(“) ;builder.push(i) ;builder.push(“) ;builder.push(dataseti) ;builder.push(“%“) ;builder.push(“);p.innerHTML = builder.join();parent.inser
23、tBefore(p,null);window.onload = function()markPollarChart(document.getElementsByTagName(“body“)0,dataSet);2011 至尊恋爱秘籍男人幸福必备！ www.lover21.info.chart list-style: none;font-family: 宋体;font-size: 14px;border: 1px solid #ccc;margin: 0;padding: 5px;background:#F2F1D7;float:left;.chart li width:75px;height:140px;float:left;background:#DDF3FF url(http:/ center center repeat-y;.chart li em, .chart li span,.chart li strong display:block;height:20px;text-align:center;.chart li em, .chart li strongbackground: #DDF3FF;.chart li span height:100px;background:transparent url(http:/ no-repeat;-运行代码
