布局画格子小练习

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>无标题文档</title>
 4 <style type="text/css">
 5 *
 6 {
 7     margin:0px;
 8     padding:0px;}
 9 </style>
10 </head>
11 
12 <body>
13 <div style="100px; height:100px; position:relative; top:0px; left:0px; background-color:#F00;">
14 <div style="100px; height:100px; position:relative; top:50px; left:50px; background-color:#0F0;">
15 <div style="100px; height:100px; position:relative; top:50px; left:50px; background-color:#C6C;">
16 <div style="100px; height:100px; position:relative; top:50px; left:50px; background-color:#30C;">
17 <div style="100px; height:100px; position:relative; top:50px; left:50px; background-color:#000;">
18 </div>
19 </div>
20 </div>
21 </div>
22 </div>
23 <div style="100px; height:100px; position:relative; top:-50px; left:0px; background-color:#00F; z-index:5;">
24 </div>
25 <div style="100px; height:100px; position:relative; top:-100px; left:50px; background-color:#FF0; z-index:4;">
26 </div>
27 <div style="100px; height:100px; position:relative; top:-150px; left:100px; background-color:#6FC; z-index:3;">
28 </div>
29 <div style="100px; height:100px; position:relative; top:-200px; left:150px; background-color:#F36; z-index:2;">
30 </div>
31 <div style="100px; height:100px; position:relative; top:-250px; left:200px; background-color:#C00;">
32 </div>
33 </body>

画格子小练习

原文地址:https://www.cnblogs.com/mazhijie/p/5518648.html