HTML标签_综合案例_分析与HTML标签_综合案例_实现
HTML标签_综合案例_分析
1. 确定使用table来完成布局
2. 如果某一行只有一个单元格，则使用<tr><td></td></tr>
3. 如果某一行有多个单元格，则使用
<tr>
<td>
<table></table>
</td>
</tr>HTML标签_综合案例_实现
效果图
完整HTML代码
<!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="image/top_banner.jpg"width="100%" alt="" > </td> </tr> <!--第二行--> <tr> <td> <table width="100%" align="center"> <tr> <td> <img src="image/logo.jpg" alt=""> </td> <td> <img src="image/search.png"alt="" align="center"> </td> <td> <img src="image/hotel_tel.png"> </td> </tr> </table> </td> </tr> <!--第三行--> <tr> <td> <table width="100%" align="center"> <tr bgcolor="#ffd700" align="center" height="45"> <td> <a href="http://www.baidu.com">首页</a> </td> <td> 门票 </td> <td> 酒店 </td> <td> 香港车票 </td> <td> 出境游 </td> <td> 国内游 </td> <td> 港澳游 </td> <td> 抱团定制 </td> <td> 全球自由行 </td> <td> 收藏排行榜 </td> </tr> </table> </td> </tr> <!--第四行--> <tr> <td> <img src="image/banner_3.jpg" width="100%"> </td> </tr> <!--第五行--> <tr> <td> <img src="image/icon_5.jpg"> 黑马精选 <hr color="yellow"> </td> </tr> <!--第6行--> <tr> <ta> <table width="95%" align="center"> <tr> <td> <img src="image/jiangxuan_1.jpg"> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥899</font> </td> <td> <img src="image/jiangxuan_1.jpg"> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥899</font> </td> <td> <img src="image/jiangxuan_1.jpg"> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥899</font> </td> <td> <img src="image/jiangxuan_1.jpg"> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥899</font> </td> </tr> </table> </ta> </tr> <!--国内游--> <tr> <td> <img src="image/icon_6.jpg"> 国内游 <hr color="yellow" > </td> </tr> <!--第八行--> <tr> <td> <table align="center" width="95%"> <tr> <td rowspan="2"> <img src="image/guonei_1.jpg" alt=""> </td> <td> <img src="image/jiangxuan_2.jpg" alt="" height="100%"> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <!--第9行--> <tr> <ta> <img src="image/icon_7.jpg"> 境外游 <hr color="yellow" > </ta> </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" alt="" height="100%"> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <!--第11行--> <tr> <td> <img src="image/footer_service.png" alt="" width="100%"> </td> </tr> <!-- 第12行 --> <tr> <td > <table align="center" bgcolor="#ffd700" height="100%" bgcolor="#ffd700" size="2"> <tr> <td> 江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882 </td> </tr> </table> </td> </tr> </table> </body> </html>
江苏传智播客教育科技股份有限公司
版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
