css绘制barChartGraph.docxVIP

htmlheadmeta http-equiv=Content-Type Content=text/html;charset=utf-8title柱状图/title style type=text/cssbody{margin:0;padding:0;}ul,li,dl,dd,dt,p{margin:0;padding:0;}ul,li{list-style:none;}/*柱状图样式*/.barChart_container{position:relative;margin-left:60px;margin-top:10px;margin-bottom:25px;}.barChart_line{border:#999 solid;border-width:0 1px 1px 1px;border-right-color:#eee;overflow:hidden;width:99%;}.barChart_line ul{overflow:hidden;border:#eee solid;border-width:1px 0 0 0;}.barChart_line li{float:left;width:20%;/*根据.histogram-bg-line下的ul里面li标签的个数来控制比例*/overflow:hidden;}.barChart_line li div{border-right:1px #eee solid;}.barChart_content{position:absolute;left:0px;top:0;width:99%;height:100%;}.barChart_content ul{height:100%;}.barChart_content li{float:left;height:100%;width:20%;/*根据直方图的个数来控制这个width比例*/text-align:center;position:relative;}.barChart_box{position:relative;display:inline-block;height:100%;width:50px;}.barChart_content li a{position:absolute;bottom:0;right:0;display:block;width:20px;}.barChart_content li .barChart_X{position:absolute;bottom:-20px;left:0px;white-space:nowrap;display:inline-block;width:100%;font-size:12px;}.barChart_Y{position:absolute;left:-60px;top:-10px;font:12px/1.8 verdana,arial;}.barChart_Y li{text-align:right;width:55px;padding-right:5px;color:#333;}.barChart_line li div,.barChart_Y li{height:60px;/*控制单元格的高度及百分比的高度，使百分数与线条对齐*/}/style/headbodydiv class=barChart_container id=barChart_container !--背景方格-- div class=barChart_line ul lidiv/div/li lidiv/div/li lidiv/div/li lidiv/div/li /ul ul lidiv/div/li lidiv/div/li lidiv/div/li lidiv/div/li /ul ul lidiv/div/li lidiv/div/li lidiv/div/li lidiv/div/li /ul ul lidiv/div/li lidiv/div/li lidiv/div/li lidiv/div/li /ul ul lidiv/div/li lidiv/div/li lidiv/div/li lidiv/div/li /ul /div !--柱状条-- div class=barChart_content ulli span class=barChart_boxa style=height:15%;background:gray; title=15%/a/span span class=barChart_X夜深风竹敲秋韵/span /li li span class=barChart_boxa style=height:35%;background:#2f87d9; t