web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)

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

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

作品介绍

1.网页作品简介方面：黑色通用的IT程序员资讯交流个人博客网站模板。喜欢的可以下载，文章页支持手机PC响应式布局。主要有：首页关于我们私人定制精选路线旅游攻略联系我们等总共6个页面html下载。

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

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

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

文章目录

web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)
作品介绍
一、作品演示
- 1.首页
- 2.关于我们
- 3.私人定制
- 4. 精选路线
- 5. 旅游攻略
- 6.联系我们
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业作品文章
七、更多表白源码

1.首页

2.关于我们

3.私人定制

4. 精选路线

5. 旅游攻略

6.联系我们

二、代码目录

三、代码实现


<!DOCTYPE HTML>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>XXX</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Free HTML5 Website Template by FreeHTML5.co" /><meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" /><!-- Facebook and Twitter integration --><meta property="og:title" content="" /><meta property="og:image" content="" /><meta property="og:url" content="" /><meta property="og:site_name" content="" /><meta property="og:description" content="" /><meta name="twitter:title" content="" /><meta name="twitter:image" content="" /><meta name="twitter:url" content="" /><meta name="twitter:card" content="" /><!-- Animate.css -->    <link rel="stylesheet" href="css/animate.css"><!-- Icomoon Icon Fonts--><link rel="stylesheet" href="css/icomoon.css"><!-- Bootstrap  --><link rel="stylesheet" href="css/bootstrap.css"><!-- Theme style  --><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/hwslider.css" /><!-- Modernizr JS --><script src="js/modernizr-2.6.2.min.js"></script><!-- FOR IE9 below --><!--[if lt IE 9]><script src="js/respond.min.js"></script><![endif]--></head><body><div class="fh5co-loader"></div><div id="page"><nav class="fh5co-nav" role="navigation"><div class="container"><div class="row"><div class="left-menu text-right menu-1"><ul><li><a href="index.html">首页</a></li><li><a href="about.html">关于我们</a></li><li><a href="services.html">私人定制</a></li></ul></div><div class="logo text-center"><div id="fh5co-logo"><a href="index.html"><img src="picture/logo.png.png" /></a></div></div><div class="right-menu text-left menu-1"><ul><li><a href="work.html">精选路线</a></li><li><a href="blog.html">旅游攻略</a></li><li><a href="contact.html">联系我们</a></li></ul></div></div></div></nav><!--<div class="overlay"></div>--><section><div id="hwslider" class="hwslider"><ul><li><a href="#"><img src="picture/1.jpg" alt=""></a></li><li><a href="#"><img src="picture/11.jpg" alt=""></a></li><li><a href="#"><img src="picture/111.jpg" alt=""></a></li></ul></div></section><div><section><div class="lightModuleOuterContent lightModuleOuterContent317"><div class="fk-editor simpleText   "><div style="text-align: center;"><span style="color: rgb(243, 243, 243); background-color: transparent;"><span style="font-size: 110px;"><font face="Arial">01</font></span></span></div></div></div><div class="lightModuleOuterContent lightModuleOuterContent318" style="position: relative;top: -118px;"><div class="fk-editor simpleText   "><div style="text-align: center;"><span style="font-size: 30px; background-color: transparent;"><font style="color: rgb(47, 47, 47);" color="#2f2f2f"><b>客户的满意是他们最大的追求</b></font></span></div></div></div><div class="lightModuleOuterContent lightModuleOuterContent319" style="    position: relative;top: -50px;"><div class="fk-editor simpleText  "><span style="font-size: 15px;"><font color="#7d7d7d"><span style="line-height: 29px;"><font style="color: rgb(125, 125, 125);" color="#7d7d7d"><div style="text-align: center;">旅行不是一次出行，也不只是一个假期。旅行是一个过程，一次发现。是一个自我发现的过程。真正的旅行让我们直面自我。</div><div style="text-align: center;">旅行不仅让我们看到世界，更让我们看到自己在其中的位置。</div></font></span></font></span></div></div></section><div id="fh5co-services" class="fh5co-bg-section"><div class="container"><div class="row"><div class="i_serList"><ul><li class="col-md-4 col-xs-12"><div class="kuang"><div class="img"><a class="brand_name" href="news/" style="display: inline;"><img src="picture/s.png"></a><a class="brand_detail" href="news/" style="display: none;"><img src="picture/s.png"></a></div><span><h2><a>行程定制</a></h2><p>择XXX，您不仅能享受到搭乘内河游轮游览欧洲的美妙体验，品尝地道中西美食、巡游人文景观。</p></span></div></li><li class="col-md-4 col-xs-12"><div class="kuang"><div class="img"><a class="brand_name" href="case/" style="display: inline;"><img src="picture/y.png"></a><a class="brand_detail" href="case/" style="display: none;"><img src="picture/y.png"></a></div><span><h2><a>贴心服务</a></h2><p>选择XXX，我们相信假期应该是彻底的放松。</p><br></span></div></li><li class="col-md-4 col-xs-12"><div class="kuang"><div class="img"><a class="brand_name" href="server/" style="display: inline;"><img src="picture/v.png"></a><a class="brand_detail" href="server/" style="display: none;"><img src="picture/v.png"></a></div><span><h2><a>贴心服务</a></h2><p>对于XXX的服务人员而言，我们重要的工作就是让您感受到舒适和照顾。</p></span></div></li></ul></div></div></div></div></div><div id="fh5co-project"><div class="container"><div class="row animate-box"><div class="col-md-8 col-md-offset-2 text-center fh5co-heading"><h2>游记推荐·<span style="font-size: 25px;"> Tourism</span></h2><p>旅行，自由。没有繁琐的计划，没有沉重的负担，只有最纯粹的态度。</p></div></div><div class="row"><div class="col-md-4 col-sm-6 fh5co-project animate-box" data-animate-effect="fadeIn"><a href="#"><img src="picture/work-1.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive"><h3>
桂林+阳朔3日跟团游</h3><span>￥780.00</span></a></div><div class="col-md-4 col-sm-6 fh5co-project animate-box" data-animate-effect="fadeIn"><a href="#"><img src="picture/work-2.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive"><h3>
泰国普吉岛5日跟团游</h3><span>￥1899.00</span></a></div><div class="col-md-4 col-sm-6 fh5co-project animate-box" data-animate-effect="fadeIn"><a href="#"><img src="picture/work-3.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive"><h3>
日本大阪+京都+横滨+东京6日跟团游</h3><span>￥5040.00</span></a></div><div class="col-md-4 col-sm-6 fh5co-project animate-box" data-animate-effect="fadeIn"><a href="#"><img src="picture/work-4.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive"><h3>三亚亚龙湾3-5日自由行(5冠)</h3><span>￥5040.00</span></a></div><div class="col-md-4 col-sm-6 fh5co-project  animate-box" data-animate-effect="fadeIn"><a href="#"><img src="picture/work-5.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive"><h3>
美国西海岸8日半自助游</h3><span>￥5460.00</span></a></div><div class="col-md-4 col-sm-6 fh5co-project animate-box" data-animate-effect="fadeIn"><a href="#"><img src="picture/work-6.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive"><h3>
丽江+香格里拉5日跟团游</h3><span>￥6000.00</span></a></div></div></div></div><div id="fh5co-testimonial" style="background-image:url(images/banner5.jpg);"><div class="overlay"></div><div class="container"><div class="row animate-box col-md-12 zi"><div class="col-md-7 col-md-offset-2  fh5co-heading tou "><h2>我们的服务/ <span style="font-size: 25px;">Our service</span> </h2><p style="color: #fff; font-size: 14px;">旅行不是一次出行，也不只是一个假期。旅行是一个过程，一次发现。是一个自我发现的过程。真正的旅行让我们直面自我。 旅行不仅让我们看到世界，更让我们看到自己在其中的位置。</p></div><div class="row animate-box col-md-7"><ul><li class="col-md-7"> 高效快捷的提供商系统应用，聚集了2000+家各地的供应商</li><li class="col-md-7">资源丰富，超过200万条旅游路线供你选择</li><li class="col-md-7">八大核心保障， 选我们更放心</li><li class="col-md-7">我们与旅游战略品牌联盟，合作了很多很多战略伙伴</li></ul></div><div class="col-md-5 tupian animate-box"><img src="picture/ac.jpg" /></div></div></div></div><div id="fh5co-blog" class="fh5co-bg-section" style="background-image: url(images/44.png);"><div class="container"><section><div class="lightModuleOuterContent lightModuleOuterContent317"><div class="fk-editor simpleText   "><div style="text-align: center;"><span style="color: rgb(208, 201, 201); background-color: transparent;"><span style="font-size: 110px;"><font face="Arial">02</font></span></span></div></div></div><div class="lightModuleOuterContent lightModuleOuterContent318" style="position: relative;top: -118px;"><div class="fk-editor simpleText   "><div style="text-align: center;"><span style="font-size: 30px; background-color: transparent;"><font style="color: rgb(47, 47, 47);" color="#2f2f2f"><b>让旅游者快乐愉快的旅行</b></font></span></div></div></div><div class="lightModuleOuterContent lightModuleOuterContent319" style="    position: relative;top: -50px;"><div class="fk-editor simpleText  "><span style="font-size: 15px;"><font color="#7d7d7d"><span style="line-height: 29px;"><font style="color: rgb(125, 125, 125);" color="#7d7d7d"><div style="text-align: center;">旅行不是一次出行，也不只是一个假期。旅行是一个过程，一次发现。是一个自我发现的过程。真正的旅行让我们直面自我。</div><div style="text-align: center;">旅行不仅让我们看到世界，更让我们看到自己在其中的位置。</div></font></span></font></span></div></div></section><div class="row si"><div class="col-lg-4 col-md-4  col-xs-12 a"><div class="fh5co-blog animate-box"><a href="news-show6.html"><img class="img-responsive" src="picture/img_bg_1.jpg" alt=""></a><div class="blog-text"><h3><a href="news-show6.html">普吉岛3天，独创美食地图+玩乐地图</a></h3><span class="posted_on">Nov. 15th</span><span class="comment"><a href="">21<i class="icon-speech-bubble"></i></a></span><p>穷游行程助手】规划行程利器，国内用不了谷歌地图，所以行前的规划特别辛苦。这个App有地图版，能很直观得在地图上看到你想去的那些地方都在哪里。使用方法很简单，把你当天想去的地方拖进当日行程里，然后让系统帮你优化路线，还可以自己调整，从此再也不用愁在路上浪费时间来回周转了。1、【芭东海滩】
普吉芭提雅，位于西海岸的位置，是普吉岛开发最完善最现代化的海滩。交通非常的方便，商业发达，酒店的品类也是最多的，无论是小民宿还是星级酒店都可以说是任君选择。但缺点就是：人多热闹，晚上会有点嘈，海水也相对</p><a href="news-show6.html" class="btn btn-primary">查看</a></div></div></div><div class="col-lg-4 col-md-4 col-xs-12 a"><div class="fh5co-blog animate-box"><a href="news-show5.html"><img class="img-responsive" src="picture/i.png" alt=""></a><div class="blog-text"><h3><a href="news-show5.html">欧洲法国+瑞士+意大利+梵蒂冈</a></h3><span class="posted_on">Nov. 15th</span><span class="comment"><a href="">21<i class="icon-speech-bubble"></i></a></span><p>参观世界三大博物馆之一的罗浮宫，聆听专业中文讲解，细赏丰富的艺术珍藏！
登上巴黎市内最高大楼–蒙帕纳斯大厦，360°欣赏花都美景！
跟随《花儿与少年》足迹 ，游览永恒之都- 罗马，全世界最小的独立国— 梵蒂冈！
漫游水城-威尼斯，蜿蜒水巷穿梭着威尼斯人的代步工具贡多拉游船！</p><a href="news-show5.html" class="btn btn-primary">查看</a></div></div></div><div class="col-lg-4 col-md-4 col-xs-12 a"><div class="fh5co-blog animate-box"><a href="news-show4.html"><img class="img-responsive" src="picture/qi.png" alt=""></a><div class="blog-text"><h3><a href="news-show4.html">丽江+香格里拉5日跟团游</a></h3><span class="posted_on">Nov. 15th</span><span class="comment"><a href="">21<i class="icon-speech-bubble"></i></a></span><p>给您的舌尖带来意想不到的“惊喜”！
安排一餐丽江特色菜肴--腊排骨火锅，健康、环保、添加名贵中药材，好吃不上火！
特别推荐：乘坐云南最长的索道---石卡雪山公园大索道，游览香格里拉让人叹为观止的蓝月山谷石卡雪山风景区！
这是一条“世外仙境水连天，桃源景色醉人间”的精品典藏路线！
精心为您提供真心、贴心、尽心、热心、虚心服务的“五心”级旅程！</p><a href="news-show4.html" class="btn btn-primary">查看</a></div></div></div></div></div></div><div id="fh5co-started"><div class="container"><div class="row animate-box ding"><div class="col-md-2 col-xs-4 col-sm-2 col-md-offset-2 fh5co-heading tu" style="text-align: center;"><img src="picture/1111.png" /></div><div class="col-md-7 col-xs-8 col-sm-7 col-md-offset-2  fh5co-heading tu"><h3>来一次说走走的旅行吧！</h3><p>旅行是一个过程，一次发现。是一个自我发现的过程。真正的旅行让我们直面自我。</p></div><div class="col-md-3 col-xs-12 col-sm-3 col-md-offset-2 tu"><form class="form-inline"><div class="col-md-10 col-md-offset-3 col-sm-10 tu"><a href="contact.html" class="btn btn-default btn-block ">联系我们</a></div></form></div></div><div class="row animate-box"></div></div></div><footer class="footer_wrapper" id="contact"><section class="lianxi"><div class="container"><div class="b-nav wow fadeInUp" data-wow-delay=".1s"><a href="index.html">首页</a><a href="about.html">关于我们</a><a href="services.html">私人定制</a><a href="work.html">精选路线</a><a href="blog.html">旅游攻略</a><a href="contact.html">联系我们</a></div><p class="copy">Copyright © 2020</p></div></section></footer><div class="gototop js-top"><a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a></div><!-- jQuery --><script type="text/javascript" src="js/jquery.min.js"></script><!-- jQuery Easing --><script src="js/jquery.easing.1.3.js"></script><!-- Bootstrap --><script src="js/bootstrap.min.js"></script><!-- Waypoints --><script src="js/jquery.waypoints.min.js"></script><!-- Main --><script src="js/main.js"></script><script type="text/javascript" src="js/jquery.hwslider.min.js"></script><script>/*banner*/$(function() {$("#hwslider").hwSlider({height: 190,autoPlay: true,arrShow: true,dotShow: true,touch: true});$("#hwslider1").hwSlider({height: 5,autoPlay: true,arrShow: true,dotShow: true,touch: true});});// $(".hiSlider').hiSlider({//   isFlexible: true,//  isSupportTouch: true,// });// var swiper = new Swiper('.swiper-container', {//      pagination: '.swiper-pagination',//      nextButton: '.swiper-button-next',//      prevButton: '.swiper-button-prev',//      slidesPerView: 5,//      paginationClickable: true,//      spaceBetween: 30//  });</script></body></html>

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

五、源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

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

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

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