css实现柱状图

柱状图在web上经常用到，这里使用css实现，首先定义节点：

	<div id="vert">
		<h3>统计数据</h3>
			<ul>
				<li class="c1">30</li>
				<li class="c2">40</li>
				<li class="c3">20</li>
				<li class="c4">40</li>
			 
			</ul>
		</div>

为柱状图使用了两个基本元素：div用于柱状图的整体显示以及北京，ul用于柱状图的数据，其中每一个柱列都是一个li对象，为了是每列以不同颜色区分，分别给每个li定义不同的class；

然后使用css定义样式：

#vert{
				width: 300px;
				height: 200px;
				border: 1px solid skyblue;
				background-color: slategray;
				position: relative;
			}
			#vert ul li{
				float: left;
				position: absolute;
				bottom: 0px;
				background-color: salmon;
				text-align: center;
				font-weight: bold;
				color: black;
			    height: 100px;
				width:30px;
				list-style: none;
			}
			#vert ul li.c1{left: 50px; height:120px;background-color: darkcyan;}
			#vert ul li.c2{left:100px;height:180px;background-color: slateblue;}
			#vert ul li.c3{left: 150px; height:60px;background-color:darkgreen;}
			#vert ul li.c4{left:200px ;height:120px;background-color: skyblue;}

 

在div样式中使用position: relative;这样div就是一个相对定位对象，在其中的li对象就会以div为参考进行
position: absolute;这样才能够让bottom：0px起作用了，不然是相对浏览器的左上角进行定位的，然后对每个li使用float：left设置，使其不同柱列并列显示出来，最终效果如下：