这是一个关于旅游宣传页面的HTML模板示例，使用了表格布局进行内容组织。页面包括顶部横幅、logo、导航菜单、特色推荐和旅游分类等模块，展示了网页布局和嵌套表格的运用。
详情见xmind。
案例：制作旅游宣传页面
关键知识点：table的嵌套 ctrl+r替换内容 tr是行 td是每行里面的小格子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Travel</title>
</head>
<body>
<!--这个是最外层的table，用于整个页面的布局-->
<table width="100%" align="center">
<!--第一行-->
<tr>
<td>
<img src="image/top_banner.jpg" alt="" width="100%">
</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="">
</td>
<td>
<img src="image/hotel_tel.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
<!--第三行-->
<tr>
<td>
<table width="100%" align="center" bgcolor="#e9967a">
<tr align="center" height="45">
<td>
<a href="">首页</a>>
</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" width="100%" alt="">
</td>
</tr>
<!--第5行-->
<tr>
<td>
<img src="image/icon_5.jpg" alt="">
bed精选
<hr color="#e9967a">
</td>
</tr>
<!--第6行-->
<tr>
<td>
<table width="95%" align="center">
<tr >
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>玩快艇</p>
<font color="#e9967a">¥299</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>玩快艇</p>
<font color="#e9967a">¥299</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>玩快艇</p>
<font color="#e9967a">¥299</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>玩快艇</p>
<font color="#e9967a">¥299</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第7行-->
<tr>
<td>
<img src="image/icon_6.jpg" alt="">
国内游
<hr color="#e9967a">
</td>
</tr>
<!--第8行-->
<tr>
<td>
<table width="95%" align="center">
<tr >
<td rowspan="2">
<img src="image/guonei_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>住豪宅</p>
<font color="#e9967a">¥299</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>住豪宅</p>
<font color="#e9967a">¥299</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>住豪宅</p>
<font color="#e9967a">¥299</font>
</td>
</tr>
<tr >
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>住豪宅</p>
<font color="#e9967a">¥299</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>住豪宅</p>
<font color="#e9967a">¥299</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>住豪宅</p>
<font color="#e9967a">¥299</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第9行-->
<tr>
<td>
<img src="image/icon_7.jpg" alt="">
境外游
<hr color="#e9967a">
</td>
</tr>
<!--第10行-->
<tr>
<td>
<table width="95%" align="center">
<tr >
<td rowspan="2">
<img src="image/jiangwai_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>看大海</p>
<font color="#e9967a">¥599</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>看大海</p>
<font color="#e9967a">¥599</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>看大海</p>
<font color="#e9967a">¥599</font>
</td>
</tr>
<tr >
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>看大海</p>
<font color="#e9967a">¥599</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>看大海</p>
<font color="#e9967a">¥599</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>看大海</p>
<font color="#e9967a">¥599</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第11行-->
<tr>
<td>
<img src="image/footer_service.png" alt="" width="100%">
</td>
</tr>
<!--第12行-->
<tr align="center">
<td>
<font color="#a9a9a9" size="2">
江苏传智播客教育科技股份有限公司
版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
</font>
</td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
