使用纯HTML+CSS制作柱状图

        今天利用多余时间使用纯HTML+CSS制作了一个柱状图（直方图）以备工作的需要，此柱状图兼容IE7+、谷歌、火狐（IE6下有点问题不过可以通过js另外处理，此文章就不写处理方法了），效果如下图所示：

其主要特点是：整个坐标自适应，高度可自定义。代码如下所示：

HTML代码：

<div class="histogram-container" id="histogram-container">
    <!--背景方格-->
    <div class="histogram-bg-line">
        <ul>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ul>
        <ul>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ul>
        <ul>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ul>
        <ul>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ul>
        <ul>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ul>
    </div>
    <!--柱状条-->
    <div class="histogram-content">
        <ul>
            <li>
                <span class="histogram-box"><a style="height:20%;background:#2f87d9;" title="20%"></a></span>
                <span class="name">百度一下</span>
            </li>
            <li>
                <span class="histogram-box"><a style="height:40%;background:green;" title="40%"></a></span>
                <span class="name">夜深风竹敲秋韵</span>
            </li>
            <li>
                <span class="histogram-box"><a style="height:50%;background:orange;" title="50%"></a></span>
                <span class="name">腾讯</span>
            </li>
            <li>
                <span class="histogram-box"><a style="height:80%;background:gray;" title="80%"></a></span>
                <span class="name">小虾虎鱼一下</span>
            </li>
        </ul>
    </div>
    <!--百分比 y轴-->
    <div class="histogram-y">
        <ul>
            <li>100%</li>
            <li>80%</li>
            <li>60%</li>
            <li>40%</li>
            <li>20%</li>
            <li>0%</li>
        </ul>
    </div>
</div>