目录
1.引言 2
2.功能需求分析 2
3. 网站结构设计 2
3.1总体设计 2
3.2详细设计 2
3.2.1首页 2
3.2.2酒店浏览 2
3.2.3客服中心 2
3.2.4帮助中心 2
3.2.5登录页面 2
3.2.6注册页面 2
4. 项目效果实现 3
4.1首页 3
4.1.1整体效果 3
4.1.2功能实现 3
4.2酒店浏览 3
4.2.1整体效果 3
4.2.2功能实现 3
4.3客服中心 3
4.3.1整体效果 3
4.3.2功能实现 3
4.4帮助中心 3
4.4.1整体效果 3
4.4.2功能实现 3
4.5登录 4
4.5.1整体效果 4
4.5.2功能实现 4
4.6注册 4
4.6.1整体效果 4
4.6.2功能实现 4
5. 项目总结 4
6. 参考文献 4
1.引言
由于时下大多数人生活优越，交通工具方便快捷，信息获取方便，导致旅游业迅猛发展。为了方便旅游爱好者在网上获取信息，有效地掌握各大旅游景点的详细情况，我们开发出一套适合于旅游者在网络上快速获取信息的管理系统。通过本系统，出行者可以查看某个地区的全部景点列表，本文转载自http://www.biyezuopin.vip/onews.asp?id=15069了解某个景点的详细情况，自驾车、公交线路，获取景区内的旅游地图等。该系统为游客提供全面的旅游服务.
2.功能需求分析
通过本系统，出行者可以查看某个地区的全部景点列表，了解某个景点的详细情况，自驾车、公交线路，获取景区内的旅游地图等。该系统为游客提供全面的旅游景点查询服务。本系统的功能主要包括：旅游查询、酒店查询、交通查询、景点查询、、用户管理。
所用技术：Bootstarp、Html、Css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/home.css" rel="stylesheet">
<link href="css/home.min.css" rel="stylesheet">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>首页</title>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<!-- 顶部导航栏 -->
<div class="nav_top">
<div class="nav_left">
<div class="nav_text" id="nav_text">让旅行更幸福</div>
<div id="language" class="dropdown">
<div class="nav-pills dropdown-toggle" data-toggle="dropdown" onclick="LanguageSelect()">
<span class="glyphicon glyphicon-globe"></span>
<span class="nav_text">Language</span>
<span class="caret"></span>
</div>
<ul class="dropdown-menu">
<li><a href="#">简体中文</a></li>
<li><a href="#">繁体中文</a></li>
<li><a href="#">英语</a></li>
</ul>
</div>
</div>
<div class="nav_right navbar-right">
<ul>
<a href="login.html">
<li id="nav_right_li_first">你好，请登录</li>
</a>
<a href="registered.html">
<li>免费注册</li>
</a>
<li><span class="glyphicon glyphicon-envelope"></span> 消息</li>
<li>我的旅行<span class="caret"></span></li>
<li>我的订单<span class="caret"></span></li>
<a href="customer_service.html">
<li>客服中心</li>
</a>
<li id="nav_right_li_later1"><img src="images/手机图标.png"></li>
<li id="nav_right_li_later2"><img src=" images/微信图标.png "></li>
</ul>
</div>
</div>
<!-- Logo和搜索框 -->
<div class="query">
<div class="logo"><img src="images/logo.jpg" style="margin-left: 20px;"></div>
<div class="query_arr">
<form action="#" class="form-inline">
<div class="form-group">
<input class=" search form-contorl" type="text" placeholder="景点、酒店、旅行团">
</div>
<input class="btn btn-primary" type="button" value="搜索" />
</from>
</div>
</div>
<!-- 菜单导航栏 -->
<div class="menu">
<div class="nav_menu">
<ul id="myTab" class="nav nav-tabs">
<li><a href="home.html">首页</a></li>
<li><a data-target="#menu_hotel" href="#" data-toggle="tab">酒店<span class="caret"></span></a></li>
<li><a href="#" data-target="#menu_travel" data-toggle="tab">旅游<span class="caret"></span></a></li>
<li><a href="#" data-toggle="tab">跟团游</a></li>
<li><a href="#" data-target="#menu_plane" data-toggle="tab">机票<span class="caret"></span></a></li>
<li><a href="#" data-target="#menu_train" data-toggle="tab">火车<span class="caret"></span></a></li>
<li><a href="#" data-target="#menu_car" data-toggle="tab">汽车•船<span class="caret"></span></a></li>
<li><a href="#" data-target="#menu_usecar" data-toggle="tab">用车<span class="caret"></span></a></li>
<li><a href="#" data-target="#menu_tickets" data-toggle="tab">门票<span class="caret"></span></a></li>
<li><a href="#" data-toggle="tab">攻略</a></li>
<li><a href="#" data-target="#menu_purchase" data-toggle="tab">全球购<span class="caret"></span></a></li>
<li><a href="#" data-target="#menu_gift" data-toggle="tab">礼品卡<span class="caret"></span></a></li>
<li><a href="#" data-target="#menu_business" data-toggle="tab">商旅<span class="caret"></span></a></li>
<li><a href="#" data-toggle="tab">邮轮</a></li>
<li><a href="#" data-target="#menu_more" data-toggle="tab">更多<span class="caret"></span></a></li>
</ul>
</div>
<!-- 选项卡 -->
<div id="myTabContent" class="nav_menu2 tab-content">
<!-- 酒店 -->
<div class="tab-pane" id="menu_hotel">
<ul class="navbar-nav">
<li><a href="hotel.html">国内酒店</a></li>
<li><a href="#">海外酒店</a></li>
<li><a href="#">民宿客栈</a></li>
<li><a href="#">海外民宿</a></li>
</ul>
<div class="menu_order">
<a href="#"><img src="images/酒店图标.jpg">酒店订单 ></a>
</div>
</div>
<!-- 旅游 -->
<div class="tab-pane" id="menu_travel">
<ul class="navbar-nav">
<li><a href="#">旅游首页</a></li>
<li><a href="#">周末游</a></li>
<li><a href="#">跟团游</a></li>
<li><a href="#">自由行</a></li>
<li><a href="#">私家团</a></li>
<li><a href="#">门票•玩乐</a></li>
<li><a href="#">主题游</a></li>
<li><a href="#">定制旅行</a></li>
<li><a href="#">游学</a></li>
<li><a href="#">签证</a></li>
<li><a href="#">高端游</a></li>
<li><a href="#">爱玩户外</a></li>
<li><a href="#">特卖汇</a></li>
</ul>
<div class="menu_order">
<a href="#"><img src="images/旅游图标.jpg">旅游订单 ></a>
</div>
</div>
<!-- 机票 -->
<div class="tab-pane" id="menu_plane">
<ul class="navbar-nav">
<li><a href="#">国内/国际·中国港澳台机票</a></li>
<li><a href="#">特价机票</a></li>
<li><a href="#">机票+酒店</a></li>
<li><a href="#">航班动态</a></li>
<li><a href="#">值机选座</a></li>
<li><a href="#">退票改签</a></li>
<li><a href="#">机场攻略</a></li>
<li><a href="#">定制包机</a></li>
</ul>
<div class="menu_order">
<a href="#"><img src="images/飞机图标.jpg">机票订单 ></a>
</div>
</div>
<!-- 火车 -->
<div class="tab-pane" id="menu_train">
<ul class="navbar-nav">
<li><a href="#">国内火车票</a></li>
<li><a href="#">国际/港台火车票</a></li>
</ul>
<div class="menu_order">
<a href="#"><img src="images/火车图标.jpg">火车票订单 ></a>
</div>
</div>
<!-- 汽车•船 -->
<div class="tab-pane" id="menu_car">
<ul class="navbar-nav">
<li><a href="#">汽车票</a></li>
<li><a href="#">景区/机场专线</a></li>
<li><a href="#">船票</a></li>
</ul>
<div class="menu_order">
<a href="#"><img src="images/汽车图标.jpg">汽车票订单 ></a>
</div>
</div>
<!-- 用车 -->
<div class="tab-pane" id="menu_usecar">
<ul class="navbar-nav">
<li><a href="#">用车首页</a></li>
<li><a href="#">境外租车</a></li>
<li><a href="#">国内租车</a></li>
<li><a href="#">接送机</a></li>
<li><a href="#">接送火车</a></li>
<li><a href="#">国内包车</a></li>
<li><a href="#">境外包车</a></li>
</ul>
<div class="menu_order">
<a href="#"><img src="images/租车图标.jpg">用车订单 ></a>
</div>
</div>
<!-- 门票 -->
<div class="tab-pane" id="menu_tickets">
<ul class="navbar-nav">
<li><a href="#">门票·玩乐</a></li>
<li><a href="#">出境WiFi•电话卡</a></li>
<li><a href="#">周末游</a></li>
<li><a href="#">上海海昌</a></li>
</ul>
<div class="menu_order">
<a href="#"><img src="images/景点图标.jpg">门票订单 ></a>
</div>
</div>
<!-- 全球购 -->
<div class="tab-pane" id="menu_purchase">
<ul class="navbar-nav">
<li><a href="#">名店购</a></li>
<li><a href="#">旅游购物商城</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="tab-pane" id="menu_gift">
<ul class="navbar-nav">
<li><a href="#">礼品卡首页</a></li>
<li><a href="#">节日/主题</a></li>
<li><a href="#">购卡礼品卡福袋</a></li>
<li><a href="#">企业采购</a></li>
<li><a href="#">兑换券</a></li>
<li><a href="#">外币兑换</a></li>
</ul>
<div class="menu_order">
<a href="#"><img src="images/礼品图标.jpg">礼品卡订单 ></a>
</div>
</div>
<!-- 商旅 -->
<div class="tab-pane" id="menu_business">
<ul class="navbar-nav">
<li><a href="#">商旅首页</a></li>
<li><a href="#">企业客户注册</a></li>
<li><a href="#">会议旅游</a></li>
</ul>
</div>
<!-- 更多 -->
<div class="tab-pane" id="menu_more">
<ul class="navbar-nav">
<li><a href="#">会员商城</a></li>
<li><a href="#">超级会员</a></li>
<li><a href="#">合作卡</a></li>
</ul>
</div>
</div>
</div>
<!-- 广告轮播图 -->
<div id="myCarousel" class="carousel slide advertising">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div id="rotation" class="carousel-inner">
<div class="item active">
<img src="images/广告轮播图1.png">
</div>
<div class="item">
<img src="images/广告轮播图2.png">
</div>
<div class="item">
<img src="images/广告轮播图3.png">
</div>
</div>
</div>
<!-- 服务搜索 -->
<div class="service_search">
<ul class="species" id="species">
<li class="active"><a href="#" data-target="#hotel_search" data-toggle="tab">酒店</a></li>
<li><a href="#" data-target="#plane_search" data-toggle="tab">机票</a></li>
<li><a href="#" data-target="#travel_search" data-toggle="tab">旅游</a></li>
<li><a href="#" data-target="#follow_travel_search" data-toggle="tab">跟团游</a></li>
<li><a href="#" data-target="#packing_search" data-toggle="tab">打包订</a></li>
<li><a href="#" data-target="#train_search" data-toggle="tab">火车</a></li>
<li><a href="#" data-target="#usecar_search" data-toggle="tab">用车</a></li>
</ul>
<!-- 服务选项卡 -->
<div id="species_search" class="tab-content">
<!-- 酒店 -->
<div class="tab-pane in active" id="hotel_search">
<ul id="hotel_species" class="domestic_search">
<li class="active"><a href="#" data-target="#domestic_hotel_search" data-toggle="tab">国内酒店</a></li>
<li><a href="#" data-target="#overseas_hotel_search" data-toggle="tab">海外酒店</a></li>
<li><a href="#" data-target="#folk_hotel_search" data-toggle="tab">民宿</a></li>
</ul>
<!-- 酒店选项卡 -->
<div id="search_box" class="tab-content">
<!-- 国内酒店搜索 -->
<div class="tab-pane in active" id="domestic_hotel_search">
<p class="search_destination">
<label>目的地</label>
<input type="text" class="form-control" placeholder="中文/拼音">
</p>
<p class="form-group search_live_time">
<label>入住日期</label>
<input class="form-control" type="date" name="bday" min="2020-11-16">
<label>退房日期</label>
<input class="form-control" type="date" name="bday" max="2020-12-16">
</p>
<p class="form-group room_info">
<label>房间数</label>
<select class="form-control">
<option>1间</option>
<option>2间</option>
<option>3间</option>
<option>3间</option>
<option>4间</option>
<option>5间</option>
<option>6间</option>
<option>7间</option>
<option>8间</option>
<option>9间</option>
</select>
<label>住客数</label>
<select class="form-control">
<option>1成人</option>
<option>2成人</option>
<option>3成人</option>
<option>4成人</option>
<option>5成人</option>
</select>
</p>
<p class="hotel_star">
<label>酒店级别</label>
<select class="form-control">
<option>不限</option>
<option>五星级/豪华</option>
<option>四星级/高档</option>
<option>三星级/舒适</option>
<option>二星级以下/经济</option>
</select>
<label>关键词</label>
<input type="text" class="form-control" placeholder="（选填）酒店名/地标/商圈">
</p>
<p id="domestic_hotel_search_btn">
<input class="btn btn-primary" type="button" value="搜索" />
</p>
</div>
<!-- 海外酒店搜索 -->
<div class="tab-pane" id="overseas_hotel_search">
<p class="search_destination">
<label>目的地</label>
<input type="text" class="form-control" placeholder="中文/拼音">
</p>
<p class="form-group search_live_time">
<label>入住日期</label>
<input class="form-control" type="date" name="bday" min="2020-11-16">
<label>退房日期</label>
<input class="form-control" type="date" name="bday" max="2020-12-16">
</p>
<p class="form-group room_info">
<label>房间数</label>
<select class="form-control">
<option>1间</option>
<option>2间</option>
<option>3间</option>
<option>3间</option>
<option>4间</option>
<option>5间</option>
<option>6间</option>
<option>7间</option>
<option>8间</option>
<option>9间</option>
</select>
<label>住客数</label>
<select class="form-control">
<option>1成人</option>
<option>2成人</option>
<option>3成人</option>
<option>4成人</option>
<option>5成人</option>
</select>
</p>
<p class="hotel_star">
<label>关键词</label>
<input type="text" class="form-control" placeholder="（选填）酒店名/地标/商圈">
</p>
<p id="domestic_hotel_search_btn">
<input class="btn btn-primary" type="button" value="搜索" />
</p>
</div>
<!-- 民宿搜索 -->
<div class="tab-pane" id="folk_hotel_search">
<p class="search_destination">
<label>目的地</label>
<input type="text" class="form-control" placeholder="中文/拼音">
</p>
<p class="form-group search_live_time">
<label>入住日期</label>
<input class="form-control" type="date" name="bday" min="2020-11-16">
<label>退房日期</label>
<input class="form-control" type="date" name="bday" max="2020-12-16">
</p>
<p class="form-group room_info">
<label>入住人数</label>
<select class="form-control">
<option>不限</option>
<option>1人</option>
<option>2人</option>
<option>3人</option>
<option>4人</option>
<option>5人</option>
<option>6人</option>
<option>7人</option>
<option>8人</option>
<option>9人</option>
<option>10人以上</option>
</select>
</p>
<p class="hotel_star">
<label>关键词</label>
<input type="text" class="form-control" placeholder="（选填）酒店名/地标/商圈">
</p>
<p id="domestic_hotel_search_btn">
<input class="btn btn-primary" type="button" value="搜索" />
</p>
</div>
</div>
</div>
<!-- 机票 -->
<div class="tab-pane" id="plane_search">
<ul id="plane_species">
<li class="active"><a href="#" data-target="#domestic_plane_search" data-toggle="tab">国内机票</a></li>
<li class="plane_species_li2"><a href="#" data-target="#overseas_plane_search" data-toggle="tab">国际·港澳台机票</a></li>
<li><a href="#" data-target="#find_lowerprice" data-toggle="tab">发现低价</a></li>
</ul>
</div>
<!-- 旅游 -->
<div class="tab-pane" id="travel_search">
<ul id="travel_species">
<li class="active"><a href="#" data-target="#travel_all_search" data-toggle="tab">全部</a></li>
<li><a href="#" data-target="#travel_tickets_search" data-toggle="tab">门票</a></li>
<li><a href="#" data-target="#travel_around_search" data-toggle="tab">周边游</a></li>
<li><a href="#" data-target="#travel_free_search" data-toggle="tab">自由行</a></li>
<li><a href="#" data-target="#travel_group_search" data-toggle="tab">跟团游</a></li>
<li><a href="#" data-target="#travel_cruise_search" data-toggle="tab">邮轮</a></li>
</ul>
</div>
<!-- 跟团游 -->
<div class="tab-pane" id="follow_travel_search">
<ul id="follow_travel_species">
<li class="active"><a href="#" data-target="#recommended_search" data-toggle="tab">推荐</a></li>
<li><a href="#" data-target="#travel_around_search" data-toggle="tab">周边跟团</a></li>
<li><a href="#" data-target="#domestic_follow_search" data-toggle="tab">境内跟团</a></li>
<li><a href="#" data-target="#foreign_follow_search" data-toggle="tab">境外跟团</a></li>
</ul>
</div>
<!-- 打包订 -->
<div class="tab-pane" id="packing_search">
<ul id="packing_species">
<li class="active"><a href="#" data-target="#plane_hotel_search" data-toggle="tab">机票+酒店</a></li>
</ul>
</div>
<!-- 火车 -->
<div class="tab-pane" id="train_search">
<ul id="train_species">
<li class="active"><a href="#" data-target="#domestic_train_search" data-toggle="tab">国内火车票</a></li>
<li class="plane_species_li2"><a href="#" data-target="#overseas_train_search" data-toggle="tab">国际·港澳台火车票</a></li>
<li><a href="#" data-target="#domestic_car_search" data-toggle="tab">国内汽车票</a></li>
</ul>
</div>
<!-- 用车 -->
<div class="tab-pane" id="usecar_search">
<ul id="usecar_species">
<li class="active"><a href="#" data-target="#domestic_pick_up" data-toggle="tab">国内接送机</a></li>
<li><a href="#" data-target="#overseas_pick_up" data-toggle="tab">国外接送机</a></li>
<li><a href="#" data-target="#domestic_rental_car" data-toggle="tab">国内租车</a></li>
<li><a href="#" data-target="#overseas_rental_car" data-toggle="tab">国外租车</a></li>
<li><a href="#" data-target="#daily_rent_special" data-toggle="tab">日租包车</a></li>
</ul>
</div>
</div>
</div>
<!-- 主体内容 -->
<div id="content">
<div class="affix_nav" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="100">
<li class="active"><a href="#affix_nav_travel">旅游</a></li>
<li><a href="#affix_nav_hotel">酒店</a></li>
<li><a href="#affix_nav_plane">机票</a></li>
<li><a href="#affix_nav_usercar">用车</a></li>
<li style="display: none;">
<a href="#section-5"></a>
</li>
<li><a href="#affix_nav_play">玩乐</a></li>
</ul>
</div>
<div id="affix_content">
<!-- 旅游 -->
<div id="affix_nav_travel">
<ul id="package_species_travel" class="package_speciea_nav">
<li class="active"><a href="#hot" data-toggle="tab">热门</a></li>
<li><a href="#around_travel" data-toggle="tab">周边游</a></li>
<li><a href="#tickets" data-toggle="tab">门票</a></li>
<li><a href="#outbound_travel" data-toggle="tab">出境游</a></li>
<li><a href="#domestic_tourism" data-toggle="tab">境内游</a></li>
<li><a href="#cruise" data-toggle="tab">邮轮</a></li>
<li><a href="#local_play" data-toggle="tab">当地玩乐</a></li>
<li><a href="#subject_travel" data-toggle="tab">主题游</a></li>
<li><a href="#">高端游</a></li>
</ul>
<div id="recommended_menu1" class="tab-content recommended_menu">
<!-- 热门 -->
<div class="tab-pane in active" id="hot">
<ul id="place_nav" class="place_nav">
<li class="active"><a href="#Domestic" data-toggle="tab">境内</a></li>
<li><a href="#Japan" data-toggle="tab">日本</a></li>
<li><a href="#SoutheastAsia" data-toggle="tab">东南亚</a></li>
<li><a href="#European" data-toggle="tab">欧洲</a></li>
<li><a href="#Americas" data-toggle="tab">美洲</a></li>
<li><a href="#EastAfrica" data-toggle="tab">澳中东非</a></li>
</ul>
<div id="recommended_menu_name" class="tab-content recommended_menu_name">
<!-- 境内 -->
<div class="tab-pane in active recommended_menu_name_box" id="Domestic">
<div class="box1">
<div><img src="images/三亚.jpg"></div>
<div><img src="images/成都.jpg"></div>
<div><img src="images/丽江.jpg"></div>
<div><img src="images/张家界.jpg"></div>
<div><img src="images/重庆.jpg"></div>
<div><img src="images/北京.jpg"></div>
<div><img src="images/桂林.jpg"></div>
<div><img src="images/厦门.jpg"></div>
</div>
<div id="box_travel"><img src="images/旅游聚划算.jpg"></div>
</div>
<!-- 日本 -->
<div class="tab-pane" id="Japan">2</div>
<!-- 东南亚 -->
<div class="tab-pane" id="SoutheastAsia">3</div>
<!-- 欧洲 -->
<div class="tab-pane" id="European">4</div>
<!-- 美洲 -->
<div class="tab-pane" id="Americas">5</div>
<!-- 澳中东非 -->
<div class="tab-pane" id="EastAfrica">6</div>
</div>
</div>
<!-- 周边游 -->
<div class="tab-pane" id="around_travel"></div>
<!-- 门票 -->
<div class="tab-pane" id="tickets"></div>
<!-- 出境游 -->
<div class="tab-pane" id="outbound_travel"></div>
<!-- 境内游 -->
<div class="tab-pane" id="domestic_tourism"></div>
<!-- 邮轮 -->
<div class="tab-pane" id="cruise"></div>
<!-- 当地玩乐 -->
<div class="tab-pane" id="local_play"></div>
<!-- 主题游 -->
<div class="tab-pane" id="subject_travel"></div>
</div>
</div>
<!-- 酒店 -->
<div id="affix_nav_hotel">
<ul id="package_species_hotel" class="package_speciea_nav">
<li class="active"><a href="#overseas_hotel_recommended" data-toggle="tab">海外酒店</a></li>
<li><a href="#overseas_home_recommended" data-toggle="tab">海外民宿+短租</a></li>
<li><a href="#domestic_hotel_recommended" data-toggle="tab">国内酒店</a></li>
<li><a href="#home_hotel_recommended" data-toggle="tab">客栈民宿</a></li>
</ul>
<div id="recommended_menu2" class="tab-content recommended_menu">
<!-- 海外酒店 -->
<div class="tab-pane in active" id="overseas_hotel_recommended">
<div class="entrance">
<label>促销</label>
<ul>
<li><a href="#">睡遍全世界—新加坡国家馆</a></li>
<li><a href="#">睡遍全世界—日本国家馆</a></li>
<li><a href="#">睡遍全世界—澳大利亚站</a></li>
<li><a href="#">睡遍全世界-马来西亚国家馆</a></li>
<li><a href="#">睡遍全世界—泰国国家馆</a></li>
</ul>
<label>发现酒店</label>
<ul>
<li><a href="#">流行与复古结合的热门人气地——首尔仁寺洞钟路</a></li>
<li><a href="#">特别的旅行，美味的餐食，绝美的夜景，这次冬季旅行就去釜山吧</a></li>
<li><a href="#">孟加拉国吉大港酒店推荐</a></li>
<li><a href="#">最受国人欢迎的伦敦酒店</a></li>
</ul>
</div>
<div class="product">
<ul id="place_nav2" class="place_nav">
<li class="active"><a href="#hot_city" data-toggle="tab">热门城市</a></li>
<li><a href="#city_shopping" data-toggle="tab">都市购物</a></li>
<li><a href="#Island_leisure" data-toggle="tab">海岛休闲</a></li>
<li><a href="#resort" data-toggle="tab">度假胜地</a></li>
</ul>
<div id="recommended_menu_name2" class="tab-content recommended_menu_name2">
<!-- 热门城市 -->
<div class="tab-pane in active recommended_menu_name_box2" id="hot_city">
<div><img src="images/新加坡.jpg"></div>
<div><img src="images/曼谷.jpg"></div>
<div><img src="images/东京.jpg"></div>
<div><img src="images/吉隆玻.jpg"></div>
<div><img src="images/大阪.jpg"></div>
<div><img src="images/普吉岛.jpg"></div>
</div>
<div id="box_hotel"><img src="images/泰国酒店精选.jpg"></div>
<!-- 都市购物 -->
<div class="tab-pane" id="city_shopping">2</div>
<!-- 海岛休闲 -->
<div class="tab-pane" id="Island_leisure">3</div>
<!-- 度假胜地 -->
<div class="tab-pane" id="resort">4</div>
</div>
</div>
</div>
<!-- 海外民宿+短租 -->
<div class="tab-pane" id="overseas_home_recommended">2</div>
<!-- 国内酒店 -->
<div class="tab-pane" id="domestic_hotel_recommended">3</div>
<!-- 客栈民宿 -->
<div class="tab-pane" id="home_hotel_recommended">3</div>
</div>
</div>
<!-- 机票 -->
<div id="affix_nav_plane">
<ul id="package_species_plane" class="package_speciea_nav">
<li class="active"><a href="#International_air_ticket" data-toggle="tab">国际•港澳台特价机票</a></li>
<li><a href="#Domestic_air_ticket" data-toggle="tab">国内特价机票</a></li>
</ul>
<!-- 一级导航栏选项卡 -->
<div id="recommended_menu3" class="tab-content recommended_menu">
<!-- 国际•港澳台特价机票 -->
<div class="tab-pane in active" id="International_air_ticket">
<div class="product_hd">
<ul id="place_nav3" class="place_nav">
<li class="active"><a href="#hit_back" data-toggle="tab">热门往返</a></li>
<li><a href="#asia" data-toggle="tab">亚洲</a></li>
<li><a href="#european" data-toggle="tab">欧洲</a></li>
<li><a href="#americas" data-toggle="tab">美洲</a></li>
</ul>
<p><a href="#">更多国际•港澳台特价机票 ></a></p>
</div>
<!-- 二级导航栏选项卡 -->
<div id="recommended_menu_name3" class="tab-content recommended_menu_name3">
<!-- 热门往返 -->
<div class="tab-pane in active recommended_menu_name_box3" id="hit_back">
<div class="plane_info">
<p class="trip">上海<span class="glyphicon glyphicon-transfer"></span>台北</p>
<p><span class="data">11月19日 - 11月26日</span></p>
<p>
¥
<span class="price">590</span>起
<span class="snap">立抢</span>
</p>
</div>
<div class="plane_info">
<p class="trip">上海<span class="glyphicon glyphicon-transfer"></span>台北</p>
<p><span class="data">11月19日 - 11月26日</span></p>
<p>
¥
<span class="price">590</span>起
<span class="snap">立抢</span>
</p>
</div>
<div class="plane_info">
<p class="trip">上海<span class="glyphicon glyphicon-transfer"></span>台北</p>
<p><span class="data">11月19日 - 11月26日</span></p>
<p>
¥
<span class="price">590</span>起
<span class="snap">立抢</span>
</p>
</div>
<div class="plane_info">
<p class="trip">上海<span class="glyphicon glyphicon-transfer"></span>台北</p>
<p><span class="data">11月19日 - 11月26日</span></p>
<p>
¥
<span class="price">590</span>起
<span class="snap">立抢</span>
</p>
</div>
<div class="plane_info">
<p class="trip">上海<span class="glyphicon glyphicon-transfer"></span>台北</p>
<p><span class="data">11月19日 - 11月26日</span></p>
<p>
¥
<span class="price">590</span>起
<span class="snap">立抢</span>
</p>
</div>
<div class="plane_info">
<p class="trip">上海<span class="glyphicon glyphicon-transfer"></span>台北</p>
<p><span class="data">11月19日 - 11月26日</span></p>
<p>
¥
<span class="price">590</span>起
<span class="snap">立抢</span>
</p>
</div>
<div class="plane_info">
<p class="trip">上海<span class="glyphicon glyphicon-transfer"></span>台北</p>
<p><span class="data">11月19日 - 11月26日</span></p>
<p>
¥
<span class="price">590</span>起
<span class="snap">立抢</span>
</p>
</div>
<div class="plane_info">
<p class="trip">上海<span class="glyphicon glyphicon-transfer"></span>台北</p>
<p><span class="data">11月19日 - 11月26日</span></p>
<p>
¥
<span class="price">590</span>起
<span class="snap">立抢</span>
</p>
</div>
<div class="plane_info">
<p class="trip">上海<span class="glyphicon glyphicon-transfer"></span>台北</p>
<p><span class="data">11月19日 - 11月26日</span></p>
<p>
¥
<span class="price">590</span>起
<span class="snap">立抢</span>
</p>
</div>
<div class="plane_info">
<p class="trip">上海<span class="glyphicon glyphicon-transfer"></span>台北</p>
<p><span class="data">11月19日 - 11月26日</span></p>
<p>
¥
<span class="price">590</span>起
<span class="snap">立抢</span>
</p>
</div>
</div>
<!-- 亚洲 -->
<div class="tab-pane" id="asia">2</div>
<!-- 欧洲 -->
<div class="tab-pane" id="european">3</div>
<!-- 美洲 -->
<div class="tab-pane" id="americas">4</div>
</div>
</div>
<!-- 国内特价机票 -->
<div class="tab-pane" id="Domestic_air_ticket">2</div>
</div>
</div>
<!-- 用车 -->
<div id="affix_nav_usercar">
<ul id="package_species_usercar" class="package_speciea_nav">
<li class="active"><a href="#outside_car_rental" data-toggle="tab">境外租车</a></li>
<li><a href="#outside_airport_transportation" data-toggle="tab">境外接送机</a></li>
<li><a href="#domestic_car_rental" data-toggle="tab">国内租车</a></li>
<li><a href="#domestic_airport_transportation" data-toggle="tab">国内接送机</a></li>
<li><a href="#daily_special_rent" data-toggle="tab">日租包车</a></li>
</ul>
<!-- 一级导航栏选项卡 -->
<div id="recommended_menu4" class="tab-content recommended_menu">
<!-- 境外租车 -->
<div class="tab-pane in active" id="outside_car_rental">
<div class="entrance">
<label>热门城市</label>
<ul>
<li><a href="#">洛杉矶</a></li>
<li><a href="#">旧金山</a></li>
<li><a href="#">墨尔本</a></li>
<li><a href="#">纽约</a></li>
<li><a href="#">曼谷</a></li>
<li><a href="#">基督城</a></li>
<li><a href="#">普吉岛</a></li>
<li><a href="#">温哥华</a></li>
<li><a href="#">悉尼</a></li>
<li><a href="#">奥克兰</a></li>
<li><a href="#">拉斯维加斯</a></li>
<li><a href="#">西雅图</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="product">
<div class="product_hd">
<ul id="place_nav4" class="place_nav">
<li class="active"><a href="#usercar_americas" data-toggle="tab">美国</a></li>
<li><a href="#usercar_Thailand" data-toggle="tab">泰国</a></li>
<li><a href="#usercar_Australia" data-toggle="tab">澳大利亚</a></li>
<li><a href="#usercar_Britain" data-toggle="tab">英国</a></li>
<li><a href="#usercar_Canada" data-toggle="tab">加拿大</a></li>
</ul>
<p><a href="#"> 更多境外租车 ></a></p>
</div>
<div id="recommended_menu_name4" class="tab-content recommended_menu_name4">
<div class="tab-pane in active recommended_menu_name_box4" id="usercar_americas">
<div class="thumbnail">
<img src="https://pic.c-ctrip.com/car/osd/online/vehicle_new/Ford_Fiesta.png">
<div class="car_info">
<p class="car_name">福特 嘉年华 Fiesta</p>
<p class="city">美国.洛杉矶
<span class="car_price">¥<span class="price">161</span>起</span>
</p>
</div>
</div>
<div class="thumbnail">
<img src="https://pic.c-ctrip.com/car/osd/online/vehicle_new/Ford_Fusion.png">
<div class="car_info">
<p class="car_name">福特 Fusion</p>
<p class="city">美国.旧金山
<span class="car_price">¥<span class="price">232</span>起</span>
</p>
</div>
</div>
<div class="thumbnail">
<img src="https://pic.c-ctrip.com/car/osd/online/vehicle_new/Chrysler_300.png">
<div class="car_info">
<p class="car_name">克莱斯勒 300</p>
<p class="city">美国.拉斯维加斯
<span class="car_price">¥<span class="price">295</span>起</span>
</p>
</div>
</div>
<div class="thumbnail">
<img src="https://pic.c-ctrip.com/car/osd/online/vehicle_new/Kia_Soul.png">
<div class="car_info">
<p class="car_name">起亚 Soul</p>
<p class="city">美国.纽约
<span class="car_price">¥<span class="price">385</span>起</span>
</p>
</div>
</div>
</div>
<div class="tab-pane" id="usercar_Thailand">2</div>
<div class="tab-pane" id="usercar_Australia">3</div>
<div class="tab-pane" id="usercar_Britain">4</div>
<div class="tab-pane" id="usercar_Canada">5</div>
</div>
</div>
</div>
<!-- 境外接送机 -->
<div class="tab-pane" id="outside_airport_transportation">2</div>
<!-- 国内租车 -->
<div class="tab-pane" id="domestic_car_rental">3</div>
<!-- 国内接送机 -->
<div class="tab-pane" id="domestic_airport_transportation">4</div>
<!-- 日租包车 -->
<div class="tab-pane" id="daily_special_rent">5</div>
</div>
</div>
<!-- 玩乐 -->
<div id="affix_nav_play">
<ul id="package_species_play" class="package_speciea_nav">
<li class="active"><a href="#outside_play" data-toggle="tab">当地玩乐·出境</a></li>
<li><a href="#domestic_play" data-toggle="tab">当地玩乐·境内</a></li>
</ul>
<!-- 一级导航栏选项卡 -->
<div id="recommended_menu5" class="tab-content recommended_menu">
<!-- 当地玩乐·出境 -->
<div class="tab-pane in active" id="outside_play">
<div class="entrance">
<label>热门目的地</label>
<ul>
<li><a href="#">普吉岛</a></li>
<li><a href="#">曼谷</a></li>
<li><a href="#">清迈</a></li>
<li><a href="#">巴厘岛</a></li>
<li><a href="#">东京</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">芭提雅</a></li>
<li><a href="#">大阪</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="product">
<div class="product_hd">
<ul id="place_nav5" class="place_nav">
<li class="active"><a href="#day_trip" data-toggle="tab">一日游</a></li>
<li><a href="#local_traffic" data-toggle="tab">当地交通</a></li>
<li><a href="#local_cuisine" data-toggle="tab">当地美食</a></li>
<li><a href="#tourism_services" data-toggle="tab">旅游服务</a></li>
</ul>
<p><a href="#"> 更多境外租车 ></a></p>
</div>
<!-- 二级导航栏选项卡 -->
<div id="recommended_menu_name5" class="tab-content recommended_menu_name5">
<div class="tab-pane in active recommended_menu_name_box5" id="day_trip">
<div class="thumbnail">
<img src="https://dimg04.c-ctrip.com/images/350j0x000000l6xc2727F_C_280_158.jpg">
<div class="play_info">
<p class="play_name">普吉岛斯米兰群岛浮潜一日游【多船型/快速登岛/2次浮潜】</p>
<p class="attractions">普吉岛
<span class="play_price">¥<span class="price">161</span>起</span>
</p>
</div>
</div>
<div class="thumbnail">
<img src="https://dimg08.c-ctrip.com/images/100g10000000ov0m0BAA6_C_280_158.jpg">
<div class="play_info">
<p class="play_name">普吉岛查龙寺+卡伦观景台+神仙半岛+普吉镇环岛一日游【VIP包车/线路可定制/说走就走】</p>
<p class="attractions">普吉岛
<span class="play_price">¥<span class="price">232</span>起</span>
</p>
</div>
</div>
<div class="thumbnail">
<img src="https://dimg04.c-ctrip.com/images/350q15000000yiwljC92F_C_280_158.jpg">
<div class="play_info">
<p class="play_name">普吉岛皮皮岛浮潜一日游【可选竹子岛/鸡蛋岛/蜜月岛/网红游艇】</p>
<p class="attractions">普吉岛
<span class="play_price">¥<span class="price">295</span>起</span>
</p>
</div>
</div>
<div class="thumbnail">
<img src="https://dimg04.c-ctrip.com/images/35051a0000019jbkbC9BC_C_280_158.jpg">
<div class="play_info">
<p class="play_name">普吉岛皇帝岛+皇帝岛潜水一日游【豪华游艇躺着出行/专业深潜船/多船可选】</p>
<p class="attractions">普吉岛
<span class="play_price">¥<span class="price">385</span>起</span>
</p>
</div>
</div>
</div>
<div class="tab-pane" id="local_traffic">2</div>
<div class="tab-pane" id="local_cuisine">3</div>
<div class="tab-pane" id="tourism_services">4</div>
</div>
</div>
</div>
<!-- 当地玩乐·境内 -->
<div class="tab-pane" id="domestic_play">2</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div id="foot">
<p>
<a href="#">网站导航</a>
<a href="#">宾馆索引</a>
<a href="#">机票索引</a>
<a href="#">旅游索引</a>
<a href="#">商旅索引</a>
<a href="#">攻略索引</a>
<a href="#">关于爱旅行</a>
<a href="#">企业公民</a>
<a href="#">诚聘英才</a>
<a href="#">智慧旅游</a>
<a href="#">分销联盟</a>
<a href="#">代理合作</a>
<a href="#">企业商旅</a>
<a href="#" 中小企业差旅></a>
<a href="#">广告业务</a>
<a href="#" class="foot_a_later">联系我们</a>
</p>
<p>
<a href="#">加盟合作</a>
<a href="#">酒店加盟</a>
<a href="#">目的地及景区合作</a>
<a href="#">用户协议</a>
<a href="#">隐私政策</a>
<a href="#">营业执照</a>
<a href="#">旅游度假资质</a>
<a href="#">保险代理</a>
<a href="#">友情链接</a>
</p>
<p>
<a href="#">Copyright©1990-2020& ctrip.com. All rights reserved. | </a>
<a href="#">ICP证：沪B2-20050130</a>
<a href="#">沪ICP备08023580号</a>
</p>
</div>
</body>
<script>
//两秒钟执行一次
$('.carousel').carousel({
interval: 3000
})
</script>
</html>
本文含有隐藏内容，请 开通VIP 后查看