Web网站模板-响应式旅游旅行团酒店预订展示网站模板(HTML+CSS+JavaScript前端大作业)

2401_84091938

于 2024-05-15 03:33:35 发布

阅读量161

点赞数 2

分类专栏：程序员文章标签：前端旅游 html

本文链接：https://blog.youkuaiyun.com/2401_84091938/article/details/138882087

版权

程序员专栏收录该内容

292 篇文章

订阅专栏

首页轮播图


	<section class="tm-banner">

		<!-- Flexslider -->

		<div class="flexslider flexslider-banner">

		  <ul class="slides">

		    <li>

			    <div class="tm-banner-inner">

					<h1 class="tm-banner-title">为您挑选 <span class="tm-yellow-text">最好的</span> 景点</h1>

					<p class="tm-banner-subtitle">假日旅游</p>

					<a href="#more" class="tm-banner-link">了解更多</a>	

				</div>

				<img src="img/banner-1.jpg" alt="Image" />	

		    </li>

		    <li>

			    <div class="tm-banner-inner">

					<h1 class="tm-banner-title">多彩 <span class="tm-yellow-text">旅游</span> </h1>

					<p class="tm-banner-subtitle">精彩的目的地</p>

					<a href="#more" class="tm-banner-link">了解更多</a>	

				</div>

		      <img src="img/banner-2.jpg" alt="Image" />

		    </li>

		    <li>

			    <div class="tm-banner-inner">

					<h1 class="tm-banner-title">酒店 <span class="tm-yellow-text">预订</span> </h1>

					<p class="tm-banner-subtitle">一步到位</p>

					<a href="#more" class="tm-banner-link">了解更多</a>	

				</div>

		      <img src="img/banner-3.jpg" alt="Image" />

		    </li>

		  </ul>

		</div>	

	</section>

酒店预订


<div class="form-group">

    <select class="form-control">

    <option value="">-- 选择酒店 -- </option>

    <option value="shangrila">酒店1</option>

    <option value="chatrium">酒店2</option>

    <option value="fourseasons">酒店3</option>

    <option value="hilton">酒店4</option>

    </select> 

    </div>

    <div class="form-group">

    <div class='input-group date' id='datetimepicker1'>

    <input type='text' class="form-control" placeholder="入住时间" />

    <span class="input-group-addon">

    <span class="fa fa-calendar"></span>

    </span>

    </div>

    </div>

    <div class="form-group">

    <div class='input-group date' id='datetimepicker2'>

    <input type='text' class="form-control" placeholder="退房时间" />

    <span class="input-group-addon">

    <span class="fa fa-calendar"></span>

    </span>

    </div>

</div>

更多套餐


	<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 col-xxs-12">

					<div class="tm-home-box-2 tm-home-box-2-right">						

					    <img src="img/gzh二维码.jpg" alt="image" class="img-responsive">

						<h3>大中国的人类聚居地</h3>

						<p class="tm-date">22 March 2016</p>

						<div class="tm-home-box-2-container">

							<a href="#" class="tm-home-box-2-link"><i class="fa fa-heart tm-home-box-2-icon border-right"></i></a>

							<a href="#" class="tm-home-box-2-link"><span class="tm-home-box-2-description">去旅游</span></a>

							<a href="#" class="tm-home-box-2-link"><i class="fa fa-edit tm-home-box-2-icon border-left"></i></a>

						</div>

					</div>

				</div>
#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/989c7804b6a3d5d44dd1e8bd15cdeffb.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/dd2c5b2001c283c4d2be14e5b412928b.png)

![](https://img-blog.csdnimg.cn/img_convert/127c0c7ab2c054f55869c3cf4d1fce19.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.youkuaiyun.com/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
id开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.youkuaiyun.com/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**