HTML5期末大作业：旅游酒店网站设计——旅游酒店服务预订(1页) web网页设计—— 出游
作品介绍
1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。
2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。
3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
文章目录
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Travel Web Template">
<meta name="keywords" content="Travel Template,Flight Template,Cars Template,Hotels Template,Responsive Template">
<meta name="author" content="M.Bilal">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Gateway - Multiple Purpose Travel Template</title>
<!--styles files-->
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/js/jqwidgets/styles/jqx.base.css" rel="stylesheet">
<link href="assets/js/animate/animate.css" rel="stylesheet">
<link href="assets/js/select2/select2.min.css" rel="stylesheet">
<link href="assets/css/slick.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!--favicon-->
<link rel="icon" href="favicon.ico">
<!--end here-->
</head>
<body>
<!--start top-bar-->
<div class="top_bar_travel hidden-xs text-center">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<ul class="list-unstyled list-inline top_contact">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <img src="assets/img/r-flag.png" alt="flag">English
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><img src="assets/img/frence-flag.ico" alt="flag">Fransh</a></li>
<li><a href="#"><img src="assets/img/turkey-flag.ico" alt="flag">Spanish </a></li>
<li><a href="#"><img src="assets/img/russia-flag.ico" alt="flag">Russian</a></li>
<li><a href="#"><img src="assets/img/garmen-flg.png" alt="flag">German</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-usd"></i> USD
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-usd"></i> ERU</a></li>
<li><a href="#"><i class="fa fa-gbp"></i> PR</a></li>
<li><a href="#"><i class="fa fa-eur"></i> ERU</a></li>
<li><a href="#"><i class="fa fa-inr"></i> RS</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-md-5 hidden-sm">
<div class="top_search">
<form>
<input type="text" placeholder="Search here...">
<button class="email-btn"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="top_email">
<ul class="list-unstyled list-inline">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-skype"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--end top-bar-->
<!--start navigation bar-->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="assets/img/logo-v2.png" alt="logo"></a>
</div>
<!--navbar-collapse-->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<!--Home-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;"> <i class="fa fa-home"></i>Home
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" data-toggle="dropdown" href="javascript:;"> Home
<span class="fa fa-caret-right pull-right"></span></a>
<ul class="dropdown-menu drop1">
<li><a href="html/home/inner-home/home_flight.html"><i class="fa fa-certificate"></i> Home Flight</a></li>
<li><a href="html/home/inner-home/home_hotel.html"><i class="fa fa-certificate "></i> Home Hotel</a></li>
<li><a href="html/home/inner-home/home-travel.html"><i class="fa fa-certificate"></i> Home Travel</a></li>
</ul>
</li>
<li><a href="html/home/layout_one.html"> Home version-1</a></li>
<li><a href="html/home/layout_two.html"> Home version-2</a></li>
<li ><a href="html/home/layout_three.html" class="no-border"> Home version-3</a></li>
</ul>
</li>
<!--Flights-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;"><i class="fa fa-plane"></i>Flights
<span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-md-3 col-sm-12">
<ul>
<li><a href="html/flight/home-flight.html">Home Flight</a></li>
<!--<li class="divider"></li>-->
<li class="dropdown-header">Flights list one</li>
<li><a href="html/flight/flights_list_one/left_sidebar.html">Left Side bar</a></li>
<li><a href="html/flight/flights_list_one/right_sidebar.html">Right Side bar</a></li>
<li><a href="html/flight/flights_list_one/full_width.html">Full Width</a></li>
<!--<li class="divider"></li>-->
<li class="dropdown-header">Flights list Two</li>
<li><a href="html/flight/flights_list_two/left_sidebar.html">Left Side bar</a></li>
<li><a href="html/flight/flights_list_two/right_sidebar.html">Right Side bar</a></li>
<li><a href="html/flight/flights_list_two/full_width.html">Full Width</a></li>
</ul>
</li>
<li class="col-md-3 col-sm-12">
<ul>
<!--<li class="divider"></li>-->
<li class="dropdown-header">Flights Detail one</li>
<li><a href="html/flight/flights_details_one/left_sidebar.html">Left Side bar</a></li>
<li><a href="html/flight/flights_details_one/right_sidebar.html">Right Side bar</a></li>
<li><a href="html/flight/flights_details_one/full_width.html">Full Width</a></li>
<!--<li class="divider"></li>-->
<li class="dropdown-header">Flights Detail Two</li>
<li><a href="html/flight/flights_details_two/left_sidebar.html">Left Side bar</a></li>
<li><a href="html/flight/flights_details_two/right_sidebar.html">Right Side bar</a></li>
<li><a href="html/flight/flights_details_one/full_width.html">Full Width</a></li>
</ul>
</li>
<li class="col-md-3 col-sm-12">
<ul>
<!--<li class="divider"></li>-->
<li class="dropdown-header">Flights Booking one</li>
<li><a href="html/flight/flights_booking_one/left_sidebar.html">Left Side bar</a></li>
<li><a href="html/flight/flights_booking_one/right_sidebar.html">Right Side bar</a></li>
<li><a href="html/flight/flights_booking_one/full_width.html">Full Width</a></li>
<!--<li class="divider"></li>-->
<li class="dropdown-header">Flights Booking Two</li>
<li><a href="html/flight/flights_booking_two/left_sidebar.html">Left Side bar</a></li>
<li><a href="html/flight/flights_booking_two/right_sidebar.html">Right Side bar</a></li>
<li><a href="html/flight/flights_booking_two/full_width.html">Full Width</a></li>
</ul>
</li>
<li class="col-md-3 col-sm-12">
<ul>
<!--<li class="divider"></li>-->
<li class="dropdown-header">Maps</li>
<li><a href="html/flight/maps/map_style_one.html">Map Style One</a></li>
<li><a href="html/flight/maps/map_style_two.html">Map Style Two</a></li>
<li><a href="html/flight/maps/half_map.html">Half Map</a></li>
<!--<li class="divider"></li>-->
<li class="dropdown-header">Confirm Booking</li>
<li><a href="html/flight/confirm_booking/layout_one.html">Layout One</a></li>
<li><a href="html/flight/confirm_booking/layout_two.html">Layout two</a></li>
</ul>
</li>
</ul>
</li>
<!--Hotels-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;"><i class="fa fa-hotel"></i>Hotels
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="html/hotel/home_hotel.html"> Home Hotel</a></li>
<li class="dropdown-submenu">
<a class="test" data-toggle="dropdown" href="javascript:;"> Hotels Lists One
<span class="fa fa-caret-right pull-right"></span></a>
<ul class="dropdown-menu drop1">
<li><a href="html/hotel/hotels_list_one/left_sidebar.html"><i class="fa fa-certificate "></i>Left Sidebar</a></li>
<li><a href="html/hotel/hotels_list_one/right_sidebar.html"><i class="fa fa-certificate "></i>Right Sidebar</a></li>
<li><a href="html/hotel/hotels_list_one/full_width.html"><i class="fa fa-certificate "></i>Full width</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" data-toggle="dropdown" href="javascript:;"> Hotels Lists Two
<span class="fa fa-caret-right pull-right"></span></a>
<ul class="dropdown-menu drop1">
<li><a href="html/hotel/hotels_list_two/left_sidebar.html"><i class="fa fa-certificate "></i>Left Sidebar</a></li>
<li><a href="html/hotel/hotels_list_two/right_sidebar.html"><i class="fa fa-certificate "></i>Right Sidebar</a></li>
<li><a href="html/hotel/hotels_list_two/full_width.html"><i class="fa fa-certificate "></i>Full width</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" data-toggle="dropdown" href="javascript:;"> Hotels Details One
<span class="fa fa-caret-right pull-right"></span></a>
<ul class="dropdown-menu drop1">
<li><a href="html/hotel/hotels_details_one/left_sidebar.html"><i class="fa fa-certificate "></i>Left Sidebar</a></li>
<li><a href="html/hotel/hotels_details_one/right_sidebar.html"><i class="fa fa-certificate "></i>Right Sidebar</a></li>
<li><a href="html/hotel/hotels_details_one/full_width.html"><i class="fa fa-certificate "></i>Full width</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" data-toggle="dropdown" href="javascript:;"> Hotels Details Two
<span class="fa fa-caret-right pull-right"></span></a>
<ul class="dropdown-menu drop1">
<li><a href="html/hotel/hotels_details_two/left_sidebar.html"><i class="fa fa-certificate "></i>Left Sidebar</a></li>
<li><a href="html/hotel/hotels_details_two/right_sidebar.html"><i class="fa fa-certificate "></i>Right Sidebar</a></li>
<li><a href="html/hotel/hotels_details_two/full_width.html"><i class="fa fa-certificate "></i>Full width</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" data-toggle="dropdown" href="javascript:;"> Hotels Booking One
<span class="fa fa-caret-right pull-right"></span></a>
<ul class="dropdown-menu drop1">
<li><a href="html/hotel/hotels_booking_one/left_sidebar.html"><i class="fa fa-certificate "></i>Left Sidebar</a></li>
<li><a href="html/hotel/hotels_booking_one/right_sidebar.html"><i class="fa fa-certificate "></i>Right Sidebar</a></li>
<li><a href="html/hotel/hotels_booking_one/full_width.html"><i class="fa fa-certificate "></i>Full width</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" data-toggle="dropdown" href="javascript:;"> Hotels Booking Two
<span class="fa fa-caret-right pull-right"></span></a>
<ul class="dropdown-menu drop1">
<li><a href="html/hotel/hotels_booking_two/left_sidebar.html"><i class="fa fa-certificate "></i>Left Sidebar</a></li>
<li><a href="html/hotel/hotels_booking_two/right_sidebar.html"><i class="fa fa-certificate "></i>Right Sidebar</a></li>
<li><a href="html/hotel/hotels_booking_two/full_width.html"><i class="fa fa-certificate "></i>Full width</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" data-toggle="dropdown" href="javascript:;"> Maps
<span class="fa fa-caret-right pull-right"></span></a>
<ul class="dropdown-menu drop1">
<li><a href="html/hotel/maps/map_style_one.html"><i class="fa fa-certificate "></i>Map Style One</a></li>
<li><a href="html/hotel/maps/map_style_two.html"><i class="fa fa-certificate "></i>Map Style Two</a></li
<div id="loading-center">
<div id="loading-center-absolute">
<div class="object" id="object_big">
<img src="assets/img/img-loader.png" alt="loader">
</div>
</div>
</div>
</div>
<!--end here-->
<!--script files-->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jqwidgets/scripts/date-picker.js"></script>
<script src="assets/js/isotop/isotope-docs.min.js"></script>
<script src="assets/js/select2/select2.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/parallax/parallax.min.js"></script>
<script src="assets/js/scrollreveal.min.js"></script>
<script src="assets/js/custom.js"></script>
<!--end script files-->
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
