圣杯布局 

 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     position: relative;
42     left: -100px;
43   }
44 
45   .extra {
46     float: left;
47     width: 100px;
48     height: 256px;
49     background-color: yellow;
50     margin-left: -100px;
51     position: relative;
52     right: -100px;
53   }
54 
55   .content {
56     float: left;
57     width: 100%;
58     height: 512px;
59     background-color: green;
60   }
61 
62   .main {
63     padding: 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">三栏式圣杯布局</div>
72     <div class="aside">定宽左侧边栏</div>
73     <div class="extra">定宽右侧栏</div>
74   </div>
75   <div class="footer">footer</div>
76 </body>
77 
78 </html>

 

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