最完美DIV+CSS布局：双飞翼布局

最新推荐文章于 2018-01-15 15:38:00 发布

weixin_30410119

最新推荐文章于 2018-01-15 15:38:00 发布

阅读量48

点赞数

原文链接：http://www.cnblogs.com/wanghaibin/articles/2543368.html

版权

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 5 <title>PE Layout Example 5</title>
 6 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css" />
 7 <style type="text/css">
 8 .main { background: #D6D6D6; }
 9 .sub { background: #E79F6D; }
10 .extra { background: #77BBDD; }
11 #hd, #ft { height: 50px; background: #666; color: #eee; text-align: center; }
12 #ft { height: 40px; }
13 /* 布局 */
14 .main { float: left; width: 100%; }
15 .sub { float: left; width: 190px; margin-left: -100%; }
16 .extra { float: left; width: 230px; margin-left: -100%; position: relative; left: 190px; }
17 .main-wrap { margin-left: 430px; }
18 .main, .sub, .extra { /*padding-bottom: 5000px; margin-bottom: -5000px;*/ }
19 #bd { overflow: hidden; _zoom: 1; }
20 </style>
21 </head>
22 <body>
23 <div id="page2">
24     <div id="hd">
25         <p>Header</p>
26     </div>
27     <div id="bd">
28         <div class="main">
29             <div class="main-wrap">
30                 <p>Main</p>
31                 <pre>
32 .main {
33     float: left;
34     width: 100%;
35 }
36 .main-wrap {
37     margin-left: 430px;
38 }
39                 </pre>
40             </div>
41         </div>
42         <div class="sub">
43             <p>Sub</p>
44             <pre>
45 .sub {
46     float: left;
47     width: 190px;
48     margin-left: -100%;
49 }
50             </pre>
51         </div>
52         <div class="extra">
53             <p>Extra</p>
54             <pre>
55 .extra {
56     float: left;
57     width: 230px;
58     margin-left: -100%;
59     position: relative;
60     left: 190px;
61 }
62             </pre>
63         </div>
64     </div>
65     <div id="ft">
66         <p>Footer</p>
67     </div>
68 </div>
69 </body>
70 </html>

转载于:https://www.cnblogs.com/wanghaibin/articles/2543368.html

weixin_30410119

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最完美DIV+CSS布局：双飞翼布局

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; chars...
复制链接

扫一扫