HTML期末大作业~基于HTML+CSS+JavaScript的旅游网站设计与实现
HTML期末作业-旅游网页作业HTML+CSS+JavaScript实现，共有登录 首页 预定 套餐 服务 相册 评价 联系我们等页面
旅游网站的页面通常设计得很宽，而且搭配非常有吸引力的图片，目的是为了突出视觉吸引力。今天这篇文章向大家分享最佳旅游网站设计案例，一起欣赏这些精美的网站。
作品演示
1.登录
2.首页
3.预定
4.套餐
5.服务
6.相册
7.评价/联系我们
文件目录
代码实现
头部HTML
<!-- 头部 -->
<header>
<div id="menu-bar" class="fas fa-bars"></div>
<a href="#" class="logo"><span>J</span>acky</a>
<nav class="navbar">
<a href="#home">首页</a>
<a href="#book">预定</a>
<a href="#packages">套餐</a>
<a href="#services">服务</a>
<a href="#gallery">相册</a>
<a href="#review">评价</a>
<a href="#contact">联系我们</a>
</nav>
<!-- 图标 -->
<div class="icons">
<i class="fas fa-search" id="search-btn"></i>
<i class="fas fa-user" id="login-btn"></i>
</div>
<!-- 搜索框 -->
<form action="" class="search-bar-container">
<input type="search" id="search-bar" placeholder="search here...">
<label for="search-bar" class="fas fa-search"></label>
</form>
</header>
登录表单HTML
<!-- 登录表单 -->
<div class="login-form-container">
<i class="fas fa-times" id="form-close"></i>
<form action="">
<h3>login</h3>
<input type="email" class="box" placeholder="enter your email">
<input type="password" class="box" placeholder="enter your password">
<input type="submit" value="login now" class="btn">
<input type="checkbox" id="remember">
<label for="remember">remember me</label>
<p>forget password? <a href="#">click here</a></p>
<p>don't have and account? <a href="#">register now</a></p>
</form>
</div>
首页视频banner区html
<!-- 首页视频banner区 -->
<section class="home" id="home">
<div class="content">
<h3>旅游是一种信仰</h3>
<p>和我们一起去远方,寻找诗和梦想</p>
<a href="#" class="btn">查看更多</a>
</div>
<div class="controls">
<span class="vid-btn active" data-src="images/vid-1.mp4"></span>
<span class="vid-btn" data-src="./images/vid-2.mp4"></span>
<span class="vid-btn" data-src="images/vid-3.mp4"></span>
<span class="vid-btn" data-src="images/vid-4.mp4"></span>
<span class="vid-btn" data-src="images/vid-5.mp4"></span>
</div>
<div class="video-container">
<video src="images/vid-1.mp4" id="video-slider" loop autoplay muted></video>
</div>
</section>
预订部分HTML
<!-- 预订部分 -->
<section class="book" id="book">
<h1 class="heading">
<span>b</span>
<span>o</span>
<span>o</span>
<span>k</span>
<span class="space"></span>
<span>n</span>
<span>o</span>
<span>w</span>
</h1>
<div class="row">
<div class="image">
<img src="images/book-img.svg" alt="">
</div>
<form action="">
<div class="inputBox">
<h3>where to</h3>
<input type="text" placeholder="去哪里">
</div>
<div class="inputBox">
<h3>how many</h3>
<input type="number" placeholder="多少人用行">
</div>
<div class="inputBox">
<h3>多久到</h3>
<input type="date">
</div>
<div class="inputBox">
<h3>多久离开</h3>
<input type="date">
</div>
<input type="submit" class="btn" value="立即 预定">
</form>
</div>
</section>
相册部分HTML
<!-- 相册部分 -->
<section class="gallery" id="gallery">
<h1 class="heading">
<span>g</span>
<span>a</span>
<span>l</span>
<span>l</span>
<span>e</span>
<span>r</span>
<span>y</span>
</h1>
<div class="box-container">
<div class="box">
<img src="images/g-1.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-2.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-3.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-4.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-5.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-6.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-7.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-8.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
<div class="box">
<img src="images/g-9.jpg" alt="">
<div class="content">
<h3>美丽景色</h3>
<p>这是你梦中向往的地方</p>
<a href="#" class="btn">查看 更多</a>
</div>
</div>
</div>
</section>
做好的网页效果,如何通过发链接给别人看?
1.1解决部署上线~> 部署上线工具(永久免费使用)
1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件，免费下载安装，简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取
2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)
1.1部署流程
1.2 哇~ 部署成功
哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~
前端 零基础入门到高级(视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送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)
HTML期末作业作业(下载)
1.web前端期末节课大作业~html学生信息管理系统模板
2.web前端期末节课大作业 ~HTML学校后台用户登录界面模板
3.web前端期末节课大作业 ,~小米官网竖直分类导航菜单
4.web前端期末节课大作业~HTML5大学生网上报到系统响应式模板
5.web前端期末节课大作业~自考大学官网HTML模板
6.web前端期末节课大作业 ~小米商城官网首页模板
7.web前端期末节课大作业-绿色IT技术在线教育响应式模板
8.web前端期末节课大作业~HTML教育培训机构网站模板
9.web前端期末结课大作业html+css+javascript大学实验教学示范中心HTML网站模板
10.web前端期末节课大作业 ~HTML5响应式少儿舞蹈培训学校网站模板
11.web前端期末节课大作业~红色教育培训画室HTML网站模板
12.HTML期末作业-绿色果蔬商城购物网模板(HTML+CSS+JavaScript)
