一、上中下一栏式
<style>
body{
margin:
0;
font-size:
20
px;
text-align:
center;
}
.wrap{
width:
900
px;
margin:
0
auto;
}
#header{
height:
100
px;
background:
#6cf;
}
#main{
height:
500
px;
background:
#ccffff;
}
#footer{
height:
80
px;
background:
#99ccff;
}
<
/style>
<body>
<header
id=
"header"
class=
"wrap"
>111
</header>
<section
id=
"main"
class=
"wrap"
>222
</section>
<footer
id=
"footer"
class=
"wrap"
>333
</footer>
</body>
二、左右两栏式
<style>
/* 混合浮动+普通流 */
#left{
width:
200
px;
height:
500
px;
background:
#ccffff;
float:
left;
}
#right{
height:
500
px;
background:
#ffcccc;
margin-left:
200
px;
}
<
/style>
/* 纯浮动式 */
.wrap{
margin:
0
auto;
width:
900
px;
overflow:
hidden;
}
#left{
width:
200
px;
height:
500
px;
background:
#ccffff;
float:
left;
}
#right{
height:
500
px;
width:
700
px;
background:
#ffcccc;
float:
left;
}
/* 绝对定位 */
.wrap{
margin:
0
auto;
width:
900
px;
position:
relative;
}
#left{
width:
200
px;
height:
500
px;
background:
#ccffff;
position:
absolute;
top:
0;
left:
0;
}
#right{
height:
500
px;
width:
700
px;
background:
#ffcccc;
position:
absolute;
top:
0;
right:
0;
}
<body>
<div
class=
"wrap"
>
<aside
id=
"left"
></aside>
<section
id=
"right"
></section>
</div>
</body>
三、左右两栏加页眉页脚
<style>
.wrap{
margin:
0
auto;
width:
900
px;
}
#header{
height:
100
px;
background:
#66ccff;
}
#main{
height:
500
px;
background:
#ffcccc;
}
#footer{
height:
80
px;
background:
#99ccff;
}
#left{
width:
200
px;
height:
100
%;
float:
left;
background:
#ccffff;
}
#right{
width:
700
px;
height:
100
%;
float:
right;
background:
#7cd677;
}
<
/style>
<body>
<header
id=
"header"
class=
"wrap"
></header>
<section
id=
"main"
class=
"wrap"
>
<aside
id=
"left"
></aside>
<section
id=
"right"
></section>
</section>
<footer
id=
"footer"
class=
"wrap"
></footer>
</body>
四、左中右三栏
<style>
.wrap{
margin:
0
auto;
width:
80
%;
}
#left{
width:
200
px;
height:
500
px;
background:
#ccffff;
float:
left;
}
#right{
width:
200
px;
height:
500
px;
background:
#ccffff;
float:
right;
}
#main{
height:
500
px;
background:
#ffcccc;
margin:
0
210
px;
}
<
/style>
<div
class=
"wrap"
>
<aside
id=
"left"
></aside>
<aside
id=
"right"
></aside>
<section
id=
"main"
></section>
</div>
五、左中右三栏之双飞翼(*)
<style>
.wrap{
margin:
0
auto;
width:
80
%;
}
#main{
width:
100
%;
float:
left;
background:
#ffcccc;
}
#left{
width:
200
px;
float:
left;
height:
500
px;
background:
#ccffff;
margin-left:
-100
%;
}
#right{
width:
200
px;
float:
left;
height:
500
px;
background:
#ccffff;
margin-left:
-200
px;
}
.content{
height:
500
px;
margin:
0
200
px;
}
<
/style>
<div
class=
"wrap"
>
<section
id=
"main"
>
<div
class=
"content"
>#content
</div>
</section>
<aside
id=
"left"
>#left
</aside>
<aside
id=
"right"
>#right
</aside>
</div>
六、左中右三栏之页眉页脚
<style>
.wrap{
margin:
0
auto;
width:
900
px;
}
#header{
height:
100
px;
background:
#66ccff;
}
#main{
height:
500
px;
background:
#ffcccc;
}
#footer{
height:
80
px;
background:
#99ccff;
}
#middle{
width:
100
%;
float:
left;
}
#left{
width:
200
px;
height:
100
%;
background:
#ccffff;
float:
left;
margin-left:
-100
%;
}
#right{
width:
200
px;
height:
100
%;
background:
#ccffff;
float:
left;
margin-left:
-200
px;
}
.content{
height:
500
px;
margin:
0
200
px;
}
<
/style>
<body>
<header
id=
"header"
class=
"wrap"
>header
</header>
<section
id=
"main"
class=
"wrap"
>
<section
id=
"middle"
>
<div
class=
"content"
>content
</div>
</section>
<aside
id=
"left"
>left
</aside>
<aside
id=
"right"
>right
</aside>
</section>
<footer
id=
"footer"
class=
"wrap"
>footer
</footer>
</body>