/*
1.为了避免繁琐的合并单元格，我们可以采取表格嵌套的方式处理。
我们将网页看成一个大表格，然后将网页分块，分块的网页可以用表格中的一行来完成
如果是一行一列可以使用<tr><td>...</td></tr>
如果是一行多列，可以使用表格嵌套<tr><td><table>.....</table></td></tr>
2.html的快捷键
3.查找替换
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑马旅游网</title>
</head>
<body>
<!-- 首先使用table，完成页面的总体布局-->
<table width="100%" align="centre" >
<!--第1行-->
<tr>
<td width="100%" align="centre">
<img src="image/top_banner.jpg">
</td>
</tr>
<!-- 第2行 -->
<tr>
<td>
<table width ="100%" align="center">
<tr>
<td align="left">
<img src="image/logo.jpg">
</td>
<td align="center">
<img src="image/search.png">
</td>
<td align="right">
<img src="image/hotel_tel.png">
</td>
</tr>
</table>
</td>
</tr>
<!-- 第3行-->
<tr>
<td>
<table align="center" width="100%" cellpadding="0" cellspacing="0" >
<tr bgcolor="#ffd700 " height="45" >
<td align="center" height="45">
首页
</td >
<td align= "center" height="45">
门票
</td>
<td align="center"height="45">
酒店
</td>
<td align="center" height="45">
香港车票
</td>
<td align="center" height="45">
出境游
</td>
<td align="center"height="45" >
国内游
</td>
<td align="center" height="45" >
港澳游
</td>
<td align="center" height="45" >
抱团定制
</td>
<td align="center"height="45" >
全球自由行
</td>
<td align="center"height="45" >
收藏排行榜
</td>
</tr>
</table>
</td>
</tr>
<!-- 第4行 滚动图片-->
<tr align="centre">
<td align="center" width="100%">
<img src="image/banner_3.jpg" width="100%">
</td>
</tr>
<!-- 第5行 -->
<tr>
<td>
<img src="image/icon_5.jpg"> <b>黑马精选 </b>
<hr color="#E6941A">
</td>
</tr>
<!-- 第6行 上海飞三亚-->
<tr>
<td>
<table align="center" width="100%">
<tr align="center">
<td >
<img src="image/jiangxuan_1.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥899
</p>
</td>
<td>
<img src="image/jiangxuan_1.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥899
</p>
</td>
<td>
<img src="image/jiangxuan_1.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥899
</p>
</td>
<td>
<img src="image/jiangxuan_1.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥899
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第7行 国内游-->
<tr>
<td>
<img src="image/icon_6.jpg"><b> 国内游</b>
<hr color="#EEC211">
</td>
</tr>
<!-- 第8行 国内游-->
<tr>
<td>
<table width="100%" align="centre">
<tr>
<td rowspan="2" align="centre">
<img src="image/guonei_1.jpg">
</td>
<td>
<img src="image/jingxuan_2.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥699
</p>
</td>
<td>
<img src="image/jingxuan_2.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥699
</p>
</td>
<td>
<img src="image/jingxuan_2.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥699
</p>
</td>
</tr>
<tr>
<td>
<img src="image/jingxuan_2.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥699
</p>
</td>
<td>
<img src="image/jingxuan_2.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥699
</p>
</td>
<td>
<img src="image/jingxuan_2.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥699
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第9行 境外游-->
<tr>
<td>
<img src="image/icon_7.jpg"> <b>境外游 </b>
<hr color="#E6941A">
</td>
</tr>
<!-- 第10行 -->
<tr>
<td>
<table width="95%" align="centre">
<tr>
<td rowspan="2" >
<img src="image/jiangwai_1.jpg" height="100%">
</td>
<td>
<img src="image/jiangxuan_3.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥699
</p>
</td>
<td>
<img src="image/jiangxuan_3.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥699
</p>
</td>
<td>
<img src="image/jiangxuan_3.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥699
</p>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥699
</p>
</td>
<td>
<img src="image/jiangxuan_3.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥699
</p>
</td>
<td>
<img src="image/jiangxuan_3.jpg">
<p>
上海直飞三亚五天四晚自由行
</p>
<p>
¥699
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第11行-->
<tr>
<td align="centre" width="100%">
<img src="image/footer_service.png" width="100%">
</td>
</tr>
<!-- 第12行-->
<tr>
<td>
<font color="#5f9ea0" size="2">
<center>
江苏传智播客教育科技股份有限公司
版权所有©Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
</center>
</font>
</td>
</tr>
</table>
</body>
</html>
HTML08使用table完成网站布局
最新推荐文章于 2023-07-11 12:40:37 发布
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
