html css js 基础四（布局）

一：上中下一栏式布局

一栏式布局

.warp{width: 900px;margin: 0 auto;}

#header{height: 70px;background: #66ccff;}

#section{height: 500px;  background: #ccf;}

 #footer{height: 67px;background: #99cf;}

二：左右两栏式布局

左右两栏式布局

1：用浮动的方法

.warps{width: 900px;margin: 0 auto;overflow: hidden;}

.left{width: 200px;height: 500px;background: #ccf;float: left;}

.right{width: 700px;height: 500px;background:#ffc;float: right;}

2：用定位的方法

.warps{width: 900px;margin: 0 auto;position: relative;}

 .left{width: 200px;height: 500px;background: #ccf;position: absolute;top:0;left:0;}

 .right{width: 700px;height: 500px;background:#ffc;position: absolute;top:0;right:0;}

3：浮动+混合流

.warps{width: 900px;margin: 0 auto;}

.left{width: 200px;height: 500px;background: #ccf;float: left;}

.right{width: 700px;height: 500px;background:#ffc;margin-left: 200px;}

三：左右两栏+页眉页脚

左右两栏+页眉页脚

.warp1{width: 900px;margin: 0 auto;overflow: hidden;}

.header1{height: 80px;background: #66ccff;}

 .section1{height: 500px;background: #ffcccc;}

 .footer1{height: 80px;background: #99ccff}

 .left1{width: 200px;height: 100%;float: left;background: #ccf;}

 .right1{width: 700px;height: 100%;float: right;}

四：左中右三栏

左中右三栏

.warp2{margin: 0 auto;width: 80%;overflow: hidden;}

.left2{width: 200px;height: 500px;background: #ccf;float: left;}

.right2{width: 200px;height: 500px;background: #ccf;float: right;}

.section2{height: 500px;background: #ffc;margin: 0 200px;}

五：左中右三栏+页眉页脚

左中右三栏+页眉页脚

.wrap3{margin: 0 auto;width:80%;}

 .header3{height:60px;background: #66ccff;}

.section3{height:500px;background:#ffcccc;}

 .footer3{height:76px;background:#99ccff;}

 .middle{width: 100%;float: left;}

 .left3{width: 200px;height: 100%;float: left;background: #ccf;margin-left: -100%;}

 .right3{width: 200px;height: 100%;float: right;background: #ccf;margin-left: -200px;}

      .content{height: 500px;margin: 0 200px;}