盒子的多样式

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="height: 40px;">
 9         <div style="width: 1000px;margin: 0px auto">
10             <div style="width: 100px;height: 40px;float: left;"></div>
11             <div style="width: 100px;height: 40px;float: left;margin-left: 10px;"></div>
12             <div style="width: 100px;height: 40px;float: left;margin-left: 10px;"></div>
13             <div style="width: 80px;height: 40px;float: right;"></div>
14             <div style="width: 80px;height: 40px;float: right;margin-right: 10px"></div>
15             <div style="width: 80px;height: 40px;float: right;margin-right: 10px"></div>
16             <div style="width: 80px;height: 40px;float: right;margin-right: 10px"></div>
17             <div style="width: 80px;height: 40px;float: right;margin-right: 10px"></div>
18             <div style="clear: both"></div>
19         </div>
20     </div>
21     <div style="height: 20px"></div>
22     <div style="width: 1000px;margin: 0px auto">
23         <div style="width: 150px;height: 70px;float: left;"></div>
24         <div style="float: left;padding-top: 21px;padding-left: 80px;">
25             <div style="width: 250px;height: 30px;"></div>
26         </div>
27         <div style="width: 100px;height: 50px;float: right;"></div>
28         <div style="float: left;padding-left: 300px;">
29             <div style="width: 100px;height: 50px;"></div>
30         </div>
31         <div style="clear: both"></div>
32         <div style="height: 20px"></div>
33         <div style="width: 180px;height: 90px;float: left;">
34             <div style="height: 30px;width:180px;">
35                 <div style="width: 30px;height: 20px;float: left;margin-left: 10px;margin-top: 5px;"></div>
36                 <div style="width: 30px;height: 20px;float: left;margin-left: 15px;margin-top: 5px;"></div>
37                 <div style="width: 30px;height: 20px;float: left;margin-left: 15px;margin-top: 5px;"></div>
38                 <div style="width: 30px;height: 20px;float: left;margin-left: 15px;margin-top: 5px;"></div>
39                 <div style="clear: both"></div>
40             </div>
41             <div style="height: 30px;width:180px;">
42                 <div style="width: 30px;height: 20px;float: left;margin-left: 10px;margin-top: 5px;"></div>
43                 <div style="width: 30px;height: 20px;float: left;margin-left: 15px;margin-top: 5px;"></div>
44                 <div style="width: 30px;height: 20px;float: left;margin-left: 15px;margin-top: 5px;"></div>
45                 <div style="width: 30px;height: 20px;float: left;margin-left: 15px;margin-top: 5px;"></div>
46                 <div style="clear: both"></div>
47             </div>
48             <div style="height: 30px;width:180px;">
49                 <div style="width: 30px;height: 20px;float: left;margin-left: 10px;margin-top: 5px;"></div>
50                 <div style="width: 30px;height: 20px;float: left;margin-left: 15px;margin-top: 5px;"></div>
51                 <div style="width: 30px;height: 20px;float: left;margin-left: 15px;margin-top: 5px;"></div>
52                 <div style="width: 30px;height: 20px;float: left;margin-left: 15px;margin-top: 5px;"></div>
53                 <div style="clear: both"></div>
54             </div>
55         </div>
56         <div style="width: 180px;height: 90px;float: left;margin-left: 25px"></div>
57         <div style="width: 180px;height: 90px;float: left;margin-left: 25px"></div>
58         <div style="width: 180px;height: 90px;float: left;margin-left: 25px"></div>
59         <div style="width: 180px;height: 90px;float: left;margin-left: 25px"></div>
60         <div style="clear: both"></div>
61         <div style="height: 20px"></div>
62         <div style="width: 1000px;height: 30px;">
63             <div style="width: 100px; height: 20px;margin-top: 5px;float: left;margin-left: 20px;"></div>
64             <div style="width: 100px; height: 20px;margin-top: 5px;float: left;margin-left: 115px;"></div>
65             <div style="width: 100px; height: 20px;margin-top: 5px;float: left;margin-left: 115px;"></div>
66             <div style="width: 100px; height: 20px;margin-top: 5px;float: left;margin-left: 115px;"></div>
67             <div style="width: 100px; height: 20px;margin-top: 5px;float: left;margin-left: 115px;"></div>
68             <div style="clear: both"></div>
69         </div>
70         <div style="height: 20px"></div>
71         <div style="height: 80px;</div>
72         <div style="height: 20px"></div>
73         <div style="width: 1000px;height: 30px;">
74             <div style="width: 100px; height: 20px;margin-top: 5px;float: left;margin-left: 20px;"></div>
75             <div style="width: 100px; height: 20px;margin-top: 5px;float: left;margin-left: 115px;"></div>
76             <div style="width: 100px; height: 20px;margin-top: 5px;float: left;margin-left: 115px;"></div>
77             <div style="width: 100px; height: 20px;margin-top: 5px;float: left;margin-left: 115px;"></div>
78             <div style="width: 100px; height: 20px;margin-top: 5px;float: left;margin-left: 115px;"></div>
79             <div style="clear: both"></div>
80         </div>
81         <div style="height: 20px"></div>
82         <div style="width: 200px;height: 200px;float: left"></div>
83         <div style="width: 375px;height: 200px;float: left;margin-left: 25px">
84             <div style="width:370px;height: 30px;float: right;margin-top: 6px; ">
85                 <div style="width: 50px; height: 20px;margin-top: 5px;float: left;margin-left: 20px;"></div>
86                 <div style="width: 50px; height: 20px;margin-top: 5px;float: left;margin-left: 20px;"></div>
87                 <div style="width: 50px; height: 20px;margin-top: 5px;float: left;margin-left: 20px;"></div>
88             </div>
89         </div>
90         <div style="width: 375px;height: 200px;float: left;margin-left: 25px"></div>
91         <div style="clear: both"></div>
92 
93     </div>
94 </body>
95 </html>

 

显示图:图片 1

 

本文由金沙官网线上发布于Web前端,转载请注明出处:盒子的多样式

您可能还会对下面的文章感兴趣: