HTML案例：旅游网站首页
2024-05-11 06:54:11
案例：旅游网站首页
1.确定使用table来完成布局
2.如果某一行只有一个单元格，则使用
3.如果某一行有多个单元格
<tr>
<td>
<table> </table>
</td>
</tr>
代码实现
<!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="data:image/top_banner.jpg" width="100%" alt=""></td></tr><!--第2行--><tr><td><table width="100%" align="center"><tr><td><img src="data:image/logo.jpg" alt=""></td><td><img src="data:image/search.png" alt=""></td><td><img src="data:image/hotel_tel.png" alt=""></td></tr></table></td></tr><!-- 第3行--><tr><table width="100%" align="center"><tr bgcolor="#ffd700" align="center" height ="45" ><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></tr><!-- 第4行 轮播图--><tr><td><img src="data:image/banner_3.jpg" alt="" width="100%"></td></tr><!-- 第5行 老王精选--><tr><td><img src="data:image/icon_5.jpg" alt="" >老王精选<hr color="#ffd700"></td></tr><!-- 第6行 --><tr><td><table align="center" width="95%"><tr><td><img src="data:image/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p><font color="red">¥899</font></td><td><img src="data:image/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p><font color="red">¥899</font></td><td><img src="data:image/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p><font color="red">¥899</font></td><td><img src="data:image/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p><font color="red">¥899</font></td></tr></table></td></tr><!-- 第7行 国内游--><tr><td><img src="data:image/icon_6.jpg" alt="" >国内游<hr color="#ffd700"></td></tr><!-- 第8行 --><tr><td><table align="center" width="95%"><tr><td rowspan="2"><img src="data:image/guonei_1.jpg" alt=""></td><td><img src="data:image/jiangxuan_2.jpg" alt="" height="100%"><p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p><font color="red">¥699</font></td><td><img src="data:image/jiangxuan_2.jpg" alt="" height="100%"><p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p><font color="red">¥699</font></td><td><img src="data:image/jiangxuan_2.jpg" alt="" height="100%"><p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p><font color="red">¥699</font></td></tr><tr><td><img src="data:image/jiangxuan_2.jpg" alt="" height="100%"><p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p><font color="red">¥699</font></td><td><img src="data:image/jiangxuan_2.jpg" alt="" height="100%"><p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p><font color="red">¥699</font></td><td><img src="data:image/jiangxuan_2.jpg" alt="" height="100%"><p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p><font color="red">¥699</font></td></tr></table></td></tr><!-- 第9行 境外游--><tr><td><img src="data:image/icon_7.jpg" alt="" >境外游<hr color="#ffd700"></td></tr><!-- 第10行 --><tr><td><table align="center" width="95%"><tr><td rowspan="2"><img src="data:image/jiangwai_1.jpg" alt=""></td><td><img src="data:image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font></td><td><img src="data:image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font></td><td><img src="data:image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font></td></tr><tr><td><img src="data:image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font></td><td><img src="data:image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font></td><td><img src="data:image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">¥699</font></td></tr></table></td></tr><!-- 第11行 --><tr><td><img src="data:image/footer_service.png" alt="" width="100%"></td></tr><!-- 第12行 --><tr ><table width="100%"><td><tr bgcolor="#ffd700" align="center" height="45"><td><font color="gray" size="2">四川未央老王教育科技股份有限公司版权所有Copyright 2006-2018©, All Rights Reserved 川ICP备16007882</font></td></tr></td></table></tr></table>
</body>
</html>
网页显示：
HTML案例：旅游网站首页相关推荐
- HTML 练习案例旅游网站首页
1.确定使用table来完成布局 2.如果某一行只有一个单元格,则使用<tr><td></td><tr> 3.如果某一行有多个单元格 则使用 <t ...
- DIV+CSS实现旅游网站首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaWeb案例：旅游网站
当当当当~~~~欢迎大家阅读,通过这段时间对JavaWeb的学习,今天我们来做一个旅游网页 一:思路: 首先我们把网页分为三个版块:页眉,主体和页脚 其次再对将这三个大的版块划分成多个小版块 二:页 ...
- （附源码）node.js游云旅游网站 毕业设计231547
云游旅游网站的设计与实现 摘 要 信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题. ...
- HTML5期末大作业：新疆旅游模板网站设计——新疆旅游模板首页(1页) HTML+CSS+JavaScript
HTML5期末大作业:新疆旅游模板网站设计--新疆旅游模板首页(1页) HTML+CSS+JavaScript 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
- 把百度网站设为首页_大仙SEO：如何解决网站首页百度收录后被删除？【SEO案例】...
前天(5/20)看数据的时候,发现5118数据直线下降,跌的有些厉害,猜测网站应该出问题了.这个时候不要慌(内心实则慌的一批),在等等看,会不会是百度自身的一些调整.算了分析分析网站吧!site看网站 ...
- 项目管理案例分析-小型旅游网站开发项目
一.项目背景 当今社会已步入了一个全新的信息时代, 人类的每个活动都和"信息" 紧密的联系在一起,小至个人的 衣食住行,大及各个组织,单位之间的商务贸易,甚至国际间的交流, 合作都 ...
- 第九、十天：网站首页案例
网站首页项目: * {margin: 0;padding: 0;}.w {width: 1080px;margin: auto;}.header {height: 65px;}.nav li {lis ...
- 【计算机毕业设计】旅游网站源码
一.系统截图(需要演示视频可以私聊) 摘 要 随着人民生活水平的提高,旅游业已经越来越大众化,而旅游业的核心是信息,不论是对旅游管理部门.对旅游企业,或是对旅游者而言,有效的获取旅游信息,都显得特别 ...
最新文章
- js 原生跨页面通信_DOM操作是跨线程的你知道吗？
- Qt Creator定位项
- Expression Blend 定义RadioButton行为动画
- 设计和实时视图不一样_新宝骏“星际几何”设计理念，演绎不一样的跨界融合...
- NABCD model(test)
- 2017.10.6 单词 思考记录
- 微型计算机原理与接口技术 王建国,微型计算机原理与接口技术课后习题答案及部分定义总结(王建国主编)...
- oracle 查询表里信息_oracle查询表信息
- 23_触发器_库存与订单实战
- 堆栈用数组和用链表实现
- 实战！使用Docker安装OnlyOffice
- 【2018ECCV】Zero-Shot Deep Domain Adaptation 零样本深度域适应
- 课堂派作业第一题（附思路）已改完！
- 奇迹暖暖登录显示服务器满,奇迹暖暖登录不是全屏
- 什么是做空 什么是做空期权波动率?
- Windows系统SVG图片预览插件
- 【ThinkPad系统重装】
- 云计算已渗透大众生活，去中心化云计算发展前景广阔
- 页面实时显示当前时间
- 2022-10-31 网工进阶（三十三） IP组播-流量模型、组播概念、组播报文结构、组播地址与MAC、组播网络架构、组播服务模型、组播数据转发原理（RPF检查、组播分发树、组播协议介绍）
热门文章
- 私域流量如何运营？具体该怎么做？
- 【HDL系列】乘法器(6)——Radix-4 Booth乘法器
- 富二代阿里物流“菜鸟”千亿资金飞速翱翔
- caffe源码深入学习6：超级详细的im2col绘图解析，分析caffe卷积操作的底层实现
- bresenham直线画法
- 硅谷海盗:苹果与微软二十年来的恩怨情仇
- 大工14秋计算机英语3,大工19秋《大学英语3》在线测试1【满分答案】
- Maven创建自己的工程
- java基础巩固-宇宙第一AiYWM：为了维持生计，四大基础之计网_Part_1-1（计算机网络体系_七层模型五层模型TCP/IP四层模型、TCPUDPIP的故事【TCP三握四挥】）整起
- 《C++23》——起草