【Down】一步步教你实现纯CSS的柱形图.docVIP

一步步教你实现纯CSS的柱形图 CSS在处理排版之强大，没有做不到，只有想不到。下面我们将一同实现一个柱状图。 先打好一个具体的框架。我们利用无序列表做整体，里面的东西我们根本选择内联无素span，strong，em来填充。ul class=chart liem使命召唤/emspan: /spanstrong35%/strong/li liem机器战争/emspan: /spanstrong40%/strong/li liemCS/emspan: /spanstrong87%/strong/li liem光环/emspan: /spanstrong45%/strong/li liem半条命/emspan: /spanstrong23%/strong/li /ul ----------------------------------------------------------------------------------------------------- 运行代码 1.ul class=chart 2.??liem使命召唤/emspan： /spanstrong35%/strong/li 3.??liem机器战争/emspan：/spanstrong40%/strong/li 4.??liemCS/emspan：/spanstrong87%/strong/li 5.??liem光环/emspan：/spanstrong45%/strong/li 6.??liem半条命/emspan：/spanstrong23%/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.???} ----------------------------------------------------------------------------------------------------- style type=text/css .chart { list-style: none; font-family: 宋体; font-size: 14px; border: 1px solid #ccc; margin: 0; padding: 5px; background:#F2F1D7; } .chart li { width:400px; background:#DDF3FF; } /style ul class=chart liem使命召唤/emspan : /spanstrong35%/strong/li liem机器战争/emspan : /spanstrong40%/strong/li liemCS/emspan : /spanstrong87%/strong/li liem光环/emspan : /spanstrong45%/strong/li liem半条命/emspan : /spanstrong23%/strong/li /ul ----------------------------------------------------------------------------------------------------- 运行代码 但怎样把li弄成柱状呢？我们首先把li弄成并排显示，要达到这种效果，我们有两个方法：1、把li的display变成inline，2、把li变成浮动元素。估量一翻，选择了后者，因为内联元素的盒子模型是难以控制的，margin与padding的计算会变得很复杂。既