div标准布局示例 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>横向两列布局</title>
 6 <style>
 7     *{margin:0;padding:0;}
 8     #warp{
 9         width:960px;
10         margin:0 auto;
11         margin-top:10px;
12     }
13     #herder{
14         height:50px;
15         background:blue;
16     }
17     #nav{
18         height:30px;
19         background:orange;
20         margin:10px 0;
21     }
22     #main{
23         width:100%;
24         margin-bottom:10px;
25         overflow:hidden;
26     }
27     #main .main-left{
28         width:640px;
29         height:200px;
30         background:yellow;
31         float:left;
32     }
33     #main .main-right{
34         width:300px;
35         height:200px;
36         background:pink;
37         float:right;
38     }
39     #content{
40         width:100%;
41         overflow:hidden;
42     }
43     #content .content-left{
44         width:640px;
45         height:800px;
46         background:lightgreen;
47         float:left;
48     }
49     #content .content-right-sup{
50         width:300px;
51         height:500px;
52         background:lightblue;
53         float:right;
54     }
55     #content .content-right-sub{
56         width:300px;
57         height:280px;
58         background:purple;
59         margin-top:20px;
60         float:right;
61     }
62     #footer{
63         height:50px;
64         background:gray;
65         margin-top:10px;
66     }
67 </style>
68 </head>
69 <body>
70 <div id="warp">
71     <div id="herder">页头</div>
72     <div id="nav">导航</div>
73     <div id="main">
74         <div class="main-left">左-上</div>
75         <div class="main-right">右-上</div>
76     </div>
77     <div id="content">
78         <div class="content-left">左-下</div>
79         <div class="content-right-sup">右-上</div>
80         <div class="content-right-sub">右-下</div>
81     </div>
82     <div id="footer">页脚</div>
83 </div>
84 </body>
85 </html>

 

posted @ 2018-03-21 18:46  秋水秋色  阅读(934)  评论(0)    收藏  举报