html5 css3制作柱形图,一步一步教你实现纯CSS的柱形图

烈火网教程 CSS在处理排版之强大，没有做不到，只有想不到。下面我们将一同实现一个柱状图。先打好一个具体的框架。我们利用无序列表做整体，里面的东西我们根本选择内联无素span，strong，em来填充。

使命召唤:35%

机器战争:40%

CS:87%

光环:45%

半条命:23%

提示：可修改后代码再运行!

使命召唤：35%

机器战争：40%

CS：87%

光环：45%

半条命：23%

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

使命召唤:35%

机器战争:40%

CS:87%

光环:45%

半条命:23%

提示：可修改后代码再运行!

.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;

}

#p#副标题#e#　　但怎样把li弄成柱状呢&#x