1、确定使用table来完成布局
2、如果某一行只有一个单元格，则使用<tr><td></td><tr>
3、如果某一行有多个单元格 则使用
<tr>
<td>
<table></table>
</td>
<tr>`
代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑马旅游网</title>
</head>
<body>
<!-- 采用table来完成布局 -->
<!-- 最外层的table 用于整个页面的布局 -->
<table width="100%" align="center">
<!-- 第一行 -->
<tr>
<td>
<img src="picture/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="picture/logo.jpg" alt="">
</td>
<td>
<img src="picture/search.png" alt="">
</td>
<td>
<img src="picture/hotel_tel.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>
<table width="100%" align="center">
<tr bgcolor="yellow" align="center" height="45">
<td>
<a href="">首页</a>
</td>
<td>
<a href="">门票</a>
</td>
<td>
<a href="">酒店</a>
</td>
<td>
<a href="">香港车票</a>
</td>
<td>
<a href="">出境游</a>
</td>
<td>
<a href="">国内游</a>
</td>
<td>
<a href="">港澳游</a>
</td>
<td>
<a href="">抱团定制</a>
</td>
<td>
<a href="">全球自由行</a>
</td>
<td>
<a href="">收藏排行榜</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第四行 轮播图-->
<tr>
<td>
<img src="picture/banner_3.jpg" width="100%" alt="">
</td>
</tr>
<!-- 第五行-->
<tr>
<td>
<img src="picture/icon_5.jpg" alt="">
黑马精选
<hr color="yellow">
</td>
</tr>
<!-- 第六行 -->
<tr>
<td>
<table align="center" width="95%">
<tr width="100%">
<td>
<img src="picture/jiangxuan_1.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="picture/jiangxuan_2.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="picture/jiangxuan_3.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="picture/jiangxuan_4.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>
<img src="picture/icon_6.jpg" alt="">
国内游
<hr color="yellow">
</td>
</tr>
<!-- 第八行 -->
<tr>
<td>
<table align="center" width="95%">
<tr width="100%">
<td rowspan="2">
<img src="picture/guonei_1.jpg" alt="">
</td>
<td>
<img src="picture/jiangxuan_2.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="picture/jiangxuan_2.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="picture/jiangxuan_2.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
</tr>
<tr width="100%">
<td>
<img src="picture/jiangxuan_2.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="picture/jiangxuan_2.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="picture/jiangxuan_2.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第九行 -->
<tr>
<td>
<img src="picture/icon_7.jpg" alt="">
境外游
<hr color="yellow">
</td>
</tr>
<!-- 第十行 -->
<tr>
<td>
<table align="center" width="95%">
<tr width="100%">
<td rowspan="2">
<img src="picture/jiangwai_1.jpg" alt="">
</td>
<td>
<img src="picture/jiangxuan_3.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="picture/jiangxuan_3.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="picture/jiangxuan_3.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
</tr>
<tr width="100%">
<td>
<img src="picture/jiangxuan_3.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="picture/jiangxuan_3.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
<td>
<img src="picture/jiangxuan_3.jpg" alt="">
<p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第十一行 -->
<tr>
<td>
<img src="picture/footer_service.png" alt="">
</td>
</tr>
<!-- 第12行 -->
<tr>
<td>
<center>
<font color="gray" size="2"> 黑马程序员bilibili ©</font>
</center>
</td>
</tr>
</table>
</body>
</html>
图片来源
链接：https://pan.baidu.com/s/1jM_tPKBCPK2TS9jmkWC7Nw
提取码：1234
