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="../img/tope.jpg" width="100%">
</td>
</tr>
<!--第2行-->
<tr>
<td>
<table width="100%" align="center"><!--嵌套表格-->
<tr align="center"><!--align：对齐方式-->
<td>
<img src="../img/logo.jpg" alt="">
</td>
<td>
<img src="../img/search.png" alt="">
</td>
<td>
<img src="../img/hotel.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="../img/banner.jpg" alt="" width="100%">
</td>
</tr>
<!--第6行-->
<tr>
<td>
<img src="../img/icon.jpg" alt="" >
伟明精选
<hr color="ffd700" >
</td>
</tr>
<!-- 第6行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td>
<img src="../img/jianxuan.jpg">
<p>郭伟明婚房</p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jianxuan.jpg">
<p>郭伟明婚房</p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jianxuan.jpg">
<p>郭伟明婚房</p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jianxuan.jpg">
<p>郭伟明婚房</p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第7行-->
<tr>
<td>
<img src="../img/iconk.jpg" alt="">
国内游
<hr color="ffd700">
</td>
</tr>
<!--第8行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td rowspan="2">
<img src="../img/guone.jpg" alt="" width="95%">
</td>
<td>
<img src="../img/jian.jpg" height="100%">
<p>郭伟明三亚之旅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="../img/jian.jpg">
<p>郭伟明三亚之旅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="../img/jian.jpg">
<p>郭伟明三亚之旅</p>
<font color="red">¥699</font>
</td>
</tr>
<tr>
<td>
<img src="../img/jian.jpg">
<p>郭伟明三亚之旅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="../img/jian.jpg">
<p>郭伟明三亚之旅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="../img/jian.jpg">
<p>郭伟明三亚之旅</p>
<font color="red">¥699</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第9行-->
<tr>
<td>
<img src="../img/iconm.jpg">
境外游
<hr color="ffd700">
</td>
</tr>
<!--第10行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td rowspan="2">
<img src="../img/jiang.jpg" width="100%">
</td>
<td>
<img src="../img/xuan.jpg" height="100%">
<p>郭伟明好宅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="../img/xuan.jpg">
<p>郭伟明好宅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="../img/xuan.jpg">
<p>郭伟明好宅</p>
<font color="red">¥699</font>
</td>
</tr>
<tr>
<td>
<img src="../img/xuan.jpg">
<p>郭伟明好宅</p>
<font color="red">¥699</font>
</td>
<td>
<img src="../img/xuan.jpg">
<p>郭伟明好宅</p>
<font color="red">¥699</font>
</td>
<td rowspan="2">
<img src="../img/xuan.jpg">
<p>郭伟明好宅</p>
<font color="red">¥699</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第11行-->
<tr>
<td>
<img src="../img/service.jpg" 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/hungui/p/16831670.html