css实现柱状图

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u011388741/article/details/50668913

柱状图在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设置,使其不同柱列并列显示出来,最终效果如下:




展开阅读全文

没有更多推荐了,返回首页