<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>table布局</title></head><body marginheight="0px" marginwidth="0px"><table width="100%" height="950px" style="background-color: aqua"> ???<tr> ???????<td colspan="2" width="100%" height="10%" style="background-color: #9e5ea5" align="center">这是头部</td> ???</tr> ???<tr> ???????<td width="30" height="80%" style="background-color:blue" align="center">左菜单</td> ???????<td width="70" height="80%" style="background-color:blueviolet" align="center">右菜单</td> ???</tr> ???<tr> ???????<td colspan="2" width="100" height="10%" style="background-color:darkcyan">底部</td> ???</tr></table></body></html>
按 Ctrl+C 复制代码按 Ctrl+C 复制代码 <!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>div控制</title> ???<style> ???????div { ???????????border: 1px solid red; ???????????width: 400px; ???????????height: 150px; ???????????font-size: 35px; ???????} ???????.temple2 { ???????????/*隐藏超出的区域*/ ???????????overflow: hidden; ???????} ???????.temple3 { ???????????/*显示滚动条*/ ???????????overflow: scroll; ???????} ???????.temple4 { ???????????/*自动设置是否显示滚动条*/ ???????????overflow: auto; ???????} ???</style></head><body><div class="temple"> ???床前明月光，<br/> ???肚子饿得慌。<br/> ???举头望腊肉，<br/> ???低头闻香肠。</div><br/><br/><br/><br/><br/><br/><div class="temple2"> ???床前明月光，<br/> ???肚子饿得慌。<br/> ???举头望腊肉，<br/> ???低头闻香肠。</div><br/><br/><br/><br/><br/><br/><div class="temple3"> ???床前明月光，<br/> ???肚子饿得慌。<br/> ???举头望腊肉，<br/> ???低头闻香肠。</div><br/><br/><br/><br/><br/><br/><div class="temple4"> ???床前明月光，<br/> ???肚子饿得慌。<br/> ???举头望腊肉，<br/> ???低头闻香肠。</div></body></html>按 Ctrl+C 复制代码按 Ctrl+C 复制代码 <!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>div布局</title> ???<style type="text/css"> ???????body { ???????????margin: 0px; ???????} ???????#container { ???????????width: 100%; ???????????height: 950px; ???????????background-color: #9e5ea5; ???????} ???????#heading { ???????????width: 100%; ???????????height: 10%; ???????????background-color: #df89ff; ???????} ???????#content_menu { ???????????width: 30%; ???????????height: 80%; ???????????background-color: #ff309e; ???????????float: left; ???????} ???????#content_body { ???????????width: 70%; ???????????height: 80%; ???????????background-color: #7fffd4; ???????????float: left; ???????} ???????#footing { ???????????width: 100%; ???????????height: 10%; ???????????background-color: cadetblue; ???????????clear: both; ???????} ???</style></head><body><div id="container"> ???<div id="heading"> 头部</div> ???<div id="content_menu"> 内容菜单</div> ???<div id="content_body"> 内容主题</div> ???<div id="footing"> 底部</div></div></body></html>HTML学习笔记 div布局及table布局案例 第三节 （原创）参考使用表
原文地址：http://www.cnblogs.com/ttzzyy/p/7512978.html