OPPO官网web界面开发案例
2024-05-16 15:57:49
成品
一、框架实现
构建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',cubegrabCursor: 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',cubegrabCursor: 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="";}}
}OPPO官网web界面开发案例相关推荐
- 使用Layui框架的简单web界面开发
使用Layui框架的简单web界面开发 Layui的简介 优势 框架的安装 使用方法 Layui的简介 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/C ...
- java ee web高级,Java EE Web高级开发案例
核心提示:Java EE Web高级开发案例 内容简介:<Java EE Web高级开发案例>充分体现了高等职业教育的特点,突出了理论和实践的紧密结合,以充分掌握基本技术技能和必要的基本知 ...
- java ee web pdf_Java EE Web高级开发案例 PDF扫描版[69MB]
Java EE Web高级开发案例 内容简介: <Java EE Web高级开发案例>充分体现了高等职业教育的特点,突出了理论和实践的紧密结合,以充分掌握基本技术技能和必要的基本知识为出发 ...
- OpenWRT - WEB界面开发思路和基本方法
想要对OpenWRT的WEB界面(*下称界面)进行修改.修改的目标是: 1.修改页面的样式,设计为企业的风格(stylesheet) 2.新建自己的功能,实现 访问页面后,用户就可以对配置文件(也就是 ...
- html、css --苏宁官网静态界面
前一阵子自己扒下来的一个苏宁官网的界面: html部分: <!DOCTYPE html> <html lang="en"> <head>< ...
- 制作一个静态oppo官网页面
一个静态的oppo官网页面制作过程 文章目录 一.项目准备 二.过程编写 1.版心和顶通盒子 2.顶通栏 3.头部 4.banner 5.内容_明星机型 5.1.明星机型标题区域 5.2.手机结构 6 ...
- 买新机去OPPO官网还是线下实体店？一文带你了解其中区别
众所周知,OPPO Find X3 系列将于3月19日开卖,其凭借全链路 10bit 色彩引擎.双主摄.显微镜头等亮眼配置,已然吸引了不少消费者,大家都按耐不住想要剁手的心了.虽然网购已成为当今人们消 ...
- 2D+1D | vivo官网Web 3D应用开发与实战
一. 前言 1.1 前端工程师,不写网页,还能做什么? 在近20年的前端发展史中,前端经历了铁器时代(小前端),信息时代(大前端)以至现在的全能前端时代.经历了几个时代的沉淀之后,前端领域开始更加细分 ...
- HTML期末大学生网页-游戏官网 web期末作业设计网页（游戏主题）
Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业,游戏官网 | 游戏网站 | 电竞游戏 | 游戏介绍 | 等网站的设计与制作 | HTML期末大 ...
最新文章
- roncoo-pay 开源支付系统全新架构升级
- 用户态与内核态 文件流与文件描述符 简介【转】
- python是一种汇编类型的语言_python全栈开发学习_day2_语言种类及变量
- 制作Camtasia 2020显示捕获击键标注的动画
- 【Remoting-4】
- Google发布Java 核心工具库——Guava 28.0
- linux系统移植步骤
- office出错怎么简单修复
- 计算机基础知识教程表格日期,excel表格如何进行日期加减
- 如何使用css动画做出剑客行走效果
- C++ 并发编程（从C++11到C++17）
- java ssm人体健康体检信息管理系统-
- 大连引入‘智慧路灯’助推‘智慧城区’建设，道路改造25基高杆灯
- Gerrit no Verified 在最新的2.7版本之后添加Verified
- 最详细的微信小程序制作方法
- 读书笔记-从你的全世界路过
- 中国Azure新数据中心（区域）正式商用
- pads铺铜不能开启drp_PADS常见问题全集
- 磁盘空间不足怎么办？教你重新分配磁盘空间
- 网络推广引流方法有哪些（什么推广方法最有效）2021-09-27
热门文章
- 2018120201091 佘天行の节日祝福
- 仓库管理计算机快捷键,通用Excel教你几招常用Excel技巧之：Excel快捷键大集合
- 中国地图实现点击某省市区域跳转到相应页面
- esp8266系列 wifi模块
- 双11程序猿最想要的奢侈品竟然是这些！
- BNU 0919 日常训练 之 G N！ ——高精度 万进制 10000的阶乘
- 本BLOG正式采用http://www.ugole.com/blog
- 【转】干货分享｜给正在构思论文的同学们分享个实用小技巧（一般写作，制作PPT也适合）
- （干货）你知道python爬虫定位网页元素有几种方式嘛，今天带你一一了解。
- 教育新痛点：父母有手机依赖行为，其子女手机依赖的比例几乎翻倍