双飞翼布局 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <title>Document</title>
 7   <style type="text/css">
 8   *,
 9   *:before,
10   *:after {
11     margin: 0;
12     padding: 0;
13   }
14 
15   .clearfix {
16     *zoom: 1;
17   }
18 
19   .clearfix:before,
20   .clearfix:after {
21     content: "";
22     display: table;
23   }
24 
25   .clearfix:after {
26     clear: both;
27   }
28 
29   .header,
30   .footer {
31     height: 64px;
32     background-color: pink;
33   }
34 
35   .aside {
36     float: left;
37     width: 100px;
38     height: 256px;
39     background-color: red;
40     margin-left: -100%;
41   }
42 
43   .extra {
44     float: left;
45     width: 100px;
46     height: 256px;
47     background-color: yellow;
48     margin-left: -100px;
49   }
50 
51   .content {
52     float: left;
53     width: 100%;
54     height: 512px;
55     background-color: green;
56   }
57 
58   .main {}
59 
60   .wrap {
61     height: 100%;
62     background-color: gray;
63     margin: 0 100px;
64   }
65   </style>
66 </head>
67 
68 <body>
69   <div class="header">header</div>
70   <div class="main clearfix">
71     <div class="content">
72       <div class="wrap">三栏式双飞翼布局</div>
73     </div>
74     <div class="aside">定宽左侧边栏</div>
75     <div class="extra">定宽右侧栏</div>
76   </div>
77   <div class="footer">footer</div>
78 </body>
79 
80 </html>

 

posted @ 2020-06-11 11:03  xlsdg  阅读(17)  评论(0)    收藏  举报