如何利用div实现方形的堆叠

最近有同学问我,如何利用html作方块堆叠图而且兼容所有浏览器
很简单,CSS强大的绘图功能可以帮你

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>通过div层叠和css样式实现方块堆叠</title>  <meta name="author" c
<style> 
.div-1{ position:absolute; left:30px; top:30px; background:#F00; width:100px; height:100px}  
.div-2{ position:absolute; left:50px; top:50px; background:#FF0; width:100px; height:100px} 
.div-3{ position:absolute; left:70px; top:80px; background:#00F; width:100px; height:100px} 
.div-4{ position:absolute; left:90px; top:50px; background:#FF0; width:100px; height:100px} 
.div-5{ position:absolute; left:110px; top:30px; background:#F00; width:100px; height:100px} 
.div-6{ position:absolute; left:130px; top:10px; background:#00F; width:100px; height:100px} 
</style> 
</head> 
<body> 
 <div> 
  <div class="div-1">#1</div> 
  <div class="div-2">#2</div> 
  <div class="div-3">#3</div> 
  <div class="div-4">#4</div> 
  <div class="div-5">#5</div> 
  <div class="div-6">#6</div> 
 </div> 
</body> 
</html>

预览页面

标签: none
返回文章列表 文章二维码
本页链接的二维码
打赏二维码