码迷,mamicode.com
首页 > Web开发 > 详细

如何使用table布局静态网页

时间:2019-08-18 21:43:34      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:收藏   arc   联系方式   padding   轮播   抱团   cells   ngx   检测   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hope旅游网</title>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" 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="logo">
</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" >
<tr bgcolor="orange" align="center" height="35">
<td >
<a href="https://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_1.jpg" alt="轮播图" width="100%">
</td>
</tr>

<!--第五行-->
<tr>
<td>
<img src="image/icon_5.jpg" alt="" align="left">
黑马精选
<hr color="orange">
</td>
</tr>

<!--第六行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;899</font>
</td>
</tr>
</table>
</td>
</tr>

<!--第七行-->
<tr>
<td>
<img src="image/icon_6.jpg" alt="" align="left">
国内游
<hr color="orange">
</td>
</tr>

<!--第八行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;899</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;699</font>
</td>
</tr>
</table>
</td>
</tr>

<!--第九行-->
<tr>
<td>
<img src="image/icon_7.jpg" alt="" >
境外游
<hr color="orange">
</td>
</tr>

<!--第十行-->
<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>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;1099</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;1099</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;1099</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;1099</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;1099</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;1099</font>
</td>
</tr>
</table>
</td>
</tr>

<!--第十一行-->
<tr>
<td>
<img src="image/footer_service.png" alt="" width="100%">
</td>
</tr>


<!--第十二行-->
<tr >
<td align="center" bgcolor="orange" height="10px">
<font color="gray" size="2" >
江苏衡谱检测有限公司 版权所有Copyright 2006-2019
&copy; All Rights Reserved 苏ICP备16007882
</font>
</td>
</tr>


</table>
</body>
</html>

如何使用table布局静态网页

标签:收藏   arc   联系方式   padding   轮播   抱团   cells   ngx   检测   

原文地址:https://www.cnblogs.com/newcityboy/p/11373842.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!