CSS实现的柱状图效果实例代码_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:31:14
Original
1246 people have browsed it

CSS实现的柱状图效果实例代码:
柱状图一般用于数据统,比较直观人性化,下面就简单介绍一下如何使用CSS实现此效果。
代码实例如下:

 

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#wrap {  position:relative;  width:500px;  height:600px;}#wrap div {  width:15px;  position:absolute;  bottom:5px;  background:#f00;}</style></head><body><div id="wrap">  <div style="height:100px;left:10px"></div>  <div style="height:200px;left:30px"></div>  <div style="height:300px;left:50px"></div>  <div style="height:500px;left:70px"></div>  <div style="height:200px;left:90px"></div></div></body></html>
Copy after login

 

以上代码非常的简单就是采用绝对定位,控制div的位置,这样就实现了并排效果。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9767

更多内容可以参阅:http://www.softwhy.com/divcss/

 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template