学自w3cSchool的HTML教程：http://www.w3school.com.cn/html/html_layout.asp
1.使用<div>布局：
<head>
<style>
#header {
background-color:blue;
color:red;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
#notice {
width:40px;
color:black;
float:right;
}
</style>
</head>
<body>
<div id="header">
<h1>欢迎来到**大学程序设计类课程在线评测系统</h1>
</div>
<div id="nav">
在线练习<br>
在线测评<br>
查看成绩<br>
查看做题记录<br>
</div>
<div id="notice">
消息<br>
</div>
<div id="section">
<p>
本系统是来提高程序设计类课程能力的！
</p>
<p>
just for fun!
</p>
</div>
<div id="footer">
by zzj
</div>
</body>
2.用表格的HTML布局
注释：
<table> 元素不是作为布局工具而设计的。
<table> 元素的作用是显示表格化的数据。
使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：
<body>
<table class="lamp">
<tr>
<th>
<img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body>
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp td {
width:40px;
}
</style>