- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>document</title>
- <style type="text/CSS">
- .header,.main,.footer{
- width:500px;
- }
- .header,.footer{
- height:100px; //盒子模型 要是不给height 高度 ;将不显示;只有设置高度才有图像出来
- background:#000;
- }
- .main{
- height: 300px; //内嵌的盒子 也不继承 height ,也需要独立设置高度
- background-color: #eee;
- margin:10px 0;
- }
- .main .content{
- width:300px;
- height:300px;
- background:orange;
- float:left;
- }
- .main .sidebar{
- width:190px;
- height:300px;
- background:green;
- float:right;
- }
- </style>
- </head>
- <body>
- <div class="header"></div>
- <div class="main">
- <div class="content"></div>
- <div class="sidebar"></div>
- </div>
- <div class="footer"></div>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2005565.html