旅游网站首页—

旅游网站首页

使用利用当前所学html来制作一个静态的旅游网站首页

确定使用table来完成布局
如果某一行只有一个单元格，则使用
如果某一行有多个单元格，则使用

程序代码

<!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="data:image/top_banner.jpg" width="100%" align=""></td></tr><!-- 第二行 --><tr><td><table width="100%" align="center"><tr><td><img src="data:image/logo.jpg" align=""></td><td><img src="data:image/search.png" align=""></td><td><img src="data:image/hotel_tel.png" align=""></td></tr></table></td></tr><!-- 第三行 --><tr><td><table width="100%" align="center"><tr bgcolor="#ffd700" align="center" height = "45"><td><a href="">首页</a></td><td><a href="">门票</a></td><td><a href="">酒店</a></td><td><a href="">香港车票</a></td><td><a href="">出境游</a></td><td><a href="">国内游</a></td><td><a href="">港澳游</a></td><td><a href="">抱团定制</a></td><td><a href="">全球自由行</a></td><td><a href="">收藏排行榜</a></td></tr></table></td></tr><!-- 第四行 --><tr><td><img src="data:image/banner_3.jpg" align="" width="100%"></td></tr><!-- 第五行 黑马精选--><tr><td><img src="data:image/icon_5.jpg" align="">黑马精选<hr color="#ffd700"/></td></tr><!-- 第六行 --><tr><td><table align="center" width="95%"><tr><td><img src="data:image/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 899</font></td><td><img src="data:image/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 899</font></td><td><img src="data:image/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 899</font></td><td><img src="data:image/jiangxuan_1.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 899</font></td></tr></table></td></tr><!-- 第七行 国内游--><tr><td><img src="data:image/icon_6.jpg" align="">国内游<hr color="#ffd700"/></td></tr><!-- 第八行 --><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=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="data:image/jiangxuan_2.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="data:image/jiangxuan_2.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 699</font></td></tr><tr><td><img src="data:image/jiangxuan_2.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="data:image/jiangxuan_2.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="data:image/jiangxuan_2.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 699</font></td></tr></table></td></tr><!-- 第九行 境外游--><tr><td><img src="data:image/icon_7.jpg" align="">境外游<hr color="#ffd700"/></td></tr><!-- 第十行 --><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=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="data:image/jiangxuan_3.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="data:image/jiangxuan_3.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 699</font></td></tr><tr><td><img src="data:image/jiangxuan_3.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="data:image/jiangxuan_3.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 699</font></td><td><img src="data:image/jiangxuan_3.jpg" alt=""><p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p><font color="red">&yen; 699</font></td></tr></table></td></tr><!-- 第十一行 --><tr><td><img src="data:image/footer_service.png" align="" width="100%"></td></tr><!-- 第十二行 --><tr><td align="center" bgcolor="#ffd700" height="40"><font color="gray" size="2">江苏传智播客教育科技股份有限公司版权所有Copyright 2006-2020&copy;, All Rights Reserve 苏ICP备16007882</font></td></tr></table></body></html>

图片信息就不上传了，都是一些截屏

运行结果

旅游网站首页——html相关推荐

DIV+CSS实现旅游网站首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
HTML案例：旅游网站首页
案例:旅游网站首页 1.确定使用table来完成布局 2.如果某一行只有一个单元格,则使用 3.如果某一行有多个单元格 <tr> <td> <table> ...
HTML 练习案例旅游网站首页
1.确定使用table来完成布局 2.如果某一行只有一个单元格,则使用<tr><td></td><tr> 3.如果某一行有多个单元格则使用 <t ...
（附源码）node.js游云旅游网站毕业设计231547
云游旅游网站的设计与实现摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题. ...
HTML5期末大作业：新疆旅游模板网站设计——新疆旅游模板首页(1页) HTML+CSS+JavaScript
HTML5期末大作业:新疆旅游模板网站设计--新疆旅游模板首页(1页) HTML+CSS+JavaScript 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
一站式服务！图片+代码-构建移动版旅游网站页面
文章目录页面展示技术要点抽象化实现细节代码实现 HTML代码 CSS代码 common.css main.css 图片页面展示本项目将使用HTML5语义化结构标签来构建一个简单的页面.与 ...
重新定义旅游网站，米胖新版发布
还记得一年多之前,我在web 2.0 网站推荐这篇博客中提到了米胖.没多久,我认识了米胖的两位帅气又有才气的当家人.在多次聊天之后,我被他们的激情与专注深深地折服了,在那时我就坚信米胖 ...
C#asp.net旅游网站系统
C#asp.net旅游网站系统功能模块: 主要分为管理员和注册用户,注册用户可以查看所有景区并且购买景区门票, 查看周边景点介绍,查看酒店信息或者预定,查看周边特殊商品以及旅游咨询, 可以发布在线咨 ...
计算机毕业设计基于asp.net的旅游网站
本网站主要实现了旅游图片管理.旅游路线管理.旅游景点管理.旅游新闻管理.旅游须知管理.站内新闻管理.酒店信息管理.预订记录管理.系统管理等功能模块,系统使用Visual studio.net2010作 ...
C#毕设asp.net江山旅游网站管理系统（论文+源码）
1 项目简介 Hi,各位同学好呀,这里是卡莫! 今天向大家分享一个今年(2022)最新完成的毕业设计项目作品,[C#毕设asp.net江山旅游网站管理系统(论文+源码)] 学姐根据实现的难度和等级对项 ...

旅游网站首页——html

旅游网站首页

程序代码

图片信息就不上传了，都是一些截屏

运行结果

旅游网站首页——html相关推荐

最新文章

热门文章