<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>蓝莓派首页</title>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/swiper.min.css"/>
<link rel="stylesheet" href="css/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/header.css"/>
<link rel="stylesheet" href="css/index-baseDiv.css"/>
<link rel="stylesheet" type="text/css" href="css/apps/index.css">
</head>
<body>
<!--顶部-->
<div class="header">
<div class="header-logo"></div>
<div class="header-navi">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="yz.html">乐章</a></li>
<li><a href="#">听说</a></li>
<li><a href="lq.html">乐趣</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="header-menu">
<div class="he-me-input">
<input type="text"/>
<div class="input-btn"></div>
</div>
<a href="#" data-toggle="modal" data-target="#login" class="menu login">登录</a>
<a href="#" data-toggle="modal" data-target="#regist" class="menu regist">注册</a>
<a class="showInfo ahidden">你好</a>
<button class="btn btn-danger btn_hidden">注销用户</button>
</div>
</div>
<!-- 注册模态框 -->
<div class="modal fade" id="regist" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<p>
<span>用户名:</span><input type="text" class='regist-username' placeholder='请在此输入用户名'>
</p>
<p>
<span>密码值:</span><input type="password" class="regist-password" placeholder='请在此输入密码'>
</p>
<button class="registBtn btn btn-primary btn-lg" data-dismiss="modal">注册</button>
</div>
</div>
</div>
</div>
<!-- 登录模态框 -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<p>
<span>用户名:</span><input type="text" class='username' placeholder='请在此输入用户名'>
</p>
<p>
<span>密码值:</span><input type="password" class="password" placeholder='请在此输入密码'>
</p>
<button class="loginBtn btn btn-primary btn-lg" data-dismiss="modal">登录</button>
</div>
</div>
</div>
</div>
<!--顶部轮播-->
<div class="dblb"></div>
<!--<div class="swiper-container swiper-hd">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="ss-hd-text ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.3s">
<h1 align="center">我在爱尔兰,看着世界的阳光</h1>
<p> 爱尔兰(爱尔兰语:Poblacht na hÉireann;英语:Republic of Ireland), 是一个西欧的议会共和制国家,西邻大西洋,东靠爱尔兰海,与英国隔海相望,是北美通向欧洲的通道。爱尔兰自然环境保持得相当好,素有“翡翠岛国”之称,全国绿树成荫,河流纵横,草地遍布,所以又有“绿岛”和“绿宝石”之称。</p>
</div>
</div>
</div>
<div class="swiper-pagination hd-page" ></div>
</div>-->
<!--乐章模块-->
<div class="base-div">
<h3>乐 章</h3>
<div class="logo" style="background: url('img/header-yz-logo.png')"></div>
<h4>MOVEMENT</h4>
<div class="swiper-container swiper-yz">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
</div>
<div class="swiper-slide slide1">
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
</div>
<div class="swiper-slide slide1">
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
</div>
<div class="swiper-slide slide1">
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
</div>
</div>
<div class="swiper-pagination yz-page"></div>
</div>
</div>
<!--听说模块-->
<div class="base-div gray">
<h3>听 说</h3>
<div class="logo" style="background: url('img/header-ts-logo.png')"></div>
<h4>LISTENING</h4>
<div class="ts-container">
<div class="ts-container-item"></div>
<div class="ts-container-item"></div>
<div class="ts-container-item"></div>
<div class="ts-container-item"></div>
<div class="ts-container-item"></div>
<div class="ts-container-text" style="left: 240px; top: 0;">111</div>
<div class="ts-container-text" style="left: 720px; top: 0;">222</div>
<div class="ts-container-text" style="left: 960px; top: 277px;">333</div>
<div class="ts-container-text" style="left: 0; top: 277px;">444</div>
<div class="ts-container-text" style="left: 480px; top: 277px;">555</div>
</div>
</div>
<!--乐趣模块-->
<div class="base-div">
<h3>乐 趣</h3>
<div class="logo" style="background: url('img/header-lq-logo.png'); width: 22px; height: 22px;"></div>
<h4>INTERESTING</h4>
<div class="swiper-container swiper-lq">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
</div>
<div class="swiper-slide slide1">
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
</div>
<div class="swiper-slide slide1">
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
</div>
</div>
<div class="swiper-pagination lq-page"></div>
</div>
</div>
<!--聊聊模块-->
<div class="base-div gray">
<h3>聊 聊</h3>
<div class="logo" style="background: url('img/header-ll-logo.png');"></div>
<h4>CHATING</h4>
<div class="swiper-container swiper-ll">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
</div>
<div class="swiper-slide slide1">
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
</div>
<div class="swiper-slide slide1">
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
<div class="oneItem">
<div class="oneItem-img"></div>
<div class="oneItem-text">
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容在这写一大堆内容
</div>
</div>
</div>
</div>
<div class="swiper-pagination ll-page"></div>
</div>
</div>
<!--游记-->
<div class="base-div">
<h3>游 记</h3>
<div class="logo" style="background: url('img/header-yj-logo.png'); width: 22px; height: 22px;"></div>
<h4>TRAVELNOTE</h4>
<div class="swiper-container swiper-yj">
<div class="swiper-wrapper">
<div class="swiper-slide">
<ul>
<li class="yjItem">
<div class="yj-img"></div>
<p class="yj-title">跨越赤道的蜜月行-醉美毛里求斯</p>
<a href="#" class="yj-author">邋遢大叔frank</a>
<div class="yj-text">
<p>花の時光旅行【時光旅行】年轻就是用来折腾的,有力气去想,去做,而是为了稳定丢掉青春,为了平淡丢掉梦想。</p>
</div>
</li>
<li class="yjItem">
<div class="yj-img"></div>
<p class="yj-title">跨越赤道的蜜月行-醉美毛里求斯</p>
<a href="#" class="yj-author">邋遢大叔frank</a>
<div class="yj-text">
<p>花の時光旅行【時光旅行】年轻就是用来折腾的,有力气去想,去做,而是为了稳定丢掉青春,为了平淡丢掉梦想。</p>
</div>
</li>
<li class="yjItem">
<div class="yj-img"></div>
<p class="yj-title">跨越赤道的蜜月行-醉美毛里求斯</p>
<a href="#" class="yj-author">邋遢大叔frank</a>
<div class="yj-text">
<p>花の時光旅行【時光旅行】年轻就是用来折腾的,有力气去想,去做,而是为了稳定丢掉青春,为了平淡丢掉梦想。</p>
</div>
</li>
<li class="yjitem">
<div class="yj-img"></div>
<p class="yj-title">跨越赤道的蜜月行-醉美毛里求斯</p>
<a href="#" class="yj-author">邋遢大叔frank</a>
<div class="yj-text">
<p>花の時光旅行【時光旅行】年轻就是用来折腾的,有力气去想,去做,而是为了稳定丢掉青春,为了平淡丢掉梦想。</p>
</div>
</li>
</ul>
</div>
<div class="swiper-slide">
<ul>
<li class="yjItem">
<div class="yj-img"></div>
<p class="yj-title">跨越赤道的蜜月行-醉美毛里求斯</p>
<a href="#" class="yj-author">邋遢大叔frank</a>
<div class="yj-text">
<p>花の時光旅行【時光旅行】年轻就是用来折腾的,有力气去想,去做,而是为了稳定丢掉青春,为了平淡丢掉梦想。</p>
</div>
</li>
<li class="yjItem">
<div class="yj-img"></div>
<p class="yj-title">跨越赤道的蜜月行-醉美毛里求斯</p>
<a href="#" class="yj-author">邋遢大叔frank</a>
<div class="yj-text">
<p>花の時光旅行【時光旅行】年轻就是用来折腾的,有力气去想,去做,而是为了稳定丢掉青春,为了平淡丢掉梦想。</p>
</div>
</li>
<li class="yjItem">
<div class="yj-img"></div>
<p class="yj-title">跨越赤道的蜜月行-醉美毛里求斯</p>
<a href="#" class="yj-author">邋遢大叔frank</a>
<div class="yj-text">
<p>花の時光旅行【時光旅行】年轻就是用来折腾的,有力气去想,去做,而是为了稳定丢掉青春,为了平淡丢掉梦想。</p>
</div>
</li>
<li class="yjitem">
<div class="yj-img"></div>
<p class="yj-title">跨越赤道的蜜月行-醉美毛里求斯</p>
<a href="#" class="yj-author">邋遢大叔frank</a>
<div class="yj-text">
<p>花の時光旅行【時光旅行】年轻就是用来折腾的,有力气去想,去做,而是为了稳定丢掉青春,为了平淡丢掉梦想。</p>
</div>
</li>
</ul>
</div>
<div class="swiper-slide">
<ul>
<li class="yjItem">
<div class="yj-img"></div>
<p class="yj-title">跨越赤道的蜜月行-醉美毛里求斯</p>
<a href="#" class="yj-author">邋遢大叔frank</a>
<div class="yj-text">
<p>花の時光旅行【時光旅行】年轻就是用来折腾的,有力气去想,去做,而是为了稳定丢掉青春,为了平淡丢掉梦想。</p>
</div>
</li>
<li class="yjItem">
<div class="yj-img"></div>
<p class="yj-title">跨越赤道的蜜月行-醉美毛里求斯</p>
<a href="#" class="yj-author">邋遢大叔frank</a>
<div class="yj-text">
<p>花の時光旅行【時光旅行】年轻就是用来折腾的,有力气去想,去做,而是为了稳定丢掉青春,为了平淡丢掉梦想。</p>
</div>
</li>
<li class="yjItem">
<div class="yj-img"></div>
<p class="yj-title">跨越赤道的蜜月行-醉美毛里求斯</p>
<a href="#" class="yj-author">邋遢大叔frank</a>
<div class="yj-text">
<p>花の時光旅行【時光旅行】年轻就是用来折腾的,有力气去想,去做,而是为了稳定丢掉青春,为了平淡丢掉梦想。</p>
</div>
</li>
<li class="yjitem">
<div class="yj-img"></div>
<p class="yj-title">跨越赤道的蜜月行-醉美毛里求斯</p>
<a href="#" class="yj-author">邋遢大叔frank</a>
<div class="yj-text">
<p>花の時光旅行【時光旅行】年轻就是用来折腾的,有力气去想,去做,而是为了稳定丢掉青春,为了平淡丢掉梦想。</p>
</div>
</li>
</ul>
</div>
</div>
<div class="swiper-pagination yj-page"></div>
</div>
</div>
<!--照片墙-->
<div class="base-div gray">
<div class="imgWall">
<table border="0" cellpadding="0">
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</table>
</div>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/header.js"></script>
<script type="text/javascript" src='js/apps/index.js'></script>
<!--
data-toggle="modal" 按钮点击采用模态框切换的样式,必须属性
data-target="#myModal" 唤醒的时哪一个模态框
-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
唤醒模态框按钮
</button>
<!--
class="modal fade" 表示div采用模态框样式,并且唤醒或者消失采用渐变的效果
class="modal-dialog" 表示模态框采用对话框样式
class="modal-content" 表示模态框采用主体样式(背景为白色,不是透明)
data-dismiss="modal" 添加该属性时,在点击时能够主动消失模态框
-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
...
<img src="img/i8.jpg" alt=""/>
</div>
</div>
</div>
</div>
<script>
//自执行函数 (function(){})()
//封装js文件时习惯放在自执行函数中,保证不污染全局变量
//同时在自执行函数之前添加;语句,保证自执行函数独立执行,不受其他js语句影响。
;(function(){
//注销用户
$('.header-menu').find('.btn_hidden').click(function(){
$('.header-menu').find('.menu').css('display','inline-block');
$('.header-menu').find('.ahidden').css('display','none');
$('.header-menu').find('.btn_hidden').css('display','none');
});
//登陆用户
$('.loginBtn').click(function(){
var userName=$('.username').val();
var passWord=$('.password').val();
//判空的操作
if(userName.trim().length==0||passWord.trim().length==0){
alert('用户名或者密码不能为空!请检查输入!');
return;
}
//发送ajax请求
$.ajax({
type:'post',
url:'php/loginFile.php',
dataType:'json',
data:{
uname:userName,
upass:passWord
},
success:function(res){
switch(res.infoCode){
case 0:{
alert('登陆成功');
//登陆成功后页面结构变更
$('.header-menu').find('.menu').css('display','none');
$('.header-menu').find('.ahidden').css('display','inline-block');
$('.header-menu').find('.ahidden').html('欢迎回来!'+res.showUserName);
$('.header-menu').find('.btn_hidden').css('display','inline-block');
}
break;
case 1:{
alert('登陆失败!用户名或者密码错误!');
}
break;
case 2:{
alert('登陆失败!网络连接失败');
}
break;
case 3:{
alert('登陆失败!该用户名不存在');
}
break;
default:{
alert('未知错误!');
}
}
}
});
//发送完请求后,初始化输入框,等待下一次操作
$('.username').val('');
$('.password').val('');
});
})();
//首页顶部轮播图的ajax请求
;(function(){
//直接进入页面后,自动发送ajax请求
$.ajax({
type:'get',
url:'php/getTopSwiperData.php',
dataType:'json',
success:function(res){
console.log(res.swiperinfo);
var swiperInfoArr=res.swiperinfo;
//选中swiper容器
var dblb=document.querySelector('.dblb');
//构建swiper
var swiperhd=document.createElement('div');
swiperhd.className='swiper-container swiper-hd';
dblb.appendChild(swiperhd);
//构建wrapper
var swiperhd_wrapper=document.createElement('div');
swiperhd_wrapper.className='swiper-wrapper';
swiperhd.appendChild(swiperhd_wrapper);
//构建slide
for(var i=0;i<swiperInfoArr.length;i++){
//每一个slide容器
var slideDiv=document.createElement('div');
slideDiv.className='swiper-slide';
slideDiv.style.backgroundImage='url("'+swiperInfoArr[i].imgUrl+'")';
swiperhd_wrapper.appendChild(slideDiv);
//每一个slide里边的内容
var contDiv=document.createElement('div');
contDiv.className='ss-hd-text ani';
contDiv.setAttribute('swiper-animate-effect','bounceInRight');
contDiv.setAttribute('swiper-animate-duration','0.3s');
slideDiv.appendChild(contDiv);
//每一个slide里面的文本标题
var h1=document.createElement('h1');
h1.setAttribute('align','center');
h1.innerHTML=swiperInfoArr[i].dataTitle;
contDiv.appendChild(h1);
//每一个slide里面的主体内容
var p=document.createElement('p');
p.innerHTML=swiperInfoArr[i].dataContent;
contDiv.appendChild(p);
}
//构建wrapper平级的pagination
var swiperhd_page=document.createElement('div');
swiperhd_page.className='swiper-pagination hd-page';
swiperhd.appendChild(swiperhd_page);
//swiper构建完毕后的初始化
var swiper_hd=new Swiper('.swiper-hd',{
pagination:'.hd-page',
onInit:function(swiper){
swiperAnimateCache(swiper);//隐藏动画元素
swiperAnimate(swiper);//初始化完成开始动画
},
onSlideChangeEnd:function(swiper){
swiperAnimate(swiper);//每个slide切换结束时也运行当前slide动画
}
});
}
});
})();
</script>
</body>
</html>
老师,不出图片