一步一步教你实现纯CSS的柱形图

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

<ul class="chart"> <li><em>使命召唤</em><span>: </span><strong>35%</strong></li> <li><em>机器战争</em><span>: </span><strong>40%</strong></li> <li><em>CS</em><span>: </span><strong>87%</strong></li> <li><em>光环</em><span>: </span><strong>45%</strong></li> <li><em>半条命</em><span>: </span><strong>23%</strong></li> </ul>
提示：可修改后代码再运行!

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

（编辑：承德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!