HTML和CSS经典布局4

如下图：

需求：

1. 如图

2. 可以从body标签开始。

 

 

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style>
 6         #content {
 7             overflow: hidden;
 8         }
 9         .column-left {
10             float: left;
11             width: 200px;
12             min-height: 500px;
13         }
14         .column-right {
15             float: right;
16             width: 200px;
17             min-height: 500px;
18         }
19         .column-middle {
20             margin: 25px 225px;
21             min-height: 500px;
22         }
23     </style>
24 </head>
25 <body>
26     <div id="header" style="height: 50px; background: blue;">
27         
28     </div>
29     <div id="content">
30         <div class="column-left" style="background-color: purple;">
31             
32         </div>
33         <div class="column-right" style="background-color: yellow;">
34             
35         </div>
36         <div class="column-middle" style="background-color: pink;">
37             
38         </div>
39     </div>
40 </body>
41 </html>
View Code

 

 

 

posted @ 2013-11-12 16:26  Leo C.W  Views(634)  Comments(2)  Edit  收藏  举报