<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<link rel="stylesheet" type="text/css" href="./css/base.css">
<!-- 引入icomoon.io图标 -->
<link rel="stylesheet" type="text/css" href="./static/style.css">
<script type="text/javascript" src="./js/index.js"></script>
<!-- 由于js文件是在html文档头部引入 -->
</head>
<body>
<!-- 最外层的div（容器） -->
<div class="container">
<!-- 头部导航栏 -->
<div class="header">
<!-- 左边导航 -->
<div class="header-left">
<span class="icon-location2 incon-fontzise"></span>
<a href="">成都</a>
<a href="">切换城市</a>
<a href="">[新津区 崇州市 彭州]</a>
<a href="">立即登录</a>
<a href="">注册</a>
</div>
<!-- 右边导航 -->
<div class="header-right">
<!--导航菜单，通过无序列表来制作菜单，方便布局 -->
<ul id="dropdown">
<li>
<a href="">我的美团</a>
<dl class="displayNone">
<dd> <a href="">我的订单</a> </dd>
<dd> <a href="">我的收藏</a> </dd>
<dd> <a href="">抵用券</a> </dd>
<dd> <a href="">账户设置</a> </dd>
</dl>
</li>
<li>
<a href="">手机app</a>
</li>
<li>
<a href="">商家中心</a>
<dl class="displayNone">
<dd>
<a href="#">美团餐饮商户中心</a>
</dd>
<dd>
<a href="#">登录商家中心</a>
</dd>
<dd>
<a href="#">美团智能收银</a>
</dd>
<dd>
<a href="#">我想合作</a>
</dd>
<dd>
<a href="#">手机免费开店</a>
</dd>
<dd>
<a href="#">到店综合业务招募</a>
</dd>
<dd>
<a href="#">餐饮合作社招募</a>
</dd>
<dd>
<a href="#">商家申请开票</a>
</dd>
<dd>
<a href="#">免费合作美团排队</a>
</dd>
</dl>
</li>
<li>
<a href="">美团规则</a>
<dl class="displayNone">
<dd>
<a href="#">规则中心</a>
</dd>
<dd>
<a href="#">规则目录</a>
</dd>
<dd>
<a href="#">规则评议院</a>
</dd>
</dl>
</li>
<li>
<a href="">网站导航</a>
</li>
</ul>
</div>
</div>
<!-- 搜索区域,贯穿屏幕 -->
<div class="search">
<!-- 居中布局 -->
<div class="search-center">
<!-- 中部靠左 -->
<div class="search-center-left">
<a href="">
<img src="./images/logo.png" />
</a>
</div>
<!-- 中部靠中 -->
<div class="search-center-center">
<input type="text" placeholder=" 搜索商家或地点" />
<button>
<span class="icon-search"></span>
</button>
</div>
</div>
</div>
<!--做中间的主要内容区域
编程思维：需求分析，拆解需求，化繁为简。
1.布局框架
-找出最大的盒子
最大的div盒子贯穿横向网页，并且嵌套1个div用来装载主要内容.
-找出小盒子
中-左（侧边导航栏）
-搭建好盒子模型
2.向每一个盒子增加内容
3.轮播图
-需求分析
a):有圆形边框两个箭头，鼠标移入显示，鼠标移出隐藏
b):点击两个箭头，会切换图片，点击左边箭头，切换到上一张。点击右边，切换到下一张。
-每当到最后一张，点击切换按钮，会重新开始。
c):轮播图需要支持5张以上图片切换
d):图片会自动切换到下一张,时间间隔3秒钟（和点击右边箭头效果一致）
e):轮播图下标
-下标数量和轮播图数量一致
-当切换到对应图片，对应下标高亮
（扩展内容）
-当鼠标悬浮到对应下标，则播放相应图片
f)图片自带超链接（每张图片的超链接不一样）
-给轮播图片<img>嵌套一个a标签
-在轮播的时候，更改a标签href的值
3.1编写箭头
-通过<>做出来左右箭头雏形
-通过css加工箭头，给箭头加上一层边框
-通过js控制箭头的显示和隐藏
3.2第一个图片切换效果(通过点击左右箭头实现轮播图切换)
-首先需要几张图片
-点击左右箭头，本质是切换img控件的src属性的值，每次更改scr="值"的字符串
3.3使用setInterval进行图片的自动轮播
3.4轮播图下标
-制作轮播图下标
-建立列表，给列表每个li设置高度、宽度、背颜色、透明度等等来制作下标
-根据图片顺序更改下标状态
-->
<!-- 用来方便布局的盒子 -->
<div class="main">
<!-- 内容区域 -->
<div class="main-center">
<!-- 中-左（侧边导航栏-简称侧边栏）
1.菜单标题
-图标 文字 箭头
2.增加鼠标覆盖菜单标题显示的函数
3.制作右边菜单
-在每一个菜单标题下边放置1个div
-通过定位(absolute)来设置偏移量，让div到正确的位置
-通过js来控制菜单的显示
-->
<div class="main-center-left">
<!-- 标题 -->
<span>全部分类</span>
<!-- 菜单标题列表 -->
<ul id="dropright">
<li>
<i class="icon-earth1"></i>
<span>美食</span>
<span>></span>
<!--菜单内容 -->
<div class="menuDetails displayNone">
11111111
</div>
</li>
<li>
<i class="icon-ipod11"></i>
<span>外卖</span>
<span>></span>
<div class="menuDetails displayNone">
2222222
</div>
</li>
<li>
<i class="icon-bird"></i>
<span>酒店</span>
<span>></span>
<div class="menuDetails displayNone">
3333
</div>
</li>
<li>
<i class="icon-feed"></i>
<span>民宿</span>
<span>></span>
<div class="menuDetails displayNone">
4444
</div>
</li>
<li>
<i class="icon-envelope"></i>
<span>猫眼电影</span>
<span>></span>
<div class="menuDetails displayNone">
5555
</div>
</li>
<li>
<i class="icon-envelope1"></i>
<span>机票 / 火车票</span>
<span>></span>
<div class="menuDetails displayNone">
5555
</div>
</li>
<li>
<i class="icon-phone"></i>
<span>休闲娱乐 / KTV</span>
<span>></span>
<div class="menuDetails displayNone">
666
</div>
</li>
<li>
<i class="icon-ipod11"></i>
<span>生活服务</span>
<span>></span>
<div class="menuDetails displayNone">
7777
</div>
</li>
<li>
<i class="icon-headphone1"></i>
<span>丽人 / 美发 / 医学美容</span>
<span>></span>
<div class="menuDetails displayNone">
8888
</div>
</li>
<li>
<i class="icon-earth1"></i>
<span>结婚 / 婚纱摄影 / 婚宴</span>
<span>></span>
<div class="menuDetails displayNone">
9999
</div>
</li>
<li>
<i class="icon-globe1"></i>
<span>亲子 / 儿童乐园 / 幼教</span>
<span>></span>
<div class="menuDetails displayNone">
1010
</div>
</li>
<li>
<i class="icon-pin1"></i>
<span>运动健身 / 健身中心</span>
<span>></span>
<div class="menuDetails displayNone">
111111
</div>
</li>
<li>
<i class="icon-share"></i>
<span>家装 / 建材 / 家居</span>
<span>></span>
<div class="menuDetails displayNone">
121212121212
</div>
</li>
<li>
<i class="icon-feed1"></i>
<span>学习培训 / 音乐培训</span>
<span>></span>
<div class="menuDetails displayNone">
1313
</div>
</li>
<li>
<i class="icon-cd"></i>
<span>医疗健康 / 宠物 / 爱车</span>
<span>></span>
<div class="menuDetails displayNone">
1414
</div>
</li>
<li>
<i class="icon-pictures"></i>
<span>酒吧 / 密室逃脱</span>
<span>></span>
<div class="menuDetails displayNone">
1515
</div>
</li>
</ul>
</div>
<!-- 中-中 -->
<div class="main-center-center">
<!--中央内容标题导航部分(上部分) -->
<div class="main-center-center-top">
<a href=""> 美团外卖 </a>
<a href=""> 猫眼电影 </a>
<a href=""> 美团酒店 </a>
<a href=""> 名宿/公寓 </a>
<a href=""> 商家入驻 </a>
<a href=""> 美团公益 </a>
</div>
<!-- 中央内容下部分 -->
<div class="main-center-center-bottom">
<!-- 轮播 -->
<div id="carousel">
<!-- 图片 -->
<!-- <a href=""></a> -->
<img src="" id="centerImage" />
<!-- 左边箭头 -->
<div style="display: block;" id="left"> < </div>
<!-- 右边箭头 -->
<div id="right"> ></div>
<div id="number">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<!-- 填充其他内容区域 -->
</div>
<!-- 休闲生活 -->
<div class="leisure">
</div>
<!--酒店 -->
<div class="hotal">
</div>
<!-- 涨姿势 -->
<div class="newKnowledge">
</div>
<!-- 商家 -->
<div class="business">
</div>
</div>
</div>
<!-- 中右 -->
<div class="main-center-right">
<!-- 中-右-上 -->
<div class="main-center-right-top">
<div></div>
<p>Hi!你好</p>
<!-- 把超链接做成按钮样式 -->
<div>
<a href="">立即登录</a>
</div>
<div>
<a href="">注册</a>
</div>
</div>
<!-- 中-右-下 -->
<div class="main-center-right-bottom">
<!-- <div>11</div> -->
<img src="./images/download-qr.png" style="margin-top:20px; width: 75px;
height: 75px;" />
<p>美团App手机版</p>
<span>一元起</span> <span>吃喝玩乐</span>
</div>
</div>
</div>
</div>
<!--
猫眼电影
-需求分析
1.有tab内容切换，总共2个tab
2.过渡动画
-总共要显示10个电影（div），每次只显示5个
-
3.两个箭头切换按钮
-->
<div class="miaoFilm">
<!--标题部分 -->
<div class="filmNav">
<div class="filmNav-title">猫眼电影</div>
<ul id="fileTabTitle">
<li>正在热映
<!-- <p></p> -->
</li>
<li>即将上映</li>
</ul>
<div class="filmNav-all">全部></div>
</div>
<div id="film-left"> <</div>
<div id="film-right">> </div>
<!-- 电影内容横向列表1 -->
<div class="filmList">
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm1.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm1.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm1.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm2.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm3.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm4.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm5.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm6.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm7.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm8.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm9.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm10.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
</div>
<!-- 电影内容横向列表2 -->
<div class="filmList displayNone">
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm6.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm7.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm8.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm9.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm10.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm1.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm1.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm1.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
<div class="filmContent">
<!-- 直接放置img,还有一种设置为背景 -->
<img class="filmLogo" src="./images/mm2.jpg"/>
<div class="filmInfo">
<div class="filmLook">
<span>33</span>人想看
</div>
<div class="filmName">
夏至廊桥
</div>
</div>
</div>
</div>
</div>
<!-- 推荐民宿
1.分析需求（查看资料）
-化繁为简=》拆解为自己能够拆解到的最小需求粒度。
-基本布局
-布局title(标题)
-内容显示区域
-css 样式
-js
-操作内容显示区域：在鼠标移动到某个title上，就显示和title绑定的tab
-title与tab通过下标索引绑定
-->
<!-- 横向布局容器 -->
<div class="hotel">
<!-- 中间内容区域 -->
<div class="hotel-center">
<!--名宿-中央-上 -->
<!-- <div class="hotel-center-tab-title">
</div> -->
<div class="hotel-center-top">
<div>推荐民宿</div>
<!-- 增加id -->
<ul id="hotel-tab">
<li>重庆
</li>
<li>绵阳</li>
<li>乐山</li>
<li>凉山彝族自治州</li>
<li>遵义</li>
<li>自贡</li>
<li>雅安</li>
<li>宜宾</li>
<li>内江</li>
<li>泸州</li>
</ul>
</div>
<div class="hotel-center-bottom">
<!-- 内容列表1 -->
<div id="tab-container">
<div class="tablist">
<div>
<a href="">
<img src="./images/hh1.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh2.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh3.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh4.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh5.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh6.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
</div>
<div class="tablist tabdisplayNone">
<div>
<a href="">
<img src="./images/hh7.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh8.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh9.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh10.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh11.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh13.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
</div>
<div class="tablist tabdisplayNone">
<div>
<a href="">
<img src="./images/hh14.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh15.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh16.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh16.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh18.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh19.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
</div>
<div class="tablist tabdisplayNone">
<div>
<a href="">
<img src="./images/hh20.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh21.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh22.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh23.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh24.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh25.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
</div>
<div class="tablist tabdisplayNone">
<div>
<a href="">
<img src="./images/hh26.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh27.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh28.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh29.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh30.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh31.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
</div>
<div class="tablist tabdisplayNone">
<div>
<a href="">
<img src="./images/hh32.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh33.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh34.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh35.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh36.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh37.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
</div>
<div class="tablist tabdisplayNone">
<div>
<a href="">
<img src="./images/hh38.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh39.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh40.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh41.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh42.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh43.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
</div>
<div class="tablist tabdisplayNone">
<div>
<a href="">
<img src="./images/hh44.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh45.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh46.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh47.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh48.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh49.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
</div>
<div class="tablist tabdisplayNone">
<div>
<a href="">
<img src="./images/h50.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh51.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh52.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh53.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh54.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh55.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
</div>
<div class="tablist tabdisplayNone">
<div>
<a href="">
<img src="./images/hh56.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh57.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh58.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh59.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh60.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
<div>
<a href="">
<img src="./images/hh61.jpg" />
</a>
<span>青衫·宿—落日全景投影大床房</span>
<p>整套1居室·可住2人 | 乐山火车站</p>
<b>¥182</b>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 猜你喜欢-->
<div class="like">
<div class="like-center">
<!-- 猜你喜欢的顶部 -->
<div class="like-center-top">
<span>猜你喜欢</span>
<span>为你甄选最合适的</span>
</div>
<!-- 猜你喜欢的列表 -->
<div class="like-center-bottom">
<div class="list">
<img src="./images/ll1.jpg" alt="美食">
<div>晓寿司(望京soho店)</div>
<div></div>
<div>望京</div>
<div>¥47.5起</div>
</div>
<div class="list">
<img src="./images/ll2.png" alt="美食">
<div>蟹老宋香锅（方庄店）</div>
<div></div>
<div>方庄</div>
<div>¥95.5起</div>
</div>
<div class="list">
<img src="./images/ll3.jpg" alt="美食">
<div>分米鸡(喜隆多店)</div>
<div></div>
<div>喜隆多</div>
<div>¥88.0起</div>
</div>
<div class="list">
<img src="./images/ll4.jpg" alt="美食">
<div>便宜坊烤鸭店(富丰路店)</div>
<div></div>
<div>富丰路</div>
<div>¥92.0起</div>
</div>
<div class="list">
<img src="./images/ll5.jpg" alt="美食">
<div>铁木真自助城(西三旗店)</div>
<div></div>
<div>西三旗店</div>
<div>¥82.9起</div>
</div>
<div class="list">
<img src="./images/ll6.jpg" alt="美食">
<div>味多美(紫金数码店)</div>
<div></div>
<div>双榆树</div>
<div>¥47.5起</div>
</div>
<div class="list">
<img src="./images/ll7.jpg" alt="美食">
<div>农家铁锅炖(松原店)</div>
<div></div>
<div>松原</div>
<div>¥88.5=0起</div>
</div>
<div class="list">
<img src="./images/ll8.jpeg" alt="美食">
<div>芦月轩羊蝎子(杨闸店)</div>
<div></div>
<div>杨闸</div>
<div>¥89.9起</div>
</div>
<div class="list">
<img src="./images/ll9.png" alt="美食">
<div>宽板凳老灶火锅(古城店)</div>
<div></div>
<div>古城</div>
<div>¥39.9起</div>
</div>
<div class="list">
<img src="./images/ll10.jpg" alt="美食">
<div>华莱士(石油大学店)</div>
<div></div>
<div>常平镇</div>
<div>¥10.9起</div>
</div>
<div class="list">
<img src="./images/ll11.jpeg" alt="美食">
<div>吊炉烤鸭(城北店)</div>
<div></div>
<div>城北</div>
<div>¥53.2起</div>
</div>
<div class="list">
<img src="./images/ll12.jpg" alt="美食">
<div>巴西烤肉(回龙观店)</div>
<div></div>
<div>回龙观</div>
<div>¥63.5起</div>
</div>
<div class="list">
<img src="./images/ll13.jpg" alt="美食">
<div>火炉下(太庙店)</div>
<div></div>
<div>太庙</div>
<div>¥55.2起</div>
</div>
<div class="list">
<img src="./images/ll14.jpg" alt="美食">
<div>巴蜀大虾(莲花桥店)</div>
<div></div>
<div>莲花桥</div>
<div>¥1.98起</div>
</div>
<div class="list">
<img src="./images/ll15.jpg" alt="美食">
<div>老诚一锅(东大桥店)</div>
<div></div>
<div>东大桥</div>
<div>¥90.0起</div>
</div>
</div>
</div>
</div>
<!-- 副导航-->
<div class="navbar">
<div class="navbar-center">
<div class="navbar-center-top">
美团导航
</div>
<div class="navbar-center-bottom">
<div class="hotcity">
热门城市
</div>
<div class="city">
<ul>
<li>南宁</li>
<li>北京</li>
<li>深圳</li>
<li>长春</li>
<li>西安</li>
<li>成都</li>
<li>武汉</li>
<li>温州</li>
<li>上海</li>
<li>宁波</li>
<li>青岛</li>
<li>长沙</li>
<li>重庆</li>
<li>郑州</li>
<li>大连</li>
<li>苏州</li>
<li>天津</li>
<li>合肥</li>
<li>常州</li>
<li>哈尔滨</li>
</ul>
</div>
<div class="hotcity">
热门分类
</div>
<div class="city">
<ul>
<li>酒店</li>
<li>美食</li>
<li>休闲娱乐</li>
<li>运动健身</li>
<li>生活服务</li>
<li>上门服务</li>
<li>购物</li>
<li>时尚购</li>
<li>本地购物</li>
<li>结婚</li>
<li>摄影</li>
<li>写真</li>
<li>宴会</li>
<li>丽人</li>
<li>母婴</li>
<li>亲子学习</li>
<li>培训</li>
<li>家装</li>
<li>汽车服务</li>
<li>医疗宠物</li>
</ul>
</div>
<div class="hotcity">
周边热门
</div>
<div class="city">
<ul>
<li>廊坊酒店</li>
<li>廊坊美食</li>
<li>大厂回族</li>
<li>自治县</li>
<li>休闲娱乐</li>
<li>运动健身</li>
<li>上门服务</li>
<li>时尚购</li>
<li>母婴亲子</li>
<li>汽车服务</li>
<li>结婚</li>
<li>门头沟区</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 底部链接-->
<div class="footer">
<div class="footer-center">
<div class="footer-center-content">
<ul>
<b>用户帮助</b>
<li>申请退款</li>
<li>常见问题</li>
<li>用户协议</li>
<li>隐私政策</li>
<li>反诈骗公告</li>
<li>消费者权益保障</li>
</ul>
</div>
<div class="footer-center-content">
<ul>
<b>商家合作</b>
<li>美食商家入驻(非外卖)</li>
<li>美团外卖开店</li>
<li>美团收银官网</li>
<li>美团配送合作申请</li>
<li>美团餐饮学院</li>
<li>酒店商家入驻</li>
</ul>
</div>
<div class="footer-center-content">
<ul>
<b>合作商招募</b>
<li>美团外卖合作商招募</li>
<li>到店餐饮合作商招募</li>
<li>到店综合业务合作商招募</li>
<li>美团联盟</li>
<li>美团收银招募线上分销商</li>
<li>美团收银合作商招募</li>
</ul>
</div>
<div class="footer-center-content">
<ul>
<b>关注美团</b>
<li>美团新浪微博</li>
<li>常见问题</li>
<li>用户协议</li>
</ul>
</div>
<div class="footer-center-content">
<ul>
<b>消费者服务热线</b>
<li>外卖消费者：10109777</li>
<li>猫眼消费者：10105335</li>
<li>其他消费者：10107888</li>
</ul>
</div>
<div class="footer-center-content">
<ul>
<b>用户帮助</b>
<li>申请退款</li>
<li>常见问题</li>
<li>用户协议</li>
<li>隐私政策</li>
<li>反诈骗公告</li>
<li>消费者权益保障</li>
</ul>
</div>
<div class="footer-center-content">
<ul>
<b>美团服务</b>
<li>美团外卖</li>
<li>美团酒店</li>
<li>猫眼电影</li>
<li>美团配送</li>
<li>美团云</li>
<li>大众点评</li>
</ul>
</div>
<div class="footer-center-content">
<ul>
<b>商家合作</b>
<li>境内度假商家入驻</li>
<li>综合商家入驻</li>
<li>美团民宿房东</li>
<li>商家入驻</li>
<li>商家开票</li>
<li>申请美团智能收银机</li>
</ul>
</div>
<div class="footer-center-content">
<ul>
<b>美团规则</b>
<li>规则中心</li>
<li>规则评议院</li>
<li>规则目录</li>
</ul>
</div>
<div class="footer-center-content">
<ul>
<b>投诉举报专区</b>
<li>违法和不良信息举报电话：4006018900</li>
<li>举报邮箱：tousujubao@meituan.com</li>
<li>网上有害信息举报</li>
<li>商家自助入驻美团入口</li>
<li>供应商注册入口</li>
</ul>
</div>
</div>
</div>
<!-- 关于网站的介绍 -->
<div class="info">
<div class="info-center">
以下为版权信息填写，做强做大等你来！
</div>
</div>
</div>
</body>
</html>