纯HTML&CSS制作柱状图 [CSS]

效果图:

CSS样式:

<style type="text/css">
ul, li, dl, dd, dt, p { margin: 0; padding: 0; }
ul, li { list-style: none; }
/*柱状图样式*/
.histogram-container { position: relative; margin-left: 60px; margin-top: 10px; margin-bottom: 25px; }
.histogram-bg-line { border: #999 solid; border-width: 0 1px 1px 1px; border-right-color: #eee; overflow: hidden; width: 99%; }
.histogram-bg-line ul { overflow: hidden; border: #eee solid; border-width: 1px 0 0 0; }
.histogram-bg-line li { float: left; width: 10%; /*根据.histogram-bg-line下的ul里面li标签的个数来控制比例*/ overflow: hidden; }
.histogram-bg-line li div { border-right: 1px #eee solid; }
.histogram-content { position: absolute; left: 0px; top: 0; width: 99%; height: 100%; }
.histogram-content ul { height: 100%; }
.histogram-content li { float: left; height: 100%; width: 16%; /*根据直方图的个数来控制这个width比例*/ text-align: center; position: relative; }
.histogram-box { position: relative; display: inline-block; height: 100%; width: 20px; }
.histogram-content li a { position: absolute; bottom: 0; right: 0; display: block; width: 45px; }
.histogram-content li .name { position: absolute; bottom: -20px; left: 0px; white-space: nowrap; display: inline-block; width: 76%; font-size: 12px; }
.histogram-y { position: absolute; left: -60px; top: -10px; font: 12px/1.8 verdana,arial; }
.histogram-y li { text-align: right; width: 55px; padding-right: 5px; color: #333; }
.histogram-bg-line li div, .histogram-y li { height: 60px; /*控制单元格的高度及百分比的高度,使百分数与线条对齐*/ }
</style>


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>
            <li><div></div></li>
            <li><div></div></li>
            <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>
            <li><div></div></li>
            <li><div></div></li>
            <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>
            <li><div></div></li>
            <li><div></div></li>
            <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>
            <li><div></div></li>
            <li><div></div></li>
            <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>
            <li><div></div></li>
            <li><div></div></li>
            <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: 85%; background: #2f87d9;" title="C#"></a>
            </span><span class="name">C#</span> </li>
            <li><span class="histogram-box"><a style="height: 90%; background: #3DA73D;" title="ASP.NET"></a>
            </span><span class="name">ASP.NET</span> </li>
            <li><span class="histogram-box"><a style="height: 80%; background: orange;" title="JavaScript"></a>
            </span><span class="name">JavaScript</span> </li>
            <li><span class="histogram-box"><a style="height: 50%; background: #2F87D9;" title="CSS"></a>
            </span><span class="name">CSS</span> </li>
            <li><span class="histogram-box"><a style="height: 70%; background: #58DB60;" title="SQL Server"></a>
            </span><span class="name">SQL Server</span> </li>
            <li><span class="histogram-box"><a style="height: 30%; background: #EF8A8A;" title="Oracle"></a>
            </span><span class="name">Oracle</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>


摘自:http://www.xiaoboy.com/detail/1341545053.html