<!DOCTYPE html>
<html>
<head>
<title>OPPO</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/swiper.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<style type="text/css">
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
#banner{
height:630px;
}
.swiper-container {
width: 100%;
height: 632px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<!-- 页面的顶部 -->
<div id="top">
<div class="container"></div>
</div>
<!-- 页面的头部 -->
<div id="header">
<div class="container">
<div class="header_left left">
<div class="xlwb"></div>
<div class="txwb"></div>
<div class="tel">4001-666-888</div>
</div>
<ul class="right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">积分兑换</a></li>
<li><a href="#">帮助中心</a></li>
<li class="shop_car"><span></span><a href="#">购物车</a></li>
</ul>
</div>
</div>
<!-- 页面的导航 -->
<div id="nav">
<div class="container">
<div class="logo left">
<img src="img/logo.png">
</div>
<ul class="right">
<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="#">ColorOS</a></li>
</ul>
</div>
</div>
<!-- 页面的banner部分 -->
<div id="banner">
<!-- <div class="container"></div> -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/banner1.jpg" width="100%;" height="630"></div>
<div class="swiper-slide"><img src="img/banner2.jpg" width="100%;" height="630"></div>
<div class="swiper-slide"><img src="img/banner3.jpg" width="100%;" height="630"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<div class="swiper-button-next">1</div>
<div class="swiper-button-prev"></div>
</div>
<div class="banner-nav-bg"></div>
</div>
<!-- 页面的明星机型部分 -->
<!-- 页面的精选配件部分 -->
<div id="accessory">
<div class="container">
<div class="acc_top">
<img src="img/wb.png">
</div>
<div class="acc_main">
<div class="acc_left left">
<div>
<img src="img/20150413174400N0dPnxUKHk.jpg">
</div>
<div class="acc_all">
<p>OPPO手机官网AAESSORY配件</p>
<ul>
<li>耳机</li>
<li>耳机</li>
<li>耳机</li>
<li>耳机</li>
<li>耳机</li>
<li>耳机</li>
</ul>
<h2 class="line"></h2>
<p class="acc">全部配件<span></span></p>
</div>
<div>
<img src="img/20131120165101xYIYzhkVEy.jpg">
</div>
<div>
<img src="img/20150413174340NLV2gvV4FU.jpg">
</div>
</div>
<div class="acc_right right">
<div>
<img src="img/20150123182505RO822scYYt.jpg">
</div>
<div>
<img src="img/20141230145609l7Fsk7CdHy.jpg">
</div>
<div>
<img src="img/20141011101157yZEFpMrk0h.jpg">
</div>
<div>
<img src="img/201410270957132inlm3IwsV.jpg">
</div>
</div>
</div>
</div>
</div>
<!-- 页面的搜索欧珀部分 -->
<!-- 页面的服务部分 -->
<div id="serve">
<div class="container">
<ul>
<li>
<dl>
<dt></dt>
<dd class="dd1">正品保障</dd>
<dd class="dd2">所有的商品都是原装产品</dd>
</dl>
</li>
<li>
<dl>
<dt></dt>
<dd class="dd1">正品保障</dd>
<dd class="dd2">所有的商品都是原装产品</dd>
</dl>
</li>
<li>
<dl>
<dt></dt>
<dd class="dd1">正品保障</dd>
<dd class="dd2">所有的商品都是原装产品</dd>
</dl>
</li>
<li>
<dl>
<dt></dt>
<dd class="dd1">正品保障</dd>
<dd class="dd2">所有的商品都是原装产品</dd>
</dl>
</li>
<li>
<dl>
<dt></dt>
<dd class="dd1">正品保障</dd>
<dd class="dd2">所有的商品都是原装产品</dd>
</dl>
</li>
</ul>
</div>
</div>
<!-- 页面的售后服务部分 -->
<div id="after_sale">
<div class="container">
<ul>
<li>
<ol>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于OPPO</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">人才招聘</a></li>
</ol>
</li>
<li>
<ol>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于OPPO</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">人才招聘</a></li>
</ol>
</li>
<li>
<ol>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于OPPO</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">人才招聘</a></li>
</ol>
</li>
<li>
<ol>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于OPPO</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">人才招聘</a></li>
</ol>
</li>
<li>
<ol>
<li><span class="xl"></span><a href="#">新浪微博</a></li>
<li><span class="xl"></span><a href="#">腾讯微博</a></li>
<li><span class="xl"></span><a href="#">人人网</a></li>
<li><span class="xl"></span><a href="#">QQ空间</a></li>
</ol>
</li>
<li>
<ol>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于OPPO</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">人才招聘</a></li>
</ol>
</li>
</ul>
</div>
</div>
<!-- 页面的底部 -->
<div id="footer">
<div class="container">
<p style="margin-left:480px;">
<img src="img/i-f-logo.png">
<span>oppo手机</span>
</p>
</div>
</div>
<script type="text/javascript" src="js/swiper.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
loop: true,
autoplay: 3000,
speed: 1000,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
effect: 'fade',// effect: 'flip',effect: 'coverflow',slide', 'fade',cube
grabCursor: true,
cube: {
shadow: false,
slideShadows: false,
shadowOffset: 20,
shadowScale: 0.94
}
});
</script>
</body>
</html>