div标准布局示例

最新推荐文章于 2022-08-05 16:56:29 发布

weixin_30711917

最新推荐文章于 2022-08-05 16:56:29 发布

阅读量172

点赞数

原文链接：http://www.cnblogs.com/codechange/p/8618936.html

版权

 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>

转载于:https://www.cnblogs.com/codechange/p/8618936.html

weixin_30711917

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div标准布局示例

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>横向两列布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #wa...
复制链接

扫一扫