- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="decsription" content="一列布局变混合布局" />
- <title>一列布局混合布局</title>
- <style type="text/css">
- body {
- margin: 0;
- padding: 0; /*清楚默认样式*/
- }
-
- .top {
- height: 100px;
- background: blue;
- }
- .nav{height:100px;width:1000px;background:#f60;margin:0 auto;}
- .main {
- width: 800px;
- height: 600px;
- background: #ccc;
- margin: 0 auto;
- }
- .left{width:200px;height:600px;background:yellow;float:left;}
- .right{width:600px;height:600px;background:#369;float:right;}
- .sub_l{width:400px;height:600px;background:#218;float:left;}
- .sub_r{width:200px;height:600px;background:green;float:right;}
- .sub_r_up{width:200px;height:200px;background:#765;}
- .sub_r_down{width:200px;height:300px;background:red;}
- .bottom {
- width: 800px;
- height: 100px;
- background: #b0b;
- margin: 0 auto;
- }
- </style>
- </head>
- <body>
- <div class="top">
- <div class="nav"></div>
- </div>
- <div class="main">
- <div class="left"></div>
- <div class="right">
- <div class="sub_l"></div>
- <div class="sub_r">
- <div class="sub_r_up"></div>
- <div class="sub_r_down"></div>
- </div>
- </div>
- </div>
- <div class="bottom"></div>
- </body>
- </html>