网页布局:
table方式
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0"> //宽度500 边界为0
<tr>
<td colspan="2" style="background-color:#99bbbb;"> //colspan 和并列
<h1>网页主标题</h1>
</td> //列开头
</tr> //行开头
<tr valign="top"> //valign 垂直对齐
<td style="background-color:#ffff99;100px;text-align:top;"> //设置列样式
<b>菜单</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;400px;text-align:top;">
内容都在这里</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;"> //和并列
我是底部标签</td>
</tr>
</table>
</body> //width 宽度 height 高度 align排列 top顶部 background背景
</html>
<!DOCTYPE html>
<html>
<head>
//div标-可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
签
<style type="text/css">//样式类型-->
div#container{500px} //容器宽度 布局箱子宽度 float浮动-->
div#header {background-color:#99bbbb;}//定义页眉属性
div#menu {background-color:#ffff99; height:200px; 100px; float:left;} 定义菜单属
div#content {background-color:#EEEEEE; height:200px; 400px; float:left;} 定义内容属性
div#footer {background-color:#99bbbb; clear:both; text-align:center;} //页脚
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;} //定义下边距 字号-->
ul {margin:0;} //定义边缘-->
li {list-style:none;}//列表式-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>