CSS實現的柱狀圖效果例項程式碼

admin發表於2017-02-23
CSS
柱狀圖一般用於資料統，比較直觀人性化，下面就簡單介紹一下如何使用CSS實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!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的位置，這樣就實現了並排效果。

相關文章