900字范文 > HTML+CSS大作业HTML5期末大作业旅游酒店网站设计——旅游酒店服务预订(1页) web网

HTML+CSS大作业HTML5期末大作业旅游酒店网站设计——旅游酒店服务预订(1页) web网

时间：2024-01-07 09:17:22

HTML5期末大作业：旅游酒店网站设计——旅游酒店服务预订(1页) web网页设计—— 出游

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

作品介绍

1.网页作品简介：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

HTML5期末大作业：旅游酒店网站设计——旅游酒店服务预订(1页) web网页设计—— 出游作品介绍一、作品展示二、文件目录三、代码实现四、获取更多源码五、学习资料六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!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><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"><link rel="icon" href="favicon.ico"></head><body> <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><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><div id="navbar" class="navbar-collapse collapse"><ul class="nav navbar-nav navbar-right"><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><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="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="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="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="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="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="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="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="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><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><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></body></html>