1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>通过div层叠和css样式实现方块堆叠</title>
<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>
|