一 圣杯布局
1 html结构
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/css.css"> </head> <body> <div class="header">头部</div> <div class="container"> <div class="middle">中间</div> <div class="left">左侧</div> <div class="right">右侧</div> </div> <div class="footer">底部</div> </body> </html>
2 css
*{padding: 0;margin: 0;list-style: none;}
body{min-height: 700px;}
.header,.footer{background: #ff9999;text-align: center;height: 50px;line-height: 50px;}
.left,.middle,.right{
position: relative;
float: left;
min-height: 530px;
line-height: 530px;
text-align: center;
}
.container{
padding: 0 220px 0 200px;
overflow: hidden;
}
.left{
margin-left: -100%;left: -200px;
200px;
background-color: #99ffff;
}
.right{
margin-left: -220px;
right: -220px;
220px;
background: #ccff99;
}
.middle{
100%;
background: #ccffff;
word-break: break-all;
}
.footer{
clear: both;
}
二 双飞翼布局
1 html结构
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/sb.css"> </head> <body> <div class="header">header</div> <div class="middle"> <div class="middle-inner">middle</div> </div> <div class="left">left</div> <div class="right">right</div> <div class="footer">footer</div> </body> </html>
2 css
*{padding: 0px;margin: 0px;}
.header,.footer{
height: 50px;
line-height: 50px;
background: #cf9999;
border: 1px solid #333;
text-align: center;
}
.left,.middle,.right{
float: left;
min-height: 500px;
line-height: 500px;
text-align: center;
}
.left{
margin-left: -100%;
200px;
background: #9999ff;
}
.right{
margin-left: -220px;
220px;
background: #ccffff;
}
.middle{
100%;
}
.middle-inner{
margin-left: 200px;
margin-right: 220px;
min-height: 500px;
background-color: #ccff99;
word-break: break-all;
}
.footer{clear: both;}
三 以上两种 经典布局以双飞翼为最佳，在此基础上进行各种变种，主要体现了浮动和margin负值的巧妙使用