900字范文 > div+css静态网页设计—全球旅游私人订制(6页) HTML+CSS+JS网页设计期末课程大作业

div+css静态网页设计—全球旅游私人订制(6页) HTML+CSS+JS网页设计期末课程大作业

时间：2020-05-08 21:14:25

HTML5期末大作业：全球旅游网站设计——全球旅游私人订制(6页)

文章目录

HTML5期末大作业：全球旅游网站设计——全球旅游私人订制(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" /><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="" /><link rel="stylesheet" href="css/animate.css"><link rel="stylesheet" href="css/icomoon.css"><link rel="stylesheet" href="css/bootstrap.css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/hwslider.css" /><script src="js/modernizr-2.6.2.min.js"></script></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><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><script type="text/javascript" src="js/jquery.min.js"></script><script src="js/jquery.easing.1.3.js"></script><script src="js/bootstrap.min.js"></script><script src="js/jquery.waypoints.min.js"></script><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>

四、获取更多源码

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

相关问题可以相互学习，可关注↓公Z号获取更多源码

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。