0
点赞
收藏
分享

微信扫一扫

web网页设计与开发:旅游酒店网站设计——红色大气的度假酒店预订网站html模板(5页) HTML+CSS+JavaScript

九月的栩 2022-02-10 阅读 36


HTML5期末大作业:旅游酒店网站设计——红色大气的度假酒店预订网站html模板(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码


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


作品介绍

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

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

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


文章目录


  • ​​HTML5期末大作业:旅游酒店网站设计——红色大气的度假酒店预订网站html模板(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码​​
  • ​​作品介绍​​
  • ​​一、作品展示​​
  • ​​二、文件目录​​
  • ​​三、代码实现​​
  • ​​四、学习资料​​
  • ​​五、完整源码​​
  • ​​六、更多源码​​


一、作品展示

二、文件目录

web网页设计与开发:旅游酒店网站设计——红色大气的度假酒店预订网站html模板(5页) HTML+CSS+JavaScript_html

三、代码实现

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>国际酒店</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Stylesheets -->
<!-- Dropdown Menu -->
<link rel="stylesheet" href="css/superfish.css">
<!-- Owl Slider -->
<!-- <link rel="stylesheet" href="css/owl.carousel.css"> -->
<!-- <link rel="stylesheet" href="css/owl.theme.default.min.css"> -->
<!-- Date Picker -->
<link rel="stylesheet" href="css/bootstrap-datepicker.min.css">
<!-- CS Select -->
<link rel="stylesheet" href="css/cs-select.css">
<link rel="stylesheet" href="css/cs-skin-border.css">

<!-- Themify Icons -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Flat Icon -->
<link rel="stylesheet" href="css/flaticon.css">
<!-- Icomoon -->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">

<!-- Style -->
<link rel="stylesheet" href="css/style.css">

<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->

</head>
<body>
<div id="fh5co-wrapper">
<div id="fh5co-page">
<div id="fh5co-header">
<header id="fh5co-header-section">
<div class="container">
<div class="nav-header">
<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
<h1 id="fh5co-logo"><a href="index.html">hotel</a></h1>
<nav id="fh5co-menu-wrap" role="navigation">
<ul class="sf-menu" id="fh5co-primary-menu">
<li><a class="active" href="index.html">网站首页</a></li>
<li><a href="hotel.html">房间介绍</a></li>
<li><a href="services.html">服务介绍</a></li>
<li><a href="blog.html">新闻中心</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</div>
</div>
</header>

</div>
<!-- end:fh5co-header -->
<div class="fh5co-parallax" style="background-image: url(images/slider1.jpg);" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0 text-center fh5co-table">
<div class="fh5co-intro fh5co-table-cell">
<h1 class="text-center">联系我们</h1>
<p>联系我们获取服务</p>
</div>
</div>
</div>
</div>
</div>

<div id="fh5co-contact-section">
<div class="row">
<div class="col-md-6">
<div class="map">
<iframe src="map/map.html"></iframe>
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
<h3>地址</h3>
<p>
交通便利,处于苏州上海交界处
</p>
<ul class="contact-info">
<li><i class="ti-map"></i>江苏省昆山市智谷创意产业园</li>
<li><i class="ti-mobile"></i>1234567890</li>
<li><i class="ti-envelope"></i><a>123456@123.com</a></li>
</ul>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea name="" class="form-control" id="" cols="30" rows="7" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="submit" value="发送邮件" class="btn btn-primary">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footer" class="fh5co-bg-color">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="copyright">
<p>&copy; 2016 All Rights Reserved.
</p>
<img src="images/gw.jpg" />
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-3">
<h3>快速链接</h3>
<ul class="link">
<li><a href="index.html">网站首页</a></li>
<li><a href="#">房间介绍</a></li>
<li><a href="#">服务介绍</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="col-md-3">
<h3>特色服务</h3>
<ul class="link">
<li><a>餐厅、酒吧</a></li>
<li><a>接送、泳池</a></li>
<li><a>Spa、健身</a></li>
</ul>
</div>
<div class="col-md-6">
<h3>订阅</h3>
<p>
特色服务和齐全的设施等着你的到来
</p>
<form action="#" id="form-subscribe">
<div class="form-field">
<input type="email" placeholder="邮箱" id="email">
<input type="submit" id="submit" value="发送">
</div>
</form>
</div>
</div>
</div>

</div>
</div>
</footer>

</div>
<!-- END fh5co-page -->

</div>
<!-- END fh5co-wrapper -->

<!-- Javascripts -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- Dropdown Menu -->
<script src="js/hoverIntent.js"></script>
<script src="js/superfish.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- Stellar Parallax -->
<script src="js/jquery.stellar.min.js"></script>
<!-- Owl Slider -->
<!-- // <script src="js/owl.carousel.min.js"></script> -->
<!-- Date Picker -->
<script src="js/bootstrap-datepicker.min.js"></script>
<!-- CS Select -->
<script src="js/classie.js"></script>
<script src="js/selectFx.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>

<script src="js/custom.js"></script>

</body>
</html>

四、学习资料

​web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)​

适合入门到高级的童鞋们入手~​​送1000套HTML+CSS+JavaScript模板网站​

web网页设计与开发:旅游酒店网站设计——红色大气的度假酒店预订网站html模板(5页) HTML+CSS+JavaScript_css_02

五、完整源码

​【百度网盘-源码下载地址】​

链接:https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw

提取码:8888

六、更多源码

​HTML5期末考核大作业源码​* 包含 ​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​ 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

web网页设计与开发:旅游酒店网站设计——红色大气的度假酒店预订网站html模板(5页) HTML+CSS+JavaScript_h5_03

web网页设计与开发:旅游酒店网站设计——红色大气的度假酒店预订网站html模板(5页) HTML+CSS+JavaScript_html_04



举报

相关推荐

0 条评论