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 © </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号 获取更多源码 !