很简单的文档流布局
<!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>