700字范文 > HTML期末大作业 ~ 马尔代夫旅游网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程

HTML期末大作业 ~ 马尔代夫旅游网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程

时间：2020-04-25 22:11:41

HTML期末大作业 ~ 大学生旅游官网网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计~

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

大气响应式的出境旅游，自由行，国内旅游，签证旅游公司网站。关于HTML网页设计期末课程大作业实现~ 包含：出境游、自由行、国内游、签证、关于我们、新闻动态、联系我们等模块页面。

此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD, Vscode 所有编辑器均可使用)

网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断(提交时表单不能为空)

文章目录

HTML期末大作业 ~ 大学生旅游官网网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计~作品介绍一、作品演示 1.出境游2.、自由行3.关于我们4.新闻动态5.联系我们二、代码目录三、代码实现四、前端 `零基础入门到高级 `(视频+源码+开发软件+学习资料+面试题) 一整套 (教程)六、更多HTML期末大作业文章七、更多表白源码一、作品演示

1.出境游

2.、自由行

3.关于我们

4.新闻动态

5.联系我们

二、代码目录三、代码实现

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>响应式旅游公司官网类网站织梦模板(自适应手机端)</title><meta name="description" content="" /><meta name="keywords" content="" /><meta name="author" content="order by" /><link href="/skin/css/font-awesome.min.css" rel="stylesheet" type="text/css" /><link href="/skin/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><link href="/skin/css/animate.min.css" rel="stylesheet" type="text/css" /><link href="/skin/css/swiper.min.css" rel="stylesheet" type="text/css" /><link href="/skin/css/global.css" rel="stylesheet" type="text/css" /><link href="/skin/css/lib.css" rel="stylesheet" type="text/css" /><link href="/skin/css/style.css" rel="stylesheet" type="text/css" /><script src="/skin/js/global.js"></script><script src="/skin/js/cn.js"></script><script src="/skin/js/checkform.js"></script><script src="/skin/js/jquery-1.9.1.min.js"></script><script src="/skin/js/wow.min.js"></script><script src="/skin/js/bootstrap.min.js"></script><script src="/skin/js/swiper.jquery.min.js"></script></head><body><header id="header" class="clean trans"><div class="wrap1200" style="height: 100%;"><div id="logo" class="fl fz0 trans"> <a href="/"><img src="/skin/img/38c6ff29eb.png" class="block" height="100%"></a> </div><div id="menu" class="clean"> <a href="javascript:;" id="menu-btn" class="fr glyphicon glyphicon-menu-hamburger block-992"></a> <nav id="nav" class="fr flex flex-wrap relative text-center"> <a href="javascript:;" class="menu-close block clean relative block-992" rel="nofollow"> <i class="fr inherit fa fa-close middle"></i></a><div class="nav-item"><div class="relative"> <a href="/" class='item-a on' >首页</a> </div></div><div class="nav-item"><div class="relative"> <a href="/a/chujingyou/" class="item-a ">出境游</a> </div></div><div class="nav-item"><div class="relative"> <a href="/a/ziyouxing/" class="item-a ">自由行</a> </div></div><div class="nav-item"><div class="relative"> <a href="/a/guonayou/" class="item-a ">国内游</a> </div></div><div class="nav-item"><div class="relative"> <a href="/a/qianzheng/" class="item-a ">签证</a> </div></div><div class="nav-item"><div class="relative"> <a href="/a/guanyuwomen/" class="item-a ">关于我们</a> </div></div><div class="nav-item"><div class="relative"> <a href="/a/xinwendongtai/" class="item-a ">新闻动态</a> </div></div><div class="nav-item"><div class="relative"> <a href="/a/lianxiwomen/" class="item-a ">联系我们</a> </div></div> </nav></div></div></header><div id="website" class="trans"><div id="banner" class="banner relative fz0 swiper-container max-limit"><div class="swiper-wrapper"> <div class="item swiper-slide relative over"> <img src="/uploads/190418/1-1Z41P9512CC.jpg" class="max-w100 block trans relative"> </div><div class="item swiper-slide relative over"> <img src="/uploads/190418/1-1Z41P95204L1.jpg" class="max-w100 block trans relative"> </div> </div><a href="javascript:;" class="prev banner-btn trans fa fa-angle-left absolute" rel="nofollow"></a> <a href="javascript:;" class="next banner-btn trans fa fa-angle-right absolute" rel="nofollow"></a> </div><div class="blank15"></div><div class="blank15"></div><div id="products" class="index over"><div class="web-title text-center"><div class="title-0">经典线路</div><div class="title-1 ">Class Route</div></div><div class="categorys text-center hide-992"> <a href="/a/chujingyou/" class="trans-internal inline-block" rel="nofollow" cid=4>出境游 </a> <a href="/a/ziyouxing/" class="trans-internal inline-block" rel="nofollow" cid=4>自由行 </a> <a href="/a/guonayou/" class="trans-internal inline-block" rel="nofollow" cid=4>国内游 </a> </div><div class="categorys text-center wow fadeInUp block-992 relative"><div class="dropdown inline-block"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 所有 <span class="caret"></span> </button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li><a href="/a/chujingyou/" rel="nofollow" cid="1">出境游 </a></li><li><a href="/a/ziyouxing/" rel="nofollow" cid="1">自由行 </a></li><li><a href="/a/guonayou/" rel="nofollow" cid="1">国内游 </a></li></ul></div></div><div class="products-list clean max-limit swiper-container"><div class="swiper-wrapper"> <a class="item fl relative scale swiper-slide" fid="1" href="/a/chujingyou/faguo/18.html" uid="0,1,"><div class="over"><img src="/uploads/allimg/190419/1-1Z4191616060-L.jpg" alt="" class="max-w100 block scale-img trans"></div><div class="name absolute">迪拜经典线路</div></a><a class="item fl relative scale swiper-slide" fid="1" href="/a/chujingyou/24.html" uid="0,1,"><div class="over"><img src="/uploads/allimg/190419/1-1Z4191641430-L.jpg" alt="" class="max-w100 block scale-img trans"></div><div class="name absolute">泰国1</div></a><a class="item fl relative scale swiper-slide" fid="1" href="/a/chujingyou/23.html" uid="0,1,"><div class="over"><img src="/uploads/allimg/190419/1-1Z4191639500-L.jpg" alt="" class="max-w100 block scale-img trans"></div><div class="name absolute">法国一</div></a><a class="item fl relative scale swiper-slide" fid="1" href="/a/chujingyou/22.html" uid="0,1,"><div class="over"><img src="/uploads/allimg/190419/1-1Z419163U70-L.jpg" alt="" class="max-w100 block scale-img trans"></div><div class="name absolute">新加坡1</div></a><a class="item fl relative scale swiper-slide" fid="1" href="/a/chujingyou/21.html" uid="0,1,"><div class="over"><img src="/uploads/allimg/190419/1-1Z419162Q80-L.jpg" alt="" class="max-w100 block scale-img trans"></div><div class="name absolute">泰国</div></a></div></div><div class="opt text-center fz0 nowrap"> <a href="javascript:;" class="prev inline-block middle arrow arrow-left relative trans trans-internal" rel="nofollow"></a> <a href="/a/chujingyou/" class="inline-block middle more glyphicon glyphicon-th-large trans" title="查看更多列表"></a> <a href="javascript:;" class="next inline-block middle arrow arrow-right relative trans trans-internal" rel="nofollow"></a> </div></div><div class="blank20"></div><div class="blank25"></div><div id="index-about" class="relative clean max-limit"><div class="about-img fl fz0 text-center over scale"> <img src="/skin/img/aaa344fa4b.jpg" class="max-w100 trans scale-img"></div><div class="main absolute text-center"><table cellpadding="0" cellspacing="0" border="0" width="90%" height="100%" align="center"><tr><td valign="middle"><div class="web-title text-center"><div class="title-0">关于我们</div><div class="title-1 ">ABOUT US</div></div><div class="brief"> js代码()是IT资源下载与IT技能学习平台。我们拒绝滥竽充数，只提供精品IT资源！某某公司是一家集创意，创新，技术为一体综合型的网络公司，一支上百人的网站设计技术团队一直专注网站设计领域在未来我们将永不停步地研究网站设计技术。我们的设计理念：从商业角度，优化角度，美工角度的思维模式设计我们的客户稿，有灵魂的设计师为您打造创意精品网站... </div><div class="blank20"></div><div class="blank25"></div><a href="/a/guanyuwomen/" class="see-more block text-center" title="查看详情">查看详情 ></a></td></tr></table></div></div><div class="blank20"></div><div class="blank20"></div><div class="blank20"></div><div id="index-news"><div class="wrap1596 over border"> <div class="item fl clean"><div class="main fl border-box"><div class="news-date">19-04-19</div><div class="news-title block" href=""><a href="/a/xinwendongtai/changjianwenti/14.html">美国签证办理常见问题</a></div><div class="news-brief">办理美国B1(商务)/B2(旅游、探亲访友)非移民签证对护照有什么要求？答：一本护照，其有效期必须比预期到达美国的时间长六个月 2，照片有什么要求？</div></div><div class="img scale over fr relative right clean"><a href="/a/xinwendongtai/changjianwenti/14.html"><img src="/uploads/allimg/190419/1-1Z4191454090-L.jpg" class="max-w100 trans scale-img" /></a></div></div><div class="item fl clean"><div class="main fl border-box"><div class="news-date">19-04-18</div><div class="news-title block" href=""><a href="/a/xinwendongtai/9.html">苏格兰 • 爱丁堡经典路线</a></div><div class="news-brief">爱丁堡，这座始建于公元6世纪的城市位于苏格兰东海岸入海口是苏格兰的历史文化中心也是苏格兰的首府</div></div><div class="img scale over fr relative right clean"><a href="/a/xinwendongtai/9.html"><img src="/uploads/allimg/190418/1-1Z41Q049520-L.jpg" class="max-w100 trans scale-img" /></a></div></div><div class="clear"></div><div class="item fl clean"><div class="main fr border-box"><div class="news-date">19-04-18</div><div class="news-title block" href=""><a href="/a/xinwendongtai/8.html">西利曼大学人类学博物馆</a></div><div class="news-brief">西利曼大学人类学博物馆最新开张西利曼大学人类学博物馆最新开张西利曼大学人类学博物馆最新开张...</div></div><div class="img scale over fl relative left clean"><a href="/a/xinwendongtai/8.html"><img src="/uploads/allimg/190418/1-1Z41Q049120-L.jpg" class="max-w100 trans scale-img" /></a></div></div><div class="item fl clean"><div class="main fr border-box"><div class="news-date">19-04-18</div><div class="news-title block" href=""><a href="/a/xinwendongtai/7.html">一眼千年——纳米比亚全自驾17天，</a></div><div class="news-brief">浏览世界最震撼眼球的风景一眼千年纳米比亚全自驾17天，浏览世界最震撼眼球的风景...</div></div><div class="img scale over fl relative left clean"><a href="/a/xinwendongtai/7.html"><img src="/uploads/allimg/190418/1-1Z41Q04T60-L.jpg" class="max-w100 trans scale-img" /></a></div></div><div class="clear"></div></div><div class="blank25"></div><div class="blank25"></div><a class="see-more block text-center" href="/a/xinwendongtai/">查看更多 ></a> </div><div class="blank25"></div><div class="blank25"></div><footer id="footer"><div class="footer-nav"><div class="wrap1200 clean"> <div class="item fl"><div class="item-title">+ 出境游</div><div class="item-sub-title"><a href="/a/chujingyou/faguo/" title="法国" >法国</a></div><div class="item-sub-title"><a href="/a/chujingyou/xinjiapo/" title="新加坡" >新加坡</a></div><div class="item-sub-title"><a href="/a/chujingyou/taiguo/" title="泰国" >泰国</a></div></div><div class="item fl"><div class="item-title">+ 自由行</div></div><div class="item fl"><div class="item-title">+ 国内游</div></div><div class="item fl"><div class="item-title">+ 签证</div><div class="item-sub-title"><a href="/a/qianzheng/faguo/" title="亚洲" >亚洲</a></div><div class="item-sub-title"><a href="/a/qianzheng/ouzhou/" title="欧洲" >欧洲</a></div><div class="item-sub-title"><a href="/a/qianzheng/meizhou/" title="美洲" >美洲</a></div></div><div class="tel-item fr nowrap"><div class="tel"><i class="fa fa-phone fa-lg"></i> 020-88888888</div><div class="sub-tel">商务： 13988888888</div><div class="sub-tel">商务： 020-88888888</div></div></div></div><div class="copyright"></div></footer><script src="/skin/js/website.js"></script> </div></body></html>

四、前端零基础入门到高级(视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

# 五、源码获取 ❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就[点赞+好评+收藏] 三连支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号获取更多源码 !

六、更多HTML期末大作业文章

1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全)

2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全)

3.HTML期末学生大作业(9套)html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)

4.HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)

5.HTML期末大作业~基于HTML+CSS+JavaScript的旅游网站设计与实现