html页面案例：旅游网站首页
案例分析：(纯html页面)
1.确定使用table布局
2.如果某一行只有一个单元格，则使用<tr><td></td><tr>
3.如果某一行有多个单元格，则使用
<tr>
<td>
<table></table>
</td>
</tr>
代码：
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 使用table布局 -->
<!-- 最外层的table，用于整个页面的布局 -->
<table width="100%">
<!-- 第1行 -->
<tr>
<td>
<img src="image/top_banner.jpg" width="100%">
</td>
</tr>
<!-- 第2行 -->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td><img src="image/logo.jpg" ></td>
<td><img src="image/search.png" ></td>
<td><img src="image/hotel_tel.png" ></td>
</tr>
</table>
</td>
</tr>
<!-- 第3行 -->
<tr>
<td>
<table width="100%" bgcolor="gold" align="center">
<tr height="45">
<td><a href="">首页</a></td>
<td>门票</td>
<td>门票</td>
<td>门票</td>
<td>门票</td>
<td>门票</td>
<td>门票</td>
<td>门票</td>
<td>门票</td>
<td>门票</td>
</tr>
</table>
</td>
</tr>
<!-- 第4行 -->
<tr>
<td>
<img src="image/banner_3.jpg" width="100%" >
</td>
</tr>
<!-- 第5行 -->
<tr>
<td>
<img src="image/icon_5.jpg">
精选
<hr color="gold">
</td>
</tr>
<!-- 第6行 -->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第7行 -->
<tr>
<td>
<img src="image/icon_6.jpg">
圈内游
<hr color="gold">
</td>
</tr>
<!-- 第8行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" >
</td>
<td>
<img src="image/jiangxuan_2.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第9行 -->
<tr>
<td>
<img src="image/icon_7.jpg" >
境外游
<hr color="gold">
</td>
</tr>
<!-- 第10行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/jiangwai_1.jpg" >
</td>
<td>
<img src="image/jiangxuan_3.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" >
<p><font size="1" color="">上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游）</font></p>
<font size="1" color="red">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第11行 -->
<tr>
<td>
<img src="image/footer_service.png" width="100%" align="center">
</td>
</tr>
<!-- 第11行 -->
<tr>
<td align="center" bgcolor="gold" height="45" width="100%">
<font size="1" color="gray">
版权所有©
</font>
</td>
</tr>
</table>
</body>
</html>
