html布局类型有哪些,html+css布局类型

一、单列布局

1.代码如下

单列布局

body{

margin:0;}

.box{

width:960px;

margin:0 auto;

}

.dinbu{

height:100px;

border:1px solid #f0f;

}

.zhongbu{

height:400px;

border:1px solid #f00;

}

.dibu{

height:100px;

border:1px solid #00f;

}

运行结果

二、双列布局

代码如下

双列布局(自适应布局 固定布局)

body{

margin:0;

}

.box{

width:960px;

margin:0 auto;

}

.zuo{

width:20%;

height:500px;

background-color:#f0f;

float:left;

}

.you{

width:80%;

height:500px;

background-color:#f00;

float:right;

}

运行结果

三、三列标签

代码如下

三列布局

body{

margin:0;

}

.box{

width:960px;

margin:0 auto;

position:relative;

}

.zuo{

width:200px;

height:500px;

background-color:#f0f;

position:absolute;

left:0;

top:0

}

.zhong{

height:500px;

background-color:#ff0;

margin:0 300px 0 200px;

}

.you{

width:300px;

height:500px;

background-color:#f00;

position:absolute;

right:0;

top:0

}

运行结果

四、混合布局

代码如下

混合布局

body{

margin:0;

}

.box{

width:960px;

margin:0 auto;

}

.dinbu{

height:100px;

background-color:#ccc;

}

.zhongbu{

height:400px;

background-color:#fff;

position:relative;

}

.zhongbu .zuo{

width:200px;

height:400px;

background-color:#f0f;

position:absolute;

left:0px;

top:0px

}

.zhongbu .czy{

height:400px;

background-color:#f00;

margin:0 310px 0 210px;

}

.zhongbu .you{

width:300px;

height:400px;

background-color:#00f;

position:absolute;

right:0px;

top:0px;

}

.dibu{

height:100px;

background-color:#cba;

}

运行结果

总结：

1、css布局主要是四种

2、排版布局需要掌握的知识

div 相关属性

float 浮动属性

position 定位属性

clear 清除浮动的应用