HTML5期末大作业：旅游网站设计——响应式的出国旅游定制(17页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
作品介绍
1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。响应式旅游定制公司网站模板html整套下载。包含：目的地、我们的旅程、精选酒店、关于我们、列表页、文章页等总共17个页面模板
2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。
3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
文章目录
- HTML5期末大作业：旅游网站设计——响应式的出国旅游定制(17页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
- 作品介绍
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、学习资料
- 五、完整源码
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>蓝精灵旅游</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/swiper.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<!-- 一键定制弹窗 -->
<div class="blueDialog"></div>
<!-- header start -->
<header>
<div class="container-fluid header">
<div class="row">
<div class="col-md-2 col-xs-4">
<a class="logo" href="javascript:;"><img src="img/logo.png" alt=""></a>
</div>
<div class="col-md-8 col-xs-8 col-md-offset-2 text-right">
+010 8476 6802
<button class="btn btn-lan" data-lan="1">En</button>
<a href="javascript:;" class="btn btn-custom" data-toggle="modal" data-target="#testModal">一键定制</a>
</div>
</div>
</div>
<!-- nav start -->
<nav class="navbar navbar-default">
</dd>
<dd><a href="#">法国</a></dd>
<dd><a href="#">德国</a></dd>
<dd><a href="#">意大利</a></dd>
<dd><a href="#">希腊</a></dd>
<dd><a href="#">西班牙</a></dd>
<dd><a href="#">葡萄牙</a></dd>
<dd><a href="#">芬兰</a></dd>
<dd><a href="#">瑞士</a></dd>
<dd><a href="#">挪威</a></dd>
</dl>
</li>
<li class="dropdown-item col-md-nav col-xs-4">
<dl>
<dt class="color-6">北美洲</dt>
<dd><a href="#">意大利</a></dd>
<dd><a href="#">美国</a></dd>
</dl>
<dl>
<dt class="color-7">南极洲</dt>
<dd><a href="#">南极</a></dd>
</dl>
<dl>
<dt class="color-8">南美洲</dt>
<dd><a href="#">阿根廷</a></dd>
<dd><a href="#">智利</a></dd>
<dd><a href="#">玻利维亚</a></dd>
<dd><a href="#">古巴</a></dd>
<dd><a href="#">巴西</a></dd>
<dd><a href="#">哥伦比亚</a></dd>
<dd><a href="#">秘鲁</a></dd>
</dl>
</li>
</ul>
</li>
<li class="col-md-nav dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
我们的旅程 <span class="glyphicon glyphicon-menu-down"></span>
</a>
<ul class="dropdown-menu dropdown-menu-2">
<li><a href="#">探险</a></li>
<li><a href="#">海滩度假</a></li>
<li><a href="#">城市印象</a></li>
<li><a href="#">游轮</a></li>
<li><a href="#">教育</a></li>
<li><a href="#">家庭旅游</a></li>
<li><a href="#">蜜月</a></li>
<li><a href="#">个人旅游</a></li>
<li><a href="#">Safari</a></li>
</ul>
</li>
<li class="col-md-nav"><a href="#">精选酒店</a></li>
<li class="col-md-nav dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
关于我们 <span class="glyphicon glyphicon-menu-down"></span>
</a>
<ul class="dropdown-menu dropdown-menu-2 dropdown-menu-3">
<li><a href="#">我们的故事</a></li>
<li><a href="#">优秀团队</a></li>
<li><a href="#">客户评价</a></li>
<li><a href="#">合作伙伴</a></li>
</ul>
</li>
</ul>
-6">
<a href="#">
<div class="blue_img_4">
<img src="img/p_img_8.jpg" alt="">
<div class="blue_img_4_title">冰岛</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-2 col-xs-6 col-md-offset-5 col-xs-offset-3">
<a class="btn btn_more" href="#">更多国家</a>
</div>
</div>
</div>
</div>
<div class="container-fluid blue_bg">
<div class="blue_title text-center">
<span>推荐的行程</span>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12">
<div class="blue_img_3">
<div class="blue_img_3_img">
<img src="img/t_img_1.jpg" alt="">
<p>托斯卡纳艳阳下托斯卡纳艳阳下托斯卡纳艳阳下托斯卡纳艳阳下托斯卡</p>
</div>
<div class="blue_img_3_day">
<span class="pull-left">7天</span>
<span class="pull-right">RMB 15800起</span>
</div>
<div class="blue_img_3_text">
<p>托斯卡纳位于意大利的中部，是意大利最美的大区，这里美丽的风景让人流连忘返...</p>
<a class="btn btn_detail pull-right" href="#">查看详情</a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="blue_img_3">
<div class="blue_img_3_img">
<img src="img/t_img_2.jpg" alt="">
<p>西班牙八天阳光之旅西班牙八天阳光之旅西班牙八天阳光之旅</p>
</div>
<div class="blue_img_3_day">
<span class="pull-left">7天</span>
<span class="pull-right">RMB 15800起</span>
</div>
<div class="blue_img_3_text">
<p>带有哥特风格的古老建筑与高楼大厦交相辉映，共同构成了巴塞罗那令人迷醉的天际线</p>
<a class="btn btn_detail pull-right" href="#">查看详情</a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="blue_img_3">
<div class="blue_img_3_img">
<img src="img/t_img_3.jpg" alt="">
<p>九天希腊雅典+爱琴海之旅</p>
</div>
<div class="blue_img_3_day">
<span class="pull-left">7天</span>
<span class="pull-right">RMB 15800起</span>
</div>
<div class="blue_img_3_text">
<p>雅典壮观的历史建筑和现代优雅建筑的鲜明对比，圣托里尼的蓝顶教堂和壮丽火山...</p>
<a class="btn btn_detail pull-right" href="#">查看详情</a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="blue_img_3">
<div class="blue_img_3_img">
<img src="img/t_img_4.jpg" alt="">
<p>七晚八天经典不丹幸福之旅</p>
</div>
<div class="blue_img_3_day">
<span class="pull-left">7天</span>
<span class="pull-right">RMB 15800起</span>
</div>
<div class="blue_img_3_text">
<p>托斯卡纳位于意大利的中部，是意大利最美的大区，这里美丽的风景让人流连忘返...</p>
<a class="btn btn_detail pull-right" href="#">查看详情</a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="blue_img_3">
<div class="blue_img_3_img">
<img src="img/t_img_5.jpg" alt="">
<p>奥地利小镇</p>
</div>
<div class="blue_img_3_day">
<span class="pull-left">7天</span>
<span class="pull-right">RMB 15800起</span>
</div>
<div class="blue_img_3_text">
<p>托斯卡纳位于意大利的中部，是意大利最美的大区，这里美丽的风景让人流连忘返...</p>
<a class="btn btn_detail pull-right" href="#">查看详情</a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="blue_img_3">
<div class="blue_img_3_img">
<img src="img/t_img_6.jpg" alt="">
<p>六日老挝慢之旅</p>
</div>
<div class="blue_img_3_day">
<span class="pull-left">7天</span>
<span class="pull-right">RMB 15800起</span>
</div>
<div class="blue_img_3_text">
<p>托斯卡纳位于意大利的中部，是意大利最美的大区，这里美丽的风景让人流连忘返...</p>
<a class="btn btn_detail pull-right" href="#">查看详情</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-xs-6 col-md-offset-5 col-xs-offset-3">
<a class="btn btn_more" href="#">更多行程</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="blue_title text-center">
<span>旅行类型</span>
</div>
<div class="container">
<div class="blue_type">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:;">
<div class="blue_img">
<img src="img/type_1.jpg" alt="">
</div>
<p>家庭出游</p>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<div class="blue_img">
<img src="img/type_2.jpg" alt="">
</div>
<p>个人旅游</p>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<div class="blue_img">
<img src="img/type_3.jpg" alt="">
</div>
<p>探险</p>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<div class="blue_img">
<img src="img/type_4.jpg" alt="">
</div>
<p>蜜月度假</p>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<div class="blue_img">
<img src="img/type_5.jpg" alt="">
</div>
<p>蜜月</p>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<div class="blue_img">
<img src="img/type_6.jpg" alt="">
</div>
<p>城市</p>
</a>
</div>
</div>
</div>
<div class="swiper-button swiper-button-prev"><span class="glyphicon glyphicon-menu-left"></span></div>
<div class="swiper-button swiper-button-next"><span class="glyphicon glyphicon-menu-right"></span></div>
</div>
</div>
</div>
<div class="container-fluid blue_bg">
<div class="blue_title text-center">
<span>是什么让我们与众不同</span>
</div>
<div class="container">
<article class="text-center col-md-10 col-md-offset-1">
<div class="blue_article_before">
<p>
蓝精灵旅行用自己对旅行的独特见解和经验帮您定制完美的旅程，您只需要告诉我们您的喜好，预算，旅行时间，我们经验丰富的旅行顾问，精心挑选出来的合作伙伴，经验丰富热情的导游帮您暂时的逃离现在的生活，我们总是可以为您做到...
<a class="btn_article_before" href="javascript:;">了解更多</a>
</p>
</div>
<div class="blue_article_after">
<p>我们有从世界各地精心挑选出来的合作伙伴，无论是奢华的酒店还是可靠的交通，一直到独一无二的旅行体验，我们已经准备好为您安排一场无缝衔接的完美旅行，其中也包括签证和旅行保险…</p>
<p>在众多的旅行目的地和旅行活动中，我们确保能够根据您的需求定制专属于您的豪华假期，并且最大限度的提高他们的质量和价值。通过对每一个细节的高度关注，我们相信我们会为您创造一个完美的假期</p>
<p>从您在蓝精灵旅行的问询开始，到旅行成行，最后直到您安全到家，我们都会为您提供24小时的个性化服务，包括快速响应的紧急热线以防您在旅途中有任何的紧急情况</p>
<p>我们将为您在旅行中安排所能争取到的最大权益，包括常旅客积分计划，免费客房升级，景点优先进入以及其他特权</p>
<p>我们有专业，快速，可信赖的机票预订系统，这样可以确保我们为您找到在您的旅行时间段内性价比最高的机票，同时还保证如果您的航班取消或者延误，我们可以在第一时间应对并且为您改签到最合适的航班
<a class="btn_article_after" href="javascript:;">返回</a>
</p>
</div>
</article>
</div>
</div>
<div class="container blue_still">
<div class="row">
<div class="col-md-3 col-xs-6">
<div class="blue_bg blue_still_box">
<div class="blue_still_img">
<img src="img/still_1.jpg" alt="">
</div>
<h2>豪华住宿</h2>
<p>蓝精灵旅行用自己对旅行的独特见解和经验帮您定制完美的旅程...</p>
<a href="#">查看更多</a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="blue_bg blue_still_box">
<div class="blue_still_img">
<img src="img/still_2.jpg" alt="">
</div>
<h2>舒适交通</h2>
<p>蓝精灵旅行用自己对旅行的独特见解和经验帮您定制完美的旅程...</p>
<a href="#">查看更多</a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="blue_bg blue_still_box">
<div class="blue_still_img">
<img src="img/still_3.jpg" alt="">
</div>
<h2>优秀团队</h2>
<p>蓝精灵旅行用自己对旅行的独特见解和经验帮您定制完美的旅程...</p>
<a href="#">查看更多</a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="blue_bg blue_still_box">
<div class="blue_still_img">
<img src="img/still_4.jpg" alt="">
</div>
<h2>客户评价</h2>
<p>We loved our entire trip to Athens,Santorini and Crete.One of the best organized tours we ever had!</p>
<a href="#">查看更多</a>
</div>
</div>
</div>
</div>
<footer class="container-fluid blue_bg blue_footer">
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12">
<div class="blue_footer_title">蓝精灵旅游</div>
<div class="row blue_footer_list">
<ul class="col-md-4 col-xs-4">
<li><a href="#">目的地</a></li>
<li><a href="#">我们的旅程</a></li>
<li><a href="#">竞选酒店</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<ul class="col-md-4 col-xs-4">
<li><a href="#">客人评价</a></li>
<li><a href="#">宣传手册</a></li>
<li><a href="#">优惠特选</a></li>
<li><a href="#">合作伙伴</a></li>
</ul>
<ul class="col-md-4 col-xs-4">
<li><a href="#">隐私政策</a></li>
<li><a href="#">条款条件</a></li>
</ul>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="blue_footer_title">订阅</div>
<div class="col-md-8 col-xs-12 blue_footer_take">
<div class="input-group">
<input type="text" class="form-control" placeholder="填写邮箱地址">
<span class="input-group-btn">
<button class="btn btn-default" type="button">发送</button>
</span>
</div>
<p>发送邮箱订阅我们，我们会根据您的喜好来进行定制旅程</p>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="blue_footer_title">联系我们</div>
<div class="blue_footer_tel">
<p>地址: 北京市朝阳区望京园402号楼<br>东亚望京中心B座3802</p>
<p>电话: +86-010-8476-6802</p>
<p>邮箱: contactus@bluespiritvoyages.com</p>
</div>
</div>
</div>
<div class="row blue_link">
<div class="col-md-8 col-xs-12">
<div class="blue_footer_link">
<a href="#"><img src="img/link-logo.png" alt=""></a>
</div>
<div class="blue_footer_link">
<a href="#"><img src="img/link-logo.png" alt=""></a>
</div>
<div class="blue_footer_link">
<a href="#"><img src="img/link-logo.png" alt=""></a>
</div>
<div class="blue_footer_link">
<a href="#"><img src="img/link-logo.png" alt=""></a>
</div>
</div>
<div class="col-md-4 col-xs-6 blue_code">
<div class="col-md-3 col-xs-12">
<img src="img/code_1.jpg" alt="">
<p>官方公众号</p>
<p>Blue Spirit</p>
</div>
<div class="col-md-3 col-xs-6">
<img src="img/code_2.jpg" alt="">
<p>官方微博</p>
<p>@Blue Spirit</p>
</div>
</div>
</div>
</div>
</footer>
<script src="js/swiper.min.js"></script>
<script src="js/main.js"></script>
<script src="js/dialog.js"></script>
</body>
</html>四、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、完整源码
【百度网盘-源码下载地址】
链接：https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
提取码：8888
六、更多源码
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
