成品
一、框架实现
构建top,header,nav,banner,star,accessory,world,serve,after_sale,footer10个部分框架,然后再逐步构建每一部分。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>oppo</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--页面的顶部-->
<div id="top">
<div class="container"></div>
</div>
<!--页面的头部-->
<div id="header"><div class="container"></div>
</div>
<!--页面的d导航-->
<div id="nav"><div class="container"></div>
</div>
<!--页面的banner-->
<div id="banner"><div class="container"></div>
</div>
<!--页面的明星机型-->
<div id="star"><div class="container"></div>
</div>
<!--精选配件-->
<div id="accessory"><div class="container"></div>
</div>
<!--搜索oupo-->
<div id="world"><div class="container"></div>
</div>
<!--服务部分-->
<div id="serve"><div class="container"></div>
</div>
<!--售后部分-->
<div id="after_sale"><div class="container"></div>
</div>
<!--页面底端-->
<div id="footer"><div class="container"></div>
</div>
</body>
</html>
css/index.css
*{
margin: 0;
padding: 0;
}
ol,ul{
list-style: none;
}
a{
color: #666;
text-decoration:none;
}
.left{
float: left;
}
.right{
float: right;
}
/*测试部分*/
#top,#header,#nav,#banner,#star,#accessory,#world,#serve,#after_sale,#footer{
height: 100px;
width: 100%;
border:1px solid #000;
}
.container{
width: 1280px;
border: 1px solid #f00;
margin: 0 auto;
}
二、页面顶部
思路:
1.工具:利用取色器将页面截图取色、利用画板来看一张图片中的图标位置和距离右上角的像素距离。
画板取色方法:http://www.tudoupe.com/win10/win10jiqiao/2017/0915/7089.html
2.将购物车右侧的边框去掉的方法为单独为购物车设置样式。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>oppo</title>
<link rel="stylesheet" href="css/index.css">
</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">400-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>
<!--页面的d导航-->
<div id="nav"><div class="container"></div>
</div>
<!--页面的banner-->
<div id="banner"><div class="container"></div>
</div>
<!--页面的明星机型-->
<div id="star"><div class="container"></div>
</div>
<!--精选配件-->
<div id="accessory"><div class="container"></div>
</div>
<!--搜索oupo-->
<div id="world"><div class="container"></div>
</div>
<!--服务部分-->
<div id="serve"><div class="container"></div>
</div>
<!--售后部分-->
<div id="after_sale"><div class="container"></div>
</div>
<!--页面底端-->
<div id="footer"><div class="container"></div>
</div>
</body>
</html>
css/index.css
*{
margin: 0;
padding: 0;
font-size: 14px;
}
ol,ul{
list-style-type: none;
}
a{
color:#666;
text-decoration:none;
}
.left{
float: left;
}
.right{
float: right;
}
/*测试部分*/
#top,#header,#nav,#banner,#star,#accessory,#world,#serve,#after_sale,#footer{
height: 100px;
width: 100%;
border:1px solid #000;
}
.container{
width: 1280px;
border: 1px solid #f00;
margin: 0 auto;
}
/*设置顶部的样式*/
#top{
height: 10px;
background-color: #00925f;
}
/*设置页面的头部*/
#header{
height: 30px;
background-color: #2d2d2d;
}
#header .xlwb{
width: 20px;
height: 17px;
background:url("../img/icons.png") no-repeat -47px -95px;
/*为啥这里路径要加..*/
}
#header .txwb{
width: 20px;
height: 20px;
background:url("../img/icons.png") no-repeat -27px -92px;
/*为啥这里路径要加..*/
}
#header .tel{
color: #17925f;
}
#header .header_left div{
float: left;
margin: 5px 10px 0px 10px;
}/*让top栏的图标在一行显示*/
#header ul li{
float: left;
margin: 5px 0px;
}/*让top栏中的右边的几个列表也在一行显示*/
#header li a{
color: #b2b2b2;
font-size: 14px;
border-right: 1px solid #b2b2b2;
padding: 0px 15px;
}
#header li a:hover{
color: #00925f;
}
#header .shop_car a{
border: none;
padding-left: 15px;
}
#header .shop_car span{
width: 19px;
height: 16px;
vertical-align:middle;/*调整购物车图标位置*/
/*apan是一个行内元素,不能设置宽度和高度,所以改变其属性*/
display: inline-block;
margin-left:5px;
background: url("../img/icons.png") no-repeat 0px -95px;
}
三、导航栏
之后只附该区域代码。
<!--页面的d导航-->
<div id="nav">
<div class="container">
<div class="logo left">
<img src="img/logo.png" alt="OPPO">
</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>
#header .shop_car span{
width: 19px;
height: 16px;
vertical-align:middle;/*调整购物车图标位置*/
/*apan是一个行内元素,不能设置宽度和高度,所以改变其属性*/
display: inline-block;
margin-left:5px;
background: url("../img/icons.png") no-repeat 0px -95px;
}
/*设置导航栏的样式*/
#nav{
color: rgb(238,238,238);
height: 90px;
}
#nav li{
float: left;
margin: 0px 15px;
line-height: 90px;
/*vertical-align: middle;*/
}
#nav li a{
color: #666666;
font-weight: bold;/*加粗*/
}
#nav li a:hover{
color: #00925F;
font-weight: bold;/*加粗*/
}
四、明星机型板块
因为banner部分比较复杂需要用到插件所以暂时跳过
的明星机型-->
<div id="star">
<div class="container">
<div class="star_top">
<img src="img/i-c-title.png" alt="明星机型" >
</div>
<div>
<ul >
<li>
<div>
<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
<h2>N3</h2>
<p>1600万电动旋转摄像头</p>
<p class="money">¥ 3999 立即购买<span></span></p>
</div>
</li>
<li>
<div>
<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
<h2>N3</h2>
<p>1600万电动旋转摄像头</p>
<p class="money">¥ 3999 立即购买<span></span></p>
</div>
</li>
<li>
<div>
<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
<h2>N3</h2>
<p>1600万电动旋转摄像头</p>
<p class="money">¥ 3999 立即购买<span></span></p>
</div>
</li>
<li>
<div>
<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
<h2>N3</h2>
<p>1600万电动旋转摄像头</p>
<p class="money">¥ 3999 立即购买<span></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
/*设置明星机型页面的样式*/
#star{
height: 700px;
background-color: #f2f2f2;
}
#star .star_top{
text-align: center;/*水平居中*/
margin:10px;
}
#star ul{
width:1182px;
margin: 10px auto;
/*text-align: center;*/
}
#star li{
width: 270px;
border-bottom: 1px solid #dfdfdf;
float: left;
margin-left: 20px;
transition: all 0.3s;
}
#star li:hover{
border-bottom: 5px solid #4f8590;
transform:translateY(-10px);
}
#star li img{
width: 270px;
}
#star li h2{
text-align: center;
margin: 10px 0px;
}
#star li .money{
color: #00925f;
font-size: 14px;
font-weight: bold;
}
#star li p{
text-align: center;
margin: 10px 0px;
font-size: 12px;
color: #bdbdbd;
}
#star li span{
width: 13px;
height: 13px;
display: inline-block;
background:url("../img/icons-1.png") no-repeat -177px -1014px;
margin-left: 5px;
}
五、精选配件功能
<!--精选配件-->
<div id="accessory">
<div class="container">
<div class="acc_top">
<img src="img/wb.png" alt="">
</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>
/*设置精选配件之间的样式*/
#accessory{
background-color: #f6f6f6;
height: 950px;
}
#accessory .acc_top{
text-align: center;
margin: 20px 0;
}
#accessory .acc_main{
width: 1090px;
margin: 10px auto;
}
#accessory .acc_left{
width: 540px;
/*border: 1px solid #000;*/
}
#accessory .acc_left div{
float: left;
margin:10px;
border-bottom:4px solid #dfdfdf;
transition: all 0.3s;
}
#accessory .acc_left img{
width: 250px;
/*border-bottom:4px solid #dfdfdf*/
/*margin-bottom: 20px;
margin-right: 20px;*/
}
#accessory .acc_left div:hover{
border-bottom:4px solid #4f8590;
transform:translateY(-10px);
}
#accessory .acc_left div:last-child img{
width: 520px;
}
#accessory .acc_all{
width: 250px;
height: 250px;
border: 3px solid #EAEAEA;
background-color: #fff;
padding: 20px;
box-sizing: border-box;/*改变实际计算大小的方式*/
margin-bottom: 20px;
}
#accessory .acc_all p:first-child{
text-align: center;
font-weight: bold;
font-size: 14px;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
#accessory .acc_all li{
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
}
#accessory .acc_all li:hover{
color: #00925F;
}
#accessory .acc_all .line{
width: 150px;
height: 0;
border-top: 1px solid #ccc;
clear: both;
margin: 15px auto;
}
#accessory .acc_all p:last-child{
text-align: center;
}
#accessory .acc_all p:last-child:hover{
color: #00925F;
}
#accessory .acc_all span{
width: 13px;
height: 13px;
display: inline-block;
vertical-align: middle;
background: url("../img/icons-1.png") no-repeat -177px -1014px;
margin-left: 10px;
}
#accessory .acc_right{
width: 540px;
}
#accessory .acc_right div{
float: left;
margin: 10px;
border-bottom: 3px solid #EAEAEA;
transition: all .3s;
}
#accessory .acc_right div:hover{
border-bottom: 3px solid #00925F;
transform: translateY(-10px);
}
#accessory .acc_right img{
width:250px;
}
#accessory .acc_right div:first-child img{
width: 520px;
height: 250px;
}
#accessory .acc_right div:last-child img{
width: 250px;
height: 241px;
}
六、欧珀功能
<!--搜索oupo-->
<div id="world">
<div class="container">
<div class="world_top ">
<img src="img/weibo.png" alt="搜索欧珀">
</div>
<div class="world_main">
<div class="world_left left">
<ul>
<li><img src="img/201403261455420lqMPNGENc.png" alt=""></li>
<li><img src="img/20140926184007v2rjcVFcbW.jpg" alt=""></li>
<li><img src="img/20131212113902waaLqQUWfB.jpg" alt=""></li>
<li><img src="img/20150226100534QqezQ85N6y.jpg" alt=""></li>
</ul>
</div>
<div class="world_right right">
<div class="world_right_top xin">
<h2>新闻</h2>
</div>
<div class="world_right_top wei">
<h2>微博</h2>
</div>
<dl>
<div>
<dt><img src="img/20140919101741cvR0TcGkaq.jpg" alt=""></dt>
<dd>OPPO R金色版打造纽约时装周梦幻之旅</dd>
</div>
<div>
<dt><img src="img/20150227161036GqO59Dvta2.jpg" alt=""></dt>
<dd>OPPO R金色版打造纽约时装周梦幻之旅</dd>
</div>
<div>
<dt><img src="img/20140604145924CFBnAtVjqN.jpg" alt=""></dt>
<dd>OPPO R金色版打造纽约时装周梦幻之旅</dd>
</div>
<div>
<dt><img src="img/20140919101741cvR0TcGkaq.jpg" alt=""></dt>
<dd>OPPO R金色版打造纽约时装周梦幻之旅</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
/*搜索欧珀部分*/
#world{
height: 850px;
background-color: #f6f6f6;
}
#world .world_main{
width: 1258px;
margin: 5px auto;
}
#world .world_top {
text-align: center;
margin: 10px 0;
}
#world .world_left{
width: 750px;
height: 780px;
/*border: 2px solid #000;*/
}
#world ul img{
width:350px;
height: 350px;
}
#world ul li{
float: left;
margin: 10px;
border-bottom: 3px solid #EAEAEA;
transition: all .3s;
}
#world ul li:hover{
border-bottom: 3px solid #00925F;
transform: translateY(-10px);
}
#world .world_right{
width: 500px;
/*border: 2px solid #000;*/
background-color: #fff;
}
#world dt img{
width:150px;
height:150px;
}
#world .world_right .world_right_top {
width: 250px;
height:100px;
float: left;
line-height: 120px;
text-align:center;
}
#world .world_right .wei{
background-color: #f6f6f6;
}
#world .world_right .xin{
border-top: 4px solid #4f8590;
}
#world .world_right dl div{
clear: both;
background-color: #f6f6f6;
/*border: 2px solid #000;*/
width: 480px;
height: 150px;
margin: 10px;
position: relative;
}
#world .world_right dl dd{
position: absolute;
top: 20px;
left: 160px;
}
七、服务栏
<!--服务部分-->
<div id="serve">
<div class="container">
<ul>
<li>
<span></span>
<h2>正品保障</h2>
<p>所有的商品都是原装正品</p>
</li>
<li>
<span></span>
<h2>正品保障</h2>
<p>所有的商品都是原装正品</p>
</li>
<li>
<span></span>
<h2>正品保障</h2>
<p>所有的商品都是原装正品</p>
</li>
<li>
<span></span>
<h2>正品保障</h2>
<p>所有的商品都是原装正品</p>
</li>
<li>
<span></span>
<h2>正品保障</h2>
<p>所有的商品都是原装正品</p>
</li>
</ul>
</div>
/*服务页面样式设计*/
#serve{
clear: both;
height: 66px;
background-color: #fff;
}
#serve ul{
width: 1260px;
margin: 0 auto;
}
#serve li{
float: left;
width: 230px;
margin: 10px;
border-bottom: 1px solid #333;
transition: all .3s;
}
#serve li:hover{
transform: translateY(-10px);
}
#serve li span{
float: left;
width: 42px;
height: 44px;
margin-right: 5px;
display: inline-block;
background: url("../img/icons.png") no-repeat 0px -43px;
}
#serve li p2{
font-size: 12px;
}
#serve li h2{
font-weight: bold;
}
八、售后服务
<!--售后部分-->
<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="#">关于OPPO</a></li>
<li><span class="xl"></span><a href="#">新闻中心</a></li>
<li><span class="xl"></span><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>
</ul>
</div>
</div>
/*设置售后服务页面*/
#after_sale{
height: 200px;
background-color: #fff;
}
#after_sale ul{
padding-top: 20px;
}
#after_sale ul li{
width: 140px;
float: left;
text-align: center;
margin: 0px 30px;
}
#after_sale ol li{
line-height: 30px;
}
#after_sale ol li:first-child a{
/*font-weight: bold;*/
}
#after_sale .xl{
width: 20px;
height: 17px;
background: url("../img/icons.png") no-repeat -47px -95px;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
九、页脚栏
<!--页面底端-->
<div id="footer">
<div class="container">
<p>
<img src="img/i-f-logo.png">
<span>@2020 北京市xxxxxxx</span>
<a href="#">版权说明</a>
<a href="#">版权说明</a>
<a href="#">版权说明</a>
<a href="#">版权说明</a>
<a href="#">版权说明</a>
</p>
</div>
</div>
/*页脚部分*/
#footer{
height: 40px;
background-color: #2D2D2D;
}
#footer p{
line-height: 40px;
}
#footer img{
margin-left: 20px;
}
#footer p span{
color: #828282;
margin: 0px 430px 0px 20px;
}
#footer p a{
color: #fff;
margin: 0px 10px;
}
#footer p a:hover{
color: #00925F;
}
十、banner部分
用到swiper.css和swiper.css插件
<link rel="stylesheet" href="css/swiper.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>
<!--页面的banner-->
<div id="banner">
<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 class="swiper-slide"><img src="img/banner4.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>
<script type="text/javascript" src="js/swiper.js"></script>
<!--banner动画-->
<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>
十一、js制作欧珀部分入场动画
此处用到animate.css插件和jquery-1.11.3.js插件
<link rel="stylesheet" href="css/animate.min.css">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
$(window).scroll(function(){
//计算滚轮得距离
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollT);
//计算探索欧珀的距离
var backTop = $("#world").offset().top - $(window).height()/2;
console.log(backTop);
if(scrollT > backTop){
$(".a1").addClass("animated bounceInRight show").removeClass("fade");
$(".a2").addClass("animated bounceInDown show").removeClass("fade");
$(".a3").addClass("animated bounceInUp show").removeClass("fade");
$(".a4").addClass("animated bounceInLeft show").removeClass("fade");
}
});
因为新增的动画会让原来的动画消失所以我们在li内部新增一个div用来嵌套。
<ul>
<li class="a1 fade">
<div><img src="img/201403261455420lqMPNGENc.png" alt=""></div>
</li>
<li class="a2 fade"><div><img src="img/20140926184007v2rjcVFcbW.jpg" alt=""></div></li>
<li class="a3 fade"><div><img src="img/20131212113902waaLqQUWfB.jpg" alt=""></div></li>
<li class="a4 fade"><div><img src="img/20150226100534QqezQ85N6y.jpg" alt=""></div></li>
</ul>
#world ul li div{
float: left;
margin: 10px;
border-bottom: 3px solid #EAEAEA;
transition: all .3s;
}
#world ul li:hover div{
border-bottom: 3px solid #00925F;
transform: translateY(-10px);
}
十二、返回顶部
首先显示这个按钮并且随着页面移动它不移动
<!--返回顶部-->
<div id="re_top">
<button id="btn" ></button>
</div>
/*返回顶部*/
#re_top{
width: 100px;
height: 100px;
}
#re_top button{
position: fixed;
width: 83px;
height: 74px;
background:url(../img/totop.png) no-repeat 0px 0px;
left: 1520px;
top: 600px;
z-index: 100;
}
设置监听js代码
window.onload =function(){
//找到页面中的按钮
var totop=document.getElementById("btn");
totop.style.display="none"
//给按钮绑定事件
var time=null;
totop.onclick =function(){
//周期性定时
time=setInterval(function(){
//实现先快后慢向上移动
var backtop = document.documentElement.scrollTop || document.body.scrollTop;
document.documentElement.scrollTop=backtop-backtop/5;
//清零定时器
if(backtop == 0){
clearInterval(time);
}
},30)
}
//更具滚轮移动距离判断是否显示按钮
var pageHeigt=700;
window.οnscrοll=function(){
var backtop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(backtop);
if(backtop>pageHeigt){
totop.style.display="block"
}else{
totop.style.display="none"
}
}
初始化按钮为透明
在window.onload =function(){添加
totop.style.display="none"
十三、 吸顶灯效果
即鼠标移动,导航栏永远在最上面。
在window.onload =function(){添加全局变量
var nav =document.getElementById("nav");
var navTop=nav.offsetTop;
在window.οnscrοll=function(){添加
//吸顶灯效果
if(backtop>=navTop){
nav.style.position="fixed";
nav.style.top="0";
nav.style.left="0";
nav.style.zIndex="101";//因为前面把返回顶部的按钮设置成了100
}else{
nav.style.position="";
}
全部代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>oppo</title>
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/animate.min.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">400-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>
<!--页面的d导航-->
<div id="nav">
<div class="container">
<div class="logo left">
<img src="img/logo.png" alt="OPPO">
</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="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 class="swiper-slide"><img src="img/banner4.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="star">
<div class="container">
<div class="star_top">
<img src="img/i-c-title.png" alt="明星机型" >
</div>
<div>
<ul >
<li>
<div>
<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
<h2>N3</h2>
<p>1600万电动旋转摄像头</p>
<p class="money">¥ 3999 立即购买<span></span></p>
</div>
</li>
<li>
<div>
<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
<h2>N3</h2>
<p>1600万电动旋转摄像头</p>
<p class="money">¥ 3999 立即购买<span></span></p>
</div>
</li>
<li>
<div>
<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
<h2>N3</h2>
<p>1600万电动旋转摄像头</p>
<p class="money">¥ 3999 立即购买<span></span></p>
</div>
</li>
<li>
<div>
<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
<h2>N3</h2>
<p>1600万电动旋转摄像头</p>
<p class="money">¥ 3999 立即购买<span></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--精选配件-->
<div id="accessory">
<div class="container">
<div class="acc_top">
<img src="img/wb.png" alt="">
</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>
<!--搜索oupo-->
<div id="world">
<div class="container">
<div class="world_top ">
<img src="img/weibo.png" alt="搜索欧珀">
</div>
<div class="world_main">
<div class="world_left left">
<ul>
<li class="a1 fade">
<div><img src="img/201403261455420lqMPNGENc.png" alt=""></div>
</li>
<li class="a2 fade"><div><img src="img/20140926184007v2rjcVFcbW.jpg" alt=""></div></li>
<li class="a3 fade"><div><img src="img/20131212113902waaLqQUWfB.jpg" alt=""></div></li>
<li class="a4 fade"><div><img src="img/20150226100534QqezQ85N6y.jpg" alt=""></div></li>
</ul>
</div>
<div class="world_right right">
<div class="world_right_top xin">
<h2>新闻</h2>
</div>
<div class="world_right_top wei">
<h2>微博</h2>
</div>
<dl>
<div>
<dt><img src="img/20140919101741cvR0TcGkaq.jpg" alt=""></dt>
<dd>OPPO R金色版打造纽约时装周梦幻之旅</dd>
</div>
<div>
<dt><img src="img/20150227161036GqO59Dvta2.jpg" alt=""></dt>
<dd>OPPO R金色版打造纽约时装周梦幻之旅</dd>
</div>
<div>
<dt><img src="img/20140604145924CFBnAtVjqN.jpg" alt=""></dt>
<dd>OPPO R金色版打造纽约时装周梦幻之旅</dd>
</div>
<div>
<dt><img src="img/20140919101741cvR0TcGkaq.jpg" alt=""></dt>
<dd>OPPO R金色版打造纽约时装周梦幻之旅</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
<!--服务部分-->
<div id="serve">
<div class="container">
<ul>
<li>
<span></span>
<h2>正品保障</h2>
<p>所有的商品都是原装正品</p>
</li>
<li>
<span></span>
<h2>正品保障</h2>
<p>所有的商品都是原装正品</p>
</li>
<li>
<span></span>
<h2>正品保障</h2>
<p>所有的商品都是原装正品</p>
</li>
<li>
<span></span>
<h2>正品保障</h2>
<p>所有的商品都是原装正品</p>
</li>
<li>
<span></span>
<h2>正品保障</h2>
<p>所有的商品都是原装正品</p>
</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="#">关于OPPO</a></li>
<li><span class="xl"></span><a href="#">新闻中心</a></li>
<li><span class="xl"></span><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>
</ul>
</div>
</div>
<!--页面底端-->
<div id="footer">
<div class="container">
<p>
<img src="img/i-f-logo.png">
<span>@2020 北京市xxxxxxx</span>
<a href="#">版权说明</a>
<a href="#">版权说明</a>
<a href="#">版权说明</a>
<a href="#">版权说明</a>
<a href="#">版权说明</a>
</p>
</div>
</div>
<!--返回顶部-->
<div id="re_top">
<button id="btn" ></button>
</div>
<script type="text/javascript" src="js/swiper.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script 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>
index.css
*{
margin: 0;
padding: 0;
font-size: 14px;
}
ol,ul{
list-style-type: none;
}
a{
color:#666;
text-decoration:none;
}
.left{
float: left;
}
.right{
float: right;
}
.fade{
opacity: 0;
}
.show{
opacity: 1;
}
/*测试部分*/
#top,#header,#nav,#banner,#star,#accessory,#world,#serve,#after_sale,#footer{
/*height: 100px;*/
width: 100%;
/*border:1px solid #000;*/
}
.container{
width: 1280px;
/*border: 1px solid #f00;*/
margin: 0 auto;
}
/*设置顶部的样式*/
#top{
height: 10px;
background-color: #00925f;
}
/*设置页面的头部*/
#header{
height: 30px;
background-color: #2d2d2d;
}
#header .xlwb{
width: 20px;
height: 17px;
background:url("../img/icons.png") no-repeat -47px -95px;
/*为啥这里路径要加..*/
}
#header .txwb{
width: 20px;
height: 20px;
background:url("../img/icons.png") no-repeat -27px -92px;
/*为啥这里路径要加..*/
}
#header .tel{
color: #17925f;
}
#header .header_left div{
float: left;
margin: 5px 10px 0px 10px;
}/*让top栏的图标在一行显示*/
#header ul li{
float: left;
margin: 5px 0px;
}/*让top栏中的右边的几个列表也在一行显示*/
#header li a{
color: #b2b2b2;
font-size: 14px;
border-right: 1px solid #b2b2b2;
padding: 0px 15px;
}
#header li a:hover{
color: #00925f;
}
#header .shop_car a{
border: none;
padding-left: 15px;
}
#header .shop_car span{
width: 19px;
height: 16px;
vertical-align:middle;/*调整购物车图标位置*/
/*apan是一个行内元素,不能设置宽度和高度,所以改变其属性*/
display: inline-block;
margin-left:5px;
background: url("../img/icons.png") no-repeat 0px -95px;
}
/*设置导航栏的样式*/
#nav{
background-color: rgb(238,238,238);
height: 60px;
}
#nav img{
line-height: 60px;
width: 200px;
height: 50px;
}
#nav .logo{
padding-bottom: 10px;
}
#nav li{
float: left;
margin: 0px 15px;
line-height: 60px;
/*vertical-align: middle;*/
}
#nav li a{
color: #666666;
font-weight: bold;/*加粗*/
}
#nav li a:hover{
color: #00925F;
font-weight: bold;/*加粗*/
}
/*设置明星机型页面的样式*/
#star{
clear: both;
overflow: hidden;/*清除白色多余部分*/
height: 700px;
background-color: #f2f2f2;
}
#star .star_top{
text-align: center;/*水平居中*/
margin:10px;
}
#star ul{
width:1182px;
margin: 10px auto;
/*text-align: center;*/
}
#star li{
width: 270px;
border-bottom: 1px solid #dfdfdf;
float: left;
margin-left: 20px;
transition: all 0.3s;
}
#star li:hover{
border-bottom: 5px solid #4f8590;
transform:translateY(-10px);
}
#star li img{
width: 270px;
}
#star li h2{
text-align: center;
margin: 10px 0px;
}
#star li .money{
color: #00925f;
font-size: 14px;
font-weight: bold;
}
#star li p{
text-align: center;
margin: 10px 0px;
font-size: 12px;
color: #bdbdbd;
}
#star li span{
width: 13px;
height: 13px;
display: inline-block;
background:url("../img/icons-1.png") no-repeat -177px -1014px;
margin-left: 5px;
}
/*设置精选配件之间的样式*/
#accessory{
/*清除白色多余部分*/
overflow: hidden;
background-color: #f6f6f6;
height: 950px;
}
#accessory .acc_top{
text-align: center;
margin: 20px 0;
}
#accessory .acc_main{
width: 1090px;
margin: 10px auto;
}
#accessory .acc_left{
width: 540px;
/*border: 1px solid #000;*/
}
#accessory .acc_left div{
float: left;
margin:10px;
border-bottom:4px solid #dfdfdf;
transition: all 0.3s;
}
#accessory .acc_left img{
width: 250px;
/*border-bottom:4px solid #dfdfdf*/
/*margin-bottom: 20px;
margin-right: 20px;*/
}
#accessory .acc_left div:hover{
border-bottom:4px solid #4f8590;
transform:translateY(-10px);
}
#accessory .acc_left div:last-child img{
width: 520px;
}
#accessory .acc_all{
width: 250px;
height: 250px;
border: 3px solid #EAEAEA;
background-color: #fff;
padding: 20px;
box-sizing: border-box;/*改变实际计算大小的方式*/
margin-bottom: 20px;
}
#accessory .acc_all p:first-child{
text-align: center;
font-weight: bold;
font-size: 14px;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
#accessory .acc_all li{
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
}
#accessory .acc_all li:hover{
color: #00925F;
}
#accessory .acc_all .line{
width: 150px;
height: 0;
border-top: 1px solid #ccc;
clear: both;
margin: 15px auto;
}
#accessory .acc_all p:last-child{
text-align: center;
}
#accessory .acc_all p:last-child:hover{
color: #00925F;
}
#accessory .acc_all span{
width: 13px;
height: 13px;
display: inline-block;
vertical-align: middle;
background: url("../img/icons-1.png") no-repeat -177px -1014px;
margin-left: 10px;
}
#accessory .acc_right{
width: 540px;
}
#accessory .acc_right div{
float: left;
margin: 10px;
border-bottom: 3px solid #EAEAEA;
transition: all .3s;
}
#accessory .acc_right div:hover{
border-bottom: 3px solid #00925F;
transform: translateY(-10px);
}
#accessory .acc_right img{
width:250px;
}
#accessory .acc_right div:first-child img{
width: 520px;
height: 250px;
}
#accessory .acc_right div:last-child img{
width: 250px;
height: 241px;
}
/*搜索欧珀部分*/
#world{
/*清除白色多余部分*/
overflow: hidden;
height: 850px;
background-color: #f6f6f6;
}
#world .world_main{
width: 1258px;
margin: 5px auto;
}
#world .world_top {
text-align: center;
margin: 10px 0;
}
#world .world_left{
width: 750px;
height: 780px;
/*border: 2px solid #000;*/
}
#world ul img{
width:350px;
height: 350px;
}
#world ul li div{
float: left;
margin: 10px;
border-bottom: 3px solid #EAEAEA;
transition: all .3s;
}
#world ul li:hover div{
border-bottom: 3px solid #00925F;
transform: translateY(-10px);
}
#world .world_right{
width: 500px;
/*border: 2px solid #000;*/
background-color: #fff;
}
#world dt img{
width:150px;
height:150px;
}
#world .world_right .world_right_top {
width: 250px;
height:100px;
float: left;
line-height: 120px;
text-align:center;
}
#world .world_right .wei{
background-color: #f6f6f6;
}
#world .world_right .xin{
border-top: 4px solid #4f8590;
}
#world .world_right dl div{
clear: both;
background-color: #f6f6f6;
/*border: 2px solid #000;*/
width: 480px;
height: 150px;
margin: 10px;
position: relative;
}
#world .world_right dl dd{
position: absolute;
top: 20px;
left: 160px;
}
/*服务页面样式设计*/
#serve{
clear: both;
height: 66px;
background-color: #fff;
}
#serve ul{
width: 1260px;
margin: 0 auto;
}
#serve li{
float: left;
width: 230px;
margin: 10px;
border-bottom: 1px solid #333;
transition: all .3s;
}
#serve li:hover{
transform: translateY(-10px);
}
#serve li span{
float: left;
width: 42px;
height: 44px;
margin-right: 5px;
display: inline-block;
background: url("../img/icons.png") no-repeat 0px -43px;
}
#serve li p2{
font-size: 12px;
}
#serve li h2{
font-weight: bold;
}
/*设置售后服务页面*/
#after_sale{
height: 200px;
background-color: #fff;
}
#after_sale ul{
padding-top: 20px;
}
#after_sale ul li{
width: 140px;
float: left;
text-align: center;
margin: 0px 30px;
}
#after_sale ol li{
line-height: 30px;
}
#after_sale ol li:first-child a{
/*font-weight: bold;*/
}
#after_sale .xl{
width: 20px;
height: 17px;
background: url("../img/icons.png") no-repeat -47px -95px;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
/*页脚部分*/
#footer{
height: 40px;
background-color: #2D2D2D;
}
#footer p{
line-height: 40px;
}
#footer img{
margin-left: 20px;
}
#footer p span{
color: #828282;
margin: 0px 430px 0px 20px;
}
#footer p a{
color: #fff;
margin: 0px 10px;
}
#footer p a:hover{
color: #00925F;
}
/*返回顶部*/
#re_top{
width: 100px;
height: 100px;
}
#re_top button{
position: fixed;
width: 83px;
height: 74px;
background:url(../img/totop.png) no-repeat 0px 0px;
left: 1520px;
top: 600px;
z-index: 100;
}
index.js
$(window).scroll(function(){
//计算滚轮得距离
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
// console.log(scrollT);
//计算探索欧珀的距离
var backTop = $("#world").offset().top - $(window).height()/2;
// console.log(backTop);
//当滑到了欧珀部分开始动画
if(scrollT > backTop){
$(".a1").addClass("animated bounceInRight show").removeClass("fade");
$(".a2").addClass("animated bounceInDown show").removeClass("fade");
$(".a3").addClass("animated bounceInUp show").removeClass("fade");
$(".a4").addClass("animated bounceInLeft show").removeClass("fade");
}
});
window.onload =function(){
//找到页面中的按钮
var totop=document.getElementById("btn");
totop.style.display="none"
//给按钮绑定事件
var time=null;
var nav =document.getElementById("nav");
var navTop=nav.offsetTop;
//console.log(navTop);
totop.onclick =function(){
//周期性定时
time=setInterval(function(){
//实现先快后慢向上移动
var backtop = document.documentElement.scrollTop || document.body.scrollTop;
document.documentElement.scrollTop=backtop-backtop/5;
//清零定时器
if(backtop == 0){
clearInterval(time);
}
},30)
}
//根据滚轮移动距离判断是否显示按钮
var pageHeigt=700;
window.onscroll=function(){
var backtop = document.documentElement.scrollTop || document.body.scrollTop;
//console.log(backtop);
if(backtop>pageHeigt){
totop.style.display="block"
}else{
totop.style.display="none"
}
//吸顶灯效果
if(backtop>=navTop){
nav.style.position="fixed";
nav.style.top="0";
nav.style.left="0";
nav.style.zIndex="101";//因为前面把返回顶部的按钮设置成了100
}else{
nav.style.position="";
}
}
}