Heim >Web-Frontend >HTML-Tutorial >CSS实现的柱状图效果实例代码_html/css_WEB-ITnose
CSS实现的柱状图效果实例代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:141265Durchsuche
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>
以上代码非常的简单就是采用绝对定位，控制div的位置，这样就实现了并排效果。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9767
更多内容可以参阅:http://www.softwhy.com/divcss/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5标签传统分类及display详解_html/css_WEB-ITnoseNächster Artikel：为什么在html设置了禁用浏览器缓存，但点前进后退时页面还是 返回 From cache_html/css_WEB-ITnose