HTML标签-综合案例-分析
案例：旅游网站首页
1.确定使用table来完成布局
2.如果某一行只有一个单元格，则使用<tr><td></td></tr>
3.如果某一行有多个单元格，则使用
<tr>
<td>
<table></table>
</td>
</tr>
HTML标签-综合案例-实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旅游网页</title>
</head>
<body>
<!--采用table来完成布局-->
<!--最外层的table，用于整个页面的布局-->
<table width="100%" align="center">
<!--第1行-->
<tr>
<td>
<img src="image/top_banner.jpg" width="100%">
</td>
</tr>
<!--第2行-->
<tr>
<td>
<table width="100%" align="center"><!--嵌套表格-->
<tr align="center"><!--align：对齐方式-->
<td>
<img src="image/logo.jpg" alt="">
</td>
<td>
<img src="image/search.png" alt="">
</td>
<td>
<img src="image/hotel_tel.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
<!--第3行-->
<tr>
<td>
<table width="100%" align="center"><!--嵌套表格-->
<tr bgcolor="#ffd700" align="center" height="45"><!--bgcolor:颜色 align：对齐方式 height:高度-->
<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" alt="" width="100%">
</td>
</tr>
<!--第6行-->
<tr>
<td>
<img src="image/icon_5.jpg" alt="" >
伟明精选
<hr color="ffd700" >
</td>
</tr>
<!-- 第6行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td>
<img src="image/jiangxuan_1.jpg">
<p>郭伟明婚房</p>
<font color="red">¥899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg">
<p>郭伟明婚房</p>
<font color="red">¥899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg">
<p>郭伟明婚房</p>
<font color="red">¥899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg">
<p>郭伟明婚房</p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第7行-->
<tr>
<td>
<img src="image/icon_6.jpg" alt="">
国内游
<hr color="ffd700">
</td>
</tr>
<!--第8行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" alt="" width="95%">
</td>
<td>
<img src="image/jiangxuan_2.jpg" height="100%">
<p>郭伟明三亚之旅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg">
<p>郭伟明三亚之旅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg">
<p>郭伟明三亚之旅</p>
<font color="red">¥699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg">
<p>郭伟明三亚之旅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg">
<p>郭伟明三亚之旅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg">
<p>郭伟明三亚之旅</p>
<font color="red">¥699</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第9行-->
<tr>
<td>
<img src="image/icon_7.jpg">
境外游
<hr color="ffd700">
</td>
</tr>
<!--第10行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td rowspan="2">
<img src="image/jiangwai_1.jpg" width="100%">
</td>
<td>
<img src="image/jiangxuan_3.jpg" height="100%">
<p>郭伟明好宅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg">
<p>郭伟明好宅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg">
<p>郭伟明好宅</p>
<font color="red">¥699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg">
<p>郭伟明好宅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg">
<p>郭伟明好宅</p>
<font color="red">¥699</font>
</td>
<td rowspan="2">
<img src="image/jiangxuan_3.jpg">
<p>郭伟明好宅</p>
<font color="red">¥699</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第11行-->
<tr>
<td>
<img src="image/footer_service.png" width="100%">
</td>
</tr>
<!--第12行-->
<tr>
<td bgcolor="#ffd700" align="center" height="40">
<font color="gray">
四川未央老王教育科技股份有限公司
版权所有Copyright 2006-2018©, All Rights Reserved 川ICP备16007882
</font>
</td>
</tr>
</table>
</body>
</html>
运行结果：
标签：三亚,郭伟明,之旅,yen,699,好宅,案例,HTML,综合 From： https://www.cnblogs.com/qihaokuan/p/16824570.html