很简单的文档流布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin:0;
}
/*头部开始*/
#head{
height:200px;
background-color: pink;
}
#top{
height:50px;
background-color: blue;
}
#logo{
height:100px;
background-color: green;
}
#menu{
height:50px;
background-color: yellow;
}
#top_content_left{
width:100px;
height:100%;
float:left;
background-color: red;
}
#top_content_right{
width:100px;
height:100%;
float:right;
background-color: red;
}
#logo_content_left{
height:100%;
background-color: pink;
width:250px;
float:left;
}
#logo_content_right{
height:100%;
background-color: pink;
width:400px;
margin-left: 300px;
}
/*头部结束*/
/* 内容开始 */
#main{
height:700px;
background-color: gray;
}
#main_content_flash{
height:200px;
width:100%;
background-color: green;
}
#main_content_iframe{
height:500px;
width:100%;
background-color: yellow;
}
/* 内容结束 */
/* 脚部开始 */
#footer{
height:100px;
background-color: black;
}
#footer_content_link{
height:20px;
width:100px;
background-color: red;
}
#footer_content_links{
height:30px;
width:800px;
background-color: blue;
}
#footer_content_powered{
height:50px;
width:100px;
margin: 0 auto;
background-color: pink;
}
/* 脚部结束 */
.auto{
width:1000px;
margin:0 auto;
height:100%;
}
</style>
</head>
<body>
<!--头部-->
<div id="head">
<div id="top">
<div id="top_content" class="auto">
<div id="top_content_left">网站简要说明</div>
<div id="top_content_right">微信微博关注</div>
</div>
</div>
<div id="logo">
<div id="logo_content" class="auto">
<div id="logo_content_left">网站logo</div>
<div id="logo_content_right">搜索框</div>
</div>
</div>
<div id="menu">
<div id="menu_content" class="auto"></div>
</div>
</div>
<!--头部-->
<!--内容区-->
<div id="main">
<div id="main_content" class="auto">
<div id="main_content_flash">flash或轮番图</div>
<div id="main_content_iframe">商品iframe窗口，图片库的方式来完成剩余的工作即可</div>
</div>
</div>
<!--内容区-->
<!--脚部-->
<div id="footer">
<div id="footer_content" class="auto">
<div id="footer_content_link">友情链接</div>
<div id="footer_content_links">友情链接们</div>
<div id="footer_content_powered" >版权+ICP 备案</div>
</div>
</div>
<!--脚部-->
</body>
</html>
