HTML和CSS经典布局2

如下图：

需求：

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             margin: 25px 25px 25px 225px;
16             min-height: 500px;
17         }
18     </style>
19 </head>
20 <body>
21     <div id="header" style="height: 50px; background: blue;">
22         
23     </div>
24     <div id="content">
25         <div class="column-left" style="background-color: purple;">
26             
27         </div>
28         <div class="column-right" style="background-color: yellow;">
29             
30         </div>
31     </div>
32 </body>
33 </html>
View Code

 

 

 

posted @ 2013-11-12 16:24  Leo C.W  Views(577)  Comments(4)  Edit  收藏  举报