top{background-color:blue;width:100%;height:100px;}
main{background-color:black;overflow:hidden;margin:0 auto;}
left{ background-color:red;;width:200px;height:500px}
right{background-color:yellow;width:100%;float:left;margin-left:210px;height:500px}
foot{background-color:pink;width:100%;height:50px}
main{background-color:black;overflow:hidden;margin:0 auto;}
left{ background-color:red;;width:200px;height:500px}
right{background-color:yellow;width:100%;float:left;margin-left:210px;height:500px}
foot{background-color:pink;width:100%;height:50px}
任务三是先加载右边后加载左边所以我将.left绝对定位之后top:50px
.top{height:50px;background:gray;}
.main{height:500px;background:red;}
.left{ height:500px;background:blue;width:200px;position:absolute;top:50px;}
.right{height:500px;background:green;margin:0 0 0 210px;}
.foot{height:50px;background:orange;}
.top{height:50px;background:gray;}
.main{height:500px;background:red;}
.left{ height:500px;background:blue;width:200px;position:absolute;top:50px;}
.right{height:500px;background:green;margin:0 0 0 210px;}
.foot{height:50px;background:orange;}
.main{ width:880px; height:600px; margin:0 auto}
.left{ width:300px; height:550px; background:#ccc;float:left; 【任务1】}/*高度缩小50px,就有底部空间了*/
.right{ width:550px; height:550px; background:pink;float:right; 【任务2】}/*高度缩小50px,就有底部空间了,宽度之和小于父级的宽度就有中间的空间了,父级的宽高少于页面的宽高就有四周的空间了*/
.left{ width:300px; height:550px; background:#ccc;float:left; 【任务1】}/*高度缩小50px,就有底部空间了*/
.right{ width:550px; height:550px; background:pink;float:right; 【任务2】}/*高度缩小50px,就有底部空间了,宽度之和小于父级的宽度就有中间的空间了,父级的宽高少于页面的宽高就有四周的空间了*/
.top{ width:100%; height:100px; background:#666}
.main{ width:100%; height:600px; background:#F00;}
.foot{ width:100%; height:100px; background:#F60;}
.left{ width:200px; height:600px; background:#399; position:absolute; }
.right{ height:600px; background:#96C; position:absolute; left:210px; }
.main{ width:100%; height:600px; background:#F00;}
.foot{ width:100%; height:100px; background:#F60;}
.left{ width:200px; height:600px; background:#399; position:absolute; }
.right{ height:600px; background:#96C; position:absolute; left:210px; }