上中下一栏板式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上中下三栏版式</title>
<style type="text/css">
*{margin: 0px;padding: opx;}
body{
font-size: 18px;
height: 1000px;
text-align: center;
}
#header{
height:10%;
background: peachpuff;
}
#main{
height: 80%;
background: pink;
}
#footer{
height: 10%;
background: salmon;
}
.wrap{
margin: 0 auto;
}
</style>
</head>
<body>
<header id="header" class="wrap">#header</header>
<section id="main" class="wrap"> section</section>
<footer id="footer" class="wrap">foot</footer>
</body>
</html>
左右两栏版式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
body{
text-align: center;
font-size: 18px;
}
.wrap{
width: 880px;
height: 800px;
}
#left{
width: 10%;
height: 100%;
float: left;
background: salmon;
}
#right{
width: 90%;
height: 100%;
background: #F08080;
}
</style>
</head>
<body>
<div class="wrap">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
左右两栏+页眉+页脚版式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: ;}
body{
font-size: 18px;
height: 900px;
width: 2800px;
}
#header{
height: 15%;
background: sandybrown;
}
#content{
height: 75%;
width: 100%;
}
#footer{
height: 10%;
background: #BC8F8F;
}
#side{
height: 100%;
width: 10%;
float: left;
background: darkgrey;
}
#main{
height: 100%;
width: 75%;
background: cornsilk;
}
</style>
</head>
<body>
<header id="header" class="wrap">header</header>
<section id="content" class="wrap">
<aside id="side">side</aside>
<article id="main">article</article>
</section>
<footer id="footer">footer</footer>
</body>
</html>
左右宽度固定中间自适应的左中右三栏版式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左右浮动+中间静态排版布局</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
body{
text-align: center;
font-size: 18px;
}
.wrap{
margin: 0 auto;
width: 900px;
}
#left{
float: left;
width: 150px;
height: 300px;
background: saddlebrown;
}
#right{
float: right;
width: 150px;
height: 300px;
background: #F08080;
}
#middle{
height: 300px;
background: azure;
margin: 0 150px;
}
</style>
</head>
<body>
<div class="wrap">
<div id="left">left</div>
<div id="right">right</div>
<section id="middle">#middle</section>
</div>
</body>
</html>
“双飞翼”布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>"双飞翼"布局</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
body{
text-align: center;
font-size: 18px;
}
.wrap{
width: 80%;
margin: 0 auto;
}
#midContainer{
width: 100%;
float:left ;
}
#middle{
height: 300px;
background: silver;
margin: 0 150px;
}
#left{
float: left;
width: 150px;
height: 300px;
background: darkkhaki;
margin-left: -100%;
}
#right{
float: left;
width: 150px;
height: 300px;
background: sandybrown;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="wrap">
<div id="midContainer">
<section id="middle">#middle</section>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
左右宽度固定中间自适应的左中右+页眉+页脚版式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>"双飞翼"布局</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
body{
text-align: center;
font-size: 18px;
}
#header{
height: 90px;
background: sandybrown;
}
.wrap{
width: 80%;
margin: 0 auto;
}
.clearfix:after{
content: "";
clear: both;
display: block;
visibility: hidden;
}
#midContainer{
width: 100%;
float:left ;
}
#middle{
height: 300px;
background: silver;
margin: 0 150px;
}
#left{
float: left;
width: 150px;
height: 300px;
background: darkkhaki;
margin-left: -100%;
}
#right{
float: left;
width: 150px;
height: 300px;
background: sandybrown;
margin-left: -150px;
}
#footer{
height: 10%;
background: #BC8F8F;
}
</style>
</head>
<body>
<header id="header" class="wrap">header</header>
<div class="wrap clearfix">
<div id="midContainer">
<section id="middle">#middle</section>
</div>
<aside id="left">left</aside>
<aside id="right">right</aside>
</div>
<footer id="footer" class="wrap"> footer</footer>
</body>
</html>
div+css布局与表格布局的比较
DIV+CSS实现了的分工;css样式可以重复使用,从而大大缩减页面代码,表现和内容完全分离,便于美工和开发人员,提高页面浏览速度。使用div和css布局的网页,结构清晰,更有利于搜索引擎的搜索。