.chart{list-style:none;font-family:'宋体';字体大小：14px；边框：1px实心#ccc；保证金：0；填充：5px；背景：#F2F1D7；}.chartli{width:400px;背景：#DDF3FF；}CSS在排版处理上的强大，没有做不到，只有想不到。下面我们一起来实现一个直方图。首先打下一个具体的框架。我们整体使用无序列表，基本都是选择inlineunprimespan,strong,em来填充里面的东西。使命召唤：35%机器战：40%CS：87%光环：45%半衰期:23%解释一下，ul中的每一个li代表我们要统计的内容，span是列体，em是名称统计项的，strong为统计值。我们可以添加一些背景颜色来区分它们。.chart{列表样式：无；font-family:'宋体';字体大小：14px；边框：1px实心#ccc；保证金：0；填充：5px；背景：#F2F1D7；}.chartli{宽度：400px；背景：#DDF3FF；}运行代码：.chart{list-style:none;font-family:'宋体';字体大小：14px；边框：1px实心#ccc；保证金：0；填充：5px；背景：#F2F1D7；}.chartli{width:400px;背景：#DDF3FF；}使命召唤：35%机战：40%CS：strong>87%晕：45%半衰期：23%但是如何让li变成柱状呢？我们首先并排显示li。要实现这种效果，我们有两种方法：1、将li的显示方式改为inline；2.把li变成浮动元素。链接元素的盒模型很难控制，margin和padding的计算会变得很复杂。既然选择了后者，就必须面对一种情况，那就是float溢出了。对策是让父元素也变成浮动元素。浮动容器会向内收缩，适应子元素的高度和宽度。也就是说，我们可以专注于li的设计！为了让li表现得像一列，我们让它比它的宽度高得多。同时，为了让大家能够识别每一里的范围，我先给它们加上边框！.chart{列表样式：无；font-family:'宋体';字体大小：14px；边框：1px实心#ccc；保证金：0；填充：5px；背景：#F2F1D7；浮动：左；}.chartli{宽度：70px；高度：300px；向左飘浮;背景：#DDF3FF；border:1pxsolidred;}运行代码：.chart{list-style:none;font-family:'宋体';字体大小：14px；边框：1px实心#ccc；保证金：0；填充：5px；背景：#F2F1D7；向左飘浮;}.chartli{width:70px;高度：300px；向左飘浮;背景：#DDF3FF；边框：1px纯红色；}非法修改按钮的onclick事件使命召唤35%机器战40%CS87%光环45%半条命23%那么我们必须打开li元素里面的内容，因为它们都是内联元素，所以给它们设置高和宽是没有意义的，我们只好把它们伪装成块元素，然后它们就各自在一行了。由于我们删除了span中的冒号，而里面是空的，所以span不占空间。我们可以往里面塞东西。我塞满了它们。当然，您在文本区域中看不到它们。您需要使用Firefox的查看元素功能。（大家可以自己查，和的区别！）font-family:'宋体';字体大小：14px；边框：1px实心#ccc；保证金：0；填充：5px；背景：#F2F1D7；浮动：左；}.chartli{宽度：70px；高度：300px；向左飘浮;背景：#DDF3FF；border:1pxsolidred;}.chartliem,.chartlispan,.chartlistrong{display:block;}运行代码：.chart{list-style:none;font-family:'宋体';字体大小：14px；边框：1px实心#ccc；保证金：0；填充：5px；背景：#F2F1D7；向左飘浮;}.chartli{width:70px;高度：300px；向左飘浮;背景：#DDF3FF；边框：1px纯红色；}。chartliem,.chartlispan,.chartlistrong{display:block;}使命召唤35%机战40%CS87%光环45%Half-Life23%然后我们高亮柱子占据的空间，把相关的中心事物.chart{列表样式：无；font-family:'宋体';字体大小：14px；边框：1px实心#ccc；保证金：0；填充：5px；背景：#F2F1D7；浮动：左；}.chartli{宽度：70px；高度：300px；向左飘浮;背景：#DDF3FF；border:1pxsolidred;}.chartliem{display:block;高度：20px；text-align:center;}.chartlispan{display:block;背景：#F1FAFA;height:260px;}.chartlistrong{display:block;高度：20px；text-align:center;}运行代码：.chart{list-style:none;font-family:'宋体';字体大小：14px；边框：1px实心#ccc；保证金：0；填充：5px；背景：#F2F1D7；向左飘浮;}.chartli{width:70px;高度：300px；向左飘浮;背景：#DDF3FF；边框：1px纯红色；}.chartliem{显示：块；高度：20px；文本对齐：居中；}.chart李跨度{显示：块；背景：#F1FAFA;高度：260px；}.chartlistrong{显示：块；高度：20px；文本对齐：居中；}使命召唤35%机战40%CS87%光环45%半衰期23%然后我们给li元素加上图片，也就是传说中的圆柱体，然后用span做封面layer，我们会尽可能暴露li所在item的统计信息，为了计算方便，我们将span的高度重置为100px，将li的高度改为140pxem，并在strong中设置与li相同的背景色,并覆盖列的顶部和底部。.chart{列表样式：无；font-family:'宋体';字体大小：14px；边框：1px实心#ccc；保证金：0；填充：5px；背景：#F2F1D7；向左飘浮;}.chartli{width:70px;高度：140px；向左飘浮;边框：1px纯红色；背景：#DDF3FFurl(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif)centercenterrepeat-y;}.chartliem,.chartlispan,.chartlistrong{display:block;高度：20px；文本对齐：居中；}.chartliem,.chartlistrong{背景：#DDF3FF;}.chartlispan{height:100px;}运行代码：.chart{list-style:none;font-family:'宋体';字体大小：14px；边框：1px实心#ccc；保证金：0；填充：5px；背景：#F2F1D7；向左飘浮;}.chartli{width:70px;高度：140px；浮动：乐英尺；边框：1px纯红色；背景：#DDF3FFurl(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif)centercenterrepeat-y;}.chartliem,.chartlispan,.chartlistrong{display:block;高度：20px；文本对齐：居中；}.chartliem,.chartlistrong{背景：#DDF3FF;}.chartlispan{height:100px;}使命召唤35%机战40%CS87%光环45%半衰期<strong>23%然后我们在span中做一个背景图，颜色和li元素一样，统计多少就往上移动多少是！为了方便起见，我们使用内联样式设置此backgroundPositionY值最后去掉li元素的边框就大功告成了！.chart{列表样式：无；font-family:'宋体';字体大小：14px；边框：1px实心#ccc；保证金：0；填充：5px；背景：#F2F1D7；float:left;}.chartli{width:70px;高度：140px；向左飘浮;背景：#DDF3FFurl(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif)centercenterrepeat-y;}.chartliem,.chartlispan,.chartlistrong{显示:堵塞;高度：20px；文本对齐：居中；背景：#DDF3FF;}.chartlispan{height:100px;背景：透明url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_mask.jpg)不重复；使命召唤35%机战40%CS<spanstyle="background-position:center-87px">87%光环45%半条命23%运行代码：.chart{list-style:none;font-family:'宋体';字体大小：14px；边框：1px实心#ccc；保证金：0；填充：5px；背景：#F2F1D7；向左飘浮;}.chartli{width:70px;高度：140px；向左飘浮;背景：#DDF3FFurl(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif)centercenterrepeat-y;}.chartliem,.chartlispan,.chartlistrong{display:block;高度:20px;文本对齐：居中；}.chartliem,.chartlistrong{背景：#DDF3FF;}.chartlispan{height:100px;背景：透明url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_mask.jpg)不重复；}使命召唤35%机器战40%CS87%光环45%半条命23%
