很长时间不写界面了，现在喜欢写js，刚刚看了一片写界面布局的文章，感觉很精妙。叫圣杯布局，具体实现代码如下：
html:
<header><h4>Header内容区</h4></header>
<div class="container">
<div class="middle"><h4>中间弹性区</h4></div>
<div class="left"><h4>左边栏</h4></div>
<div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>Footer内容区</h4></footer>
css:
.container{
padding: 0 200px;
height:200px;
overflow:hidden;
}
.middle{
width: 100%;
height: 200px;
background-color: deeppink;
float:left;
}
.left{
position: relative;
left: -200px;
margin-left:-100%;
width: 200px;
height: 200px;
background-color: #cddc39;
float:left;
}
.right{
position: relative;
right: -200px;
margin-left:-200px;
width: 200px;
height: 200px;
background-color: #2196f3;
float:left;
}
header{
width: 100%;
height: 40px;
background-color: darkseagreen;
}
footer{
width: 100%;
height: 30px;
background-color: darkslategray;
}
圣杯
圣杯
