網頁佈局——雙飛翼佈局

時間 2019-11-26

標籤網頁佈局雙飛欄目 HTML 简体版

原文原文鏈接

聖盃佈局與雙飛翼佈局的區別：html

　　聖盃佈局（兩邊定寬，中間自適應的另外一種實現方式，這兩種方式在結構的書寫上仍是有不同的），主要是用相對定位與浮動和padding實現。佈局

實現兩邊定寬，中間自適應，主要是經過浮動與margin實現，代碼以下：spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>雙飛翼佈局</title>
 6     <style>
 7             * {
 8                 margin: 0;
 9                 padding: 0;
10             }
11             
12             body {
13                 max-width: 1000px;
14                 margin: 10px auto;
15             }
16             
17             .header,
18             .footer {
19                 border: 1px solid #333;
20                 background: #aaa;
21                 text-align: center;
22             }
23             
24             .left,
25             .main,
26             .right {
27                 float: left;
28                 min-height: 130px;
29             }
30             
31             .left {
32                 margin-left: -100%;
33                 width: 200px;
34                 background: gold;
35             }
36             
37             .right {
38                 margin-left: -220px;
39                 width: 220px;
40                 background: greenyellow;
41             }
42             
43             .main {
44                 width: 100%;
45             }
46             
47             .main-inner {
48                 margin-left: 200px;
49                 margin-right: 220px;
50                 min-height: 130px;
51                 background: olivedrab;
52                 word-break: break-all;
53             }
54             
55             .footer {
56                 clear: both;
57             }
58         </style>
59     </head>
60 <body>
61         <div class="header">
62             <h4>header</h4>
63         </div>
64         <div class="main">
65             <div class="main-inner">
66                 <h4>main</h4>
67             </div>
68         </div>
69         <div class="left">
70             <h4>left</h4>
71         </div>
72  
73         <div class="right">
74             <h4>right</h4>
75         </div>
76         <div class="footer">
77             <h4>footer</h4>
78         </div>
79 </body>
80 </html>

效果以下：code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。