老师我有个历史遗留问题

phone.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link href="css/base.css" type="text/css" rel="stylesheet" />
       <link href="css/phone.css" type="text/css" rel="stylesheet" />
       <link href="css/animation.css" type="text/css" rel="stylesheet" />
   </head>
   <body>
       
       <header class="header">
           <div class="header__wrapper">
               <div class="header__logo">慕课手机</div>
               <nav class="header__nav">
                   <a href="javascript:;" class="header__nav-item header__nav-item-active">首页</a>
                   <a href="javascript:;" class="header__nav-item">外观</a>
                   <a href="javascript:;" class="header__nav-item">配置</a>
                   <a href="javascript:;" class="header__nav-item">型号</a>
                   <a href="javascript:;" class="header__nav-item">说明</a>
                   <a href="javascript:;" class="header__nav-item header__nav-item-button">立即购买</a>
                    <div class="header__nav-tip"></div>
               </nav>
           </div>
       </header>

       
       <div class="screen__1">
           <h2 class="screen__1-text text"><span>慕课手机</span> 让你的生活更精彩</h2>
           <div class="screen__1-phone"></div>
           <div class="screen__1-shadow"></div>
       </div>

       
       <div class="screen__2">
           <h2 class="screen__2-text text">优美的设计，更令人着迷</h2>
           <h3 class="screen__2-subtext">
               采用受欢迎的设计，让它更加出色。<br />
                                款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。
           </h3>
           <div class="screen__2-phone">
               <div class="screen__2-point1 point">高清摄像</div>
               <div class="screen__2-point2 point point-right">超薄机身</div>
               <div class="screen__2-point3 point point-right">大屏显示</div>
           </div>
       </div>

        
        <div class="screen__3">
           <div class="screen__3-wrapper">
               <h2 class="screen__3-text text">外形小巧，功能强大的手机</h2>
               <h3 class="screen__3-subtext">
                   采用受欢迎的设计，让它更加出色。<br />
                                    款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。
               </h3>
               <div class="screen__3-phone"></div>
               <div class="screen__3-features">
                   <div class="screen__3-features-item">
                       <div class="screen__3-features-item-number">5.7</div>
                       <div class="screen__3-features-item-text">英寸大屏</div>
                   </div>
                   <div class="screen__3-features-item">
                       <div class="screen__3-features-item-number">1200</div>
                       <div class="screen__3-features-item-text">万像素</div>
                   </div>
                   <div class="screen__3-features-item">
                       <div class="screen__3-features-item-number">3D</div>
                       <div class="screen__3-features-item-text">touch</div>
                   </div>
                   <div class="screen__3-features-item">
                       <div class="screen__3-features-item-number">A9</div>
                       <div class="screen__3-features-item-text">处理器</div>
                   </div>
               </div>
              </div>
        </div>

        
        <div class="screen__4">
               <div class="screen-4-wrapper">
                   <h2 class="screen__4-text text">丰富的手机型号</h2>
                   <h3 class="screen__4-subtext">找到适合你的手机</h3>
                   <div class="screen__4-type">
                       <div class="screen__4-phone screen__4-item-1">
                           <div class="screen__4-phone__color">慕课红</div>
                           <div class="screen-4-phone__storage">16G/32G/64G</div>
                       </div>
                       <div class="screen__4-phone screen__4-item-2">
                           <div class="screen__4-phone__color">土豪金</div>
                           <div class="screen-4-phone__storage">16G/32G/64G</div>
                       </div>
                       <div class="screen__4-phone screen__4-item-3">
                           <div class="screen__4-phone__color">太空灰</div>
                           <div class="screen-4-phone__storage">16G/32G/64G</div>
                       </div>
                       <div class="screen__4-phone screen__4-item-4">
                           <div class="screen__4-phone__color">绅士黑</div>
                           <div class="screen-4-phone__storage">16G/32G/64G</div>
                       </div>
                   </div>
           </div>
        </div>

        
        <div class="screen__5">
           <h2 class="screen__5-text text">
               游戏、学习、拍照、有这一部就够了
           </h2>
           <h3 class="screen__5-subtext">
               看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。
           </h3>
           <div class="screen__5-bg"></div>
        </div>

        
        <div class="screen__6">
           <a class="screen__6-button" href="javasript:;">立即购买</a>

        </div>

        
        <footer class="footer">
           © 2016 imooc.com 京ICP备13046642号
        </footer>
        <div class="outline">
                   <a href="javascript:;" class="outline__nav-item ">首页</a>
                   <a href="javascript:;" class="outline__nav-item">外观</a>
                   <a href="javascript:;" class="outline__nav-item">配置</a>
                   <a href="javascript:;" class="outline__nav-item">型号</a>
                   <a href="javascript:;" class="outline__nav-item">说明</a>
        </div>
        <script type="text/javascript" src="js/index.js"></script>
   </body>
</html>

js页面的

window.onscroll = function () {

var top = document.body.scrollTop;

一点都不起作用是为什么啊？困扰我好久了

小丁同学ddd 2020-01-23

源自：项目：JS实现简易计算器案例 4-3 编程练习

收起

6回答

好帮手慕星星 2020-01-23 19:09:41

同学你好，是动画问题吗？代码中问题如下：

1、document.body.scrollTop获取滚动高度需要兼容，部分浏览器获取出来高度是0，所以需要修改为：

2、第一屏中没有动画效果。js中初始化动画跳过了第一屏，虽然用定时器添加了第一屏的动画，但是没有init类，无法替换成done类，所以没有动画效果。可以在标签中添加上init类，参考

css中缺少phone类

3、顶部需要是固定住的，可以设置固定定位。滚动的时候添加的header_status_black 类css中也没有写。参考：

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

提问者小丁同学ddd #1

妈呀！！谢谢老师！！太感谢了解决了困扰我的问题！！

2020-01-24 12:07:38

提问者小丁同学ddd 2020-01-23 13:38:22

实在是麻烦老师了，是第一阶段的最后一个项目，我真的想不出来为啥不好使

收起回答

提问者小丁同学ddd 2020-01-23 13:37:38

index.js

// 获取元素

var getElem = function( selector ){
return document.querySelector(selector);
}
var getAllElem = function( selector ){
return document.querySelectorAll(selector);
}
// 获取元素的样式
var getCls = function ( element ) {
return element.getAttribute('class');
}
// 设置元素的样式
var setCls = function( element ,cls){
return element.setAttribute('class',cls);
}

// 为元素添加样式
var addCls = function( element , cls ){
var baseCls = getCls(element);
if( baseCls.indexOf(cls) === -1){
      setCls(element,baseCls+' '+cls); // 注意空格
}
return ;
}
// 为元素删减样式
var delCls = function( element , cls){
var baseCls = getCls(element);
if( baseCls.indexOf(cls) > -1){ // 更精确的需要用正则表达式 ,因为这里只用于切换 _animate_in 所以没事
      setCls( element,baseCls.split(cls).join(' ').replace(/\s+/g,' ') );
}
return ;
}

//初始化样式
var screenAnimateElements = {

'.screen__1' : [
    '.screen__1-text',
    '.screen__1-phone',
    '.screen__1-shadow',
],
'.screen__2' : [
    '.screen__2-text',
    '.screen__2-subtext',
    '.screen__2-phone',
    '.screen__2-point1',
    '.screen__2-point2',
    '.screen__2-point3',
],
'.screen__3' : [
    '.screen__3-text',
    '.screen__3-subtext',
    '.screen__3-features',
    '.screen__3-phone',
    '.screen__3-features',
],
'.screen__4' : [
    '.screen__4-text',
    '.screen__4-subtext',
    '.screen__4-item-1',
    '.screen__4-item-2',
    '.screen__4-item-3',
    '.screen__4-item-4',
],
'.screen__5' : [
     '.screen__5-text',
    '.screen__5-subtext',
    '.screen__5-bg',
]

};
//屏幕内元素为初始状态
function setScreenAnimateInit(screenCls) {
    var screen = document.querySelector(screenCls); // 获取当前屏的元素
    var animateElements = screenAnimateElements[screenCls]; // 需要设置动画的元素
    for(var i=0;i<animateElements.length;i++){
        var element = document.querySelector(animateElements[i]);
        var baseCls = element.getAttribute('class');
        element.setAttribute('class',baseCls +' '+animateElements[i].substr(1)+'_animate_init');
    }
}

// 第一步：初始化设置
window.onload = function () {

// 为所有元素设置 init
for(k in screenAnimateElements){
    if(k == '.screen__1'){
      continue;
    }
    setScreenAnimateInit(k);
}
console.log('onload')

}
// 设置播放屏幕内的动画
function playScreenAnimateDone(screenCls){
    var screen = document.querySelector(screenCls); // 获取当前屏的元素
    var animateElements = screenAnimateElements[screenCls]; // 需要设置动画的元素
    for(var i=0;i<animateElements.length;i++){
        var element = document.querySelector(animateElements[i]);
        var baseCls = element.getAttribute('class');
        element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
    }
}
// 第二步附加：初始化第一屏的动画（1. skipScreenAnimateInit 2.跳过 init ）

setTimeout(function(){playScreenAnimateDone('.screen__1');},100)

var navItems = getAllElem('.header__nav-item');
var outLineItems = getAllElem('.outline__nav-item');

var switchNavItemsActive = function( idx){
for(var i=0;i<navItems.length;i++){
    console.log(navItems[i]);
    delCls(navItems[i],'header__nav-item-active');
     navTip.style.left = 0+'px';

}
addCls(navItems[idx],'header__nav-item-active');
navTip.style.left = ( idx * 70 )+'px';

for(var i=0;i<outLineItems.length;i++){
    delCls(outLineItems[i],'outline__nav-item_active');
}
addCls(outLineItems[idx],'outline__nav-item_active');
}
//滚动到哪播放到哪
window.onscroll = function () {

var top = document.body.scrollTop;

//   2.1 导航条样式变动
if( top > 100 ){
      addCls( getElem('.header'),'header_status_black' );
}else{
      delCls( getElem('.header'),'header_status_black' );

      switchNavItemsActive(0); // 后面添加的，不需要立刻
}

if(top > 800*1 ){
      addCls( getElem('.outline'),'outline_status_in' );}
// }else{
//     delCls( getElem('.outline'),'outline_status_in' );
// }

if( top > ( 800*1 - 100) ){
    playScreenAnimateDone('.screen__2');

    switchNavItemsActive(1); // 后面添加的，不需要立刻
}
if( top > ( 800*2 - 100) ){
    playScreenAnimateDone('.screen__3');
    switchNavItemsActive(2);
}
if( top > ( 800*3 - 100) ){
    playScreenAnimateDone('.screen__4');
    switchNavItemsActive(3);
}
if( top > ( 800*4 - 100) ){
    playScreenAnimateDone('.screen__5');
    switchNavItemsActive(4);
}
}

// 第三步导航条双向定位

// 3.1 导航条 - 点击页面跳转

var setNavJump = function(i,lib){
var elem = lib[i];
elem.onclick = function(){
    document.body.scrollTop = i*800 + 1;
}
}

for(var i=0;i<navItems.length;i++){
setNavJump(i,navItems);
}
// 3.2 大纲-点击跳转

for(var i=0;i<outLineItems.length;i++){
setNavJump(i,outLineItems);
}

// 3.3 双向绑定，回到 onscrollTop（移动 navIntes、outLineItems到顶固）、增加 clear 样式函数

// 滑动门
var navTip = getElem('.header__nav-tip');
var setTip = function(idx,lib){

lib[idx].onmouseover =function(){
    console.log(this,idx);
    navTip.style.left = ( idx * 70 )+'px';
}
var currentIdx = 0;
lib[idx].onmouseout = function(){
    console.log(currentIdx);
    for(var i=0;i<lib.length;i++){
        if( getCls( lib[i] ).indexOf('header__nav-item-active') > -1 ){
          currentIdx = i;
          break;
        }
    }
    navTip.style.left = ( currentIdx * 70 )+'px';
}

}

for(var i=0;i<navItems.length;i++){
setTip(i,navItems);
}

收起回答

提问者小丁同学ddd 2020-01-23 13:36:53

base.css

*{
   margin: 0;
   padding: 0;
}
body{
   background-color: #fff;
   font-family: "微软雅黑";
}
h2,h3{
   font-weight: normal;
}

收起回答

提问者小丁同学ddd 2020-01-23 13:36:18

animation.css

/*第一屏动画*/
.screen__1-text,
.screen__1-phone,
.screen__1-shadow
{
   transition: all 1s;
}
.screen__1-text_animate_init,
.screen__1-shadow_animate_init
{
   opacity: 0;
   transform: translate(0,100%);
}
.screen__1-text_animate_done,
.screen__1-phone_animate_done,
.screen__1-shadow_animate_done
{
   opacity: 1;
   transform: translate(0,0);
}
.screen__1-phone_animate_init{
   opacity: 0;
   transform: translate(0,-100%);
}
/*第二屏动画*/
.screen__2-text,
.screen__2-subtext,
.screen__2-phone
{
   transition: all 1s;
}
.screen__2-point1,
.screen__2-point2,
.screen__2-point3{
   transition: all .5s 1s;
}
.screen__2-text_animate_init{
   opacity: 0;
   transform: translate(0,-100%);
}
.screen__2-text_animate_done,
.screen__2-subtext_animate_done,
.screen__2-phone_animate_done,
.screen__2-point1_animate_done,
.screen__2-point2_animate_init,
.screen__2-point3_animate_init

{
   opacity: 1;
   transform: translate(0,0);
}
.screen__2-subtext_animate_init
{
   opacity: 0;
   transform: translate(0,-100%);
}
.screen__2-phone_animate_init{
   opacity: 0;
   transform: translate(0,100%);
}
.screen__2-point1_animate_init{
   opacity: 0;
   transform: translate(100%,0);
}
.screen__2-point1_animate_done{
   opacity: 1;
   transform: translate(0,0);
}
.screen__2-point2_animate_init,
.screen__2-point3_animate_init{
   opacity: 0;
   transform: translate(-100%,0);
}
.screen__2-point2_animate_done,
.screen__2-point3_animate_done{
   opacity: 1;
   transform: translate(0,0);
}
/*第三屏动画*/
.screen__3-text,
.screen__3-subtext,
.screen__3-phone
{
   transition: all 1s;
}
.screen__3-text_animate_init,
.screen__3-phone_animate_init{
   opacity: 0;
   transform: translate(0,100%);
}
.screen__3-subtext_animate_init

{
   opacity: 0;
   transform: translate(0,-100%);
}
.screen__3-text_animate_done,
.screen__3-subtext_animate_done,
.screen__3-phone_animate_done,
.screen__3-features_animate_done
{
   opacity: 1;
   transform: translate(0,0);
}
.screen__3-features{
   transition: all 1s;
}
.screen__3-features_animate_init{
   opacity: 0;
   transform: scale(.5);
}
.screen__3-features-item{
   transition: all .5s;
}
.screen__3-features-item:hover{
   transform: scale(1.1);
   border: 1px #fff solid;
}
/*第四屏动画*/
.screen__4-text,
.screen__4-subtext{
   transition: all 1s;
}
.screen__4-text_animate_init{
   opacity: 0;
   transform: translate(0,100%);
}
.screen__4-text_animate_done,
.screen__4-subtext_animate_done
{
   opacity: 1;
   transform: translate(0,0);
}
.screen__4-subtext_animate_init{
   opacity: 0;
   transform: translate(0,-100%);
}
.screen__4-item-1{
   transition: all 1s .5s;
}
.screen__4-item-2{
   transition: all 1s 1s;
}
.screen__4-item-3{
   transition: all 1s 1.5s;
}
.screen__4-item-4{
   transition: all 1s 2s;
}
.screen__4-item-1_animate_init,
.screen__4-item-2_animate_init,
.screen__4-item-3_animate_init,
.screen__4-item-4_animate_init
{
   opacity: 0;
}
.screen__4-item-1_animate_done,
.screen__4-item-2_animate_done,
.screen__4-item-3_animate_done,
.screen__4-item-4_animate_done
{
   opacity: 1;
}
/*第五屏动画*/
.screen__5-text,
.screen__5-subtext,
.screen__5-bg{
   transition: all 1s;
}
.screen__5-text_animate_init{
   opacity: 0;
   transform: translate(0,-100%);
}
.screen__5-text_animate_done,
.screen__5-bg_animate_done,
.screen__5-subtext_animate_done
{
   opacity: 1;
   transform: translate(0,0);
}
.screen__5-subtext_animate_init,
.screen__5-bg_animate_init
{
   opacity: 0;
   transform: translate(0,100%);
}

/*定义帧动画*/
@-webkit-keyframes bounce{
   0%,100%{
       transform: scale(0);
   }
   50%{
       transform: scale(1);
   }
}
/*使用帧动画*/
.point:after,
.point:before
{
   content: " ";
   display: block;
   position: absolute;
   left: 1px;
   top: 1px;
   width: 20px;
   height: 20px;
   background-color: rgba(255,0,0,0.4);
   -webkit-animation: bounce 2s infinite;
   border-radius: 50%;
}
.point:before{
   -webkit-animation: bounce 2s infinite 1s;
}
.screen__2-point1:before,
.screen__2-point1:after{
   left: 200px;
}

收起回答

提问者小丁同学ddd 2020-01-23 13:35:42

phone.css

a{
   text-decoration: none;
}
.header{
   background-color: #f7f7f7;
}
.header__wrapper{
   width: 1200px;
   height: 80px;
   position: relative;
   margin: 0 auto;
}
.header__logo{
   width: 150px;
   height: 38px;
   background: url(../img/logo.png) left center no-repeat;
   background-size:38px 38px;
   font-size: 20px;
   color: #0711b;
   text-indent: 52px;
   position: absolute;
   left: 20px;
   line-height: 38px;
   top: 50%;
   margin-top: -19px;
   }
.header__nav{
   position: absolute;
   right: 20px;
   height: 38px;
   top: 50%;
   margin-top: -19px;
   }
.header__nav-item{
    color: #292f35;
   font-size: 14px;
   display: block;
   height: 38px;
   line-height: 38px;
   float: left;
   position: relative;
   width: 30px;
   text-align: center;
   margin-left: 40px;
}
.header__nav-item:hover{
   color: #f01400;
}
.header__nav-item-active{
   color: #f01400;
}
.header__nav-item-active::after{

   content: ' ';
   display: block;
   width: 100%;
   height: 2px;
   position: absolute;
   background-color:#f01400;
   left: 0;
   bottom: 0;
}
.header__nav-item-button{
   width: 90px;
    background-color: #07111b;
    color: #f4f4f5;
    border-radius: 3px;
    margin: 0 40px;
}

/*/第一屏*/
.screen__1{
   height: 800px;
   background: url(../img/bg-screen-1.png) no-repeat center center;
   background-size: cover;
   position: relative;
}
.screen__1-text{
   font-size: 46px;
   padding-top: 152px;
   text-align: center;
   font-weight: normal;
}
.screen__1-text span{
   color: #F01400;
}
.screen__1-phone{
   background: url(../img/screen-1-phone.png) center center no-repeat;
   width: 1375px;
   height: 305px;
   position: absolute;
   bottom: 180px;
   left: 50%;
   margin-left: -687px;
   z-index: 2;
}
.screen__1-shadow{
   background: url(../img/screen-1-shadow.png) center center no-repeat;
   width: 1233px;
   height: 411px;
   position: absolute;
   bottom: 0px;
   left: 50%;
   margin-left: -687px;
   z-index: 1;
   opacity: .8;
}
.screen__2{
   height: 800px;
   background-color: #fafafa;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
}
/*/第二屏*/
.screen__2-text{
   color: #F01400;
   font-size: 46px;
   padding-top: 96px;
   text-align: center;
   font-weight: normal;
   line-height: 46px;
}
.screen__2-subtext{
   font-size: 14px;
   line-height: 28px;
   padding-top: 25px;
   text-align: center;
   font-weight: normal;
}
.screen__2-phone{
   width: 928px;
   height: 873px;
   background: url(../img/screen-2-phone.png) center center no-repeat;
   position: absolute;
   left: 50%;
   margin-left: -464px;
   bottom: -345px;
}
.point{
   width: 108px;
   padding-right: 112px;
   height: 22px;
   font-size: 22px;
   line-height: 22px;
   color: #4d555d;
   position: absolute;
   background: url(../img/icon-point-right.png) no-repeat center right;
}
}
.screen__2-point1{
   top: 150px;
   left: -164px;
}
.screen__2-point2{
   top: 30px;
   right: 130px;
}
.screen__2-point3{
   top: 330px;
   right: 30px;
}
.point-right{
   padding: 0 0 0 112px;
   background: url(../img/icon-point-left.png) no-repeat center left;
}
/*/第三屏*/
.screen__3{
   height: 800px;
   background: url(../img/bg-screen-3.png) center center no-repeat;
   background-size: cover;
   overflow: hidden;
}
.screen__3-wrapper{
   width: 1200px;
   height: 800px;
   position: relative;
   margin: 0 auto;
}
.screen__3-text{
   color: #FFFFFF;
   font-size: 46px;
   padding-top: 94px;
   text-align: left;
   font-weight: normal;
   line-height: 46px;
}
.screen__3-subtext{
   font-size: 14px;
   line-height: 28px;
   padding-top: 25px;
   text-align: left;
   font-weight: normal;
   color: #FFFFFF;
}
.screen__3-phone{
   background: url(../img/screen-3-phone.png) center top no-repeat;
   position: absolute;
   top: 195px;
   width: 750px;
   height: 873px;
   right: 0px;
}
.screen__3-features{
   width: 320px;
   height: 280px;
   position: absolute;
   left: 0;
   top: 395px;
   /*background-color: pink;*/
}
.screen__3-features-item{
   width: 138px;
   height: 118px;
   border: 1px solid #cb7173;
   border-radius: 3px;
   float: left;
   text-align: center;
   margin: 10px;
}
.screen__3-features-item-number{
   color: #FFFFFF;
   font-size: 36px;
   height: 36px;
   line-height: 36px;
   padding: 28px 0 8px;
}
.screen__3-features-item-text{
   color: #FFFFFF;
   font-size: 14px;
   height: 14px;
   font-size: 14px;
   line-height: 14px;
}
/*第四屏*/
.screen__4{
   height: 800px;
   background-color: #ffffff;
   position: relative;
   overflow: hidden;
}
.screen-4-wrapper{
   width: 1200px;
   height: 800px;
   margin: 0 auto;
   position: relative;
}
.screen__4-text{
   color: #f01414;
   font-size: 46px;
   padding-top: 135px;
   line-height: 46px;
   text-align: center;
   line-height: 46px;
}
.screen__4-subtext{
   font-size: 14px;
   line-height: 28px;
   padding-top: 29px;
   text-align: center;
   color: #464a4f;
}
.screen__4-type{
   width: 1260px;
   height: 270px;
   position: absolute;
   top: 304px;
   margin-left: 30px;
}
.screen__4-phone__color{
   width: 100%;
   height: 14px;
   line-height: 14px;
   font: 14px;
   color: #2c3238;
   position: absolute;
   bottom: -44px;
}

.screen__4-phone{
   width: 220px;
   margin-right: 90px;
   height: 270px;
   float: left;
   position: relative;
   text-align: center;
   background-size: cover;
}
.screen__4-item-1{
   background: url('../img/phone-1.png') left top no-repeat;
}
.screen__4-item-2{
   background: url('../img/phone-2.png') left top no-repeat;
}
.screen__4-item-3{
   background: url('../img/phone-3.png') left top no-repeat;
}
.screen__4-item-4{
   background: url('../img/phone-4.png') left top no-repeat;
}
.screen-4-phone__storage{
   width: 100%;
   height: 12px;
   line-height: 12px;
   font: 12px;
   color: #a4a9ae;
   position: absolute;
   bottom: -66px;
}
/*第五屏*/
.screen__5{
   height: 800px;
   background-color: #d9dde1;
   overflow: hidden;
   position: relative;
}
.screen__5-text{
   color: #F01400;
   font-size: 46px;
   padding-top: 130px;
   text-align: center;
   line-height: 46px;
}
.screen__5-subtext{
   font-size: 14px;
   line-height: 28px;
   padding-top: 25px;
   text-align: center;
}
.screen__5-bg{
   width: 1920px;
   height: 433px;
   background: url(../img/bg-screen-5.png) center no-repeat;
   position: absolute;
   bottom: -100px;
   background-size: contain;
   left: 50%;
   margin-left: -960px;
}

/*第六屏*/
.screen__6{
   height: 320px;
   background-color: #2b333b;
   background: url(../img/bg-screen-buy.png) center center no-repeat;
   background-size: cover;
   position: relative;
}
.screen__6-button{
   width: 240px;
   height: 80px;
   color: #FFFFFF;
   font-size: 24px;
   text-align: center;
   background-color: #f01414;
   display: block;
   line-height: 80px;
   border-radius: 3px;
   position: absolute;
   top: 120px;
   left: 50%;
   margin-left: -120px;
   transition: all .5s;
}
.screen__6-button:hover{
   box-shadow: 0 0 10px gainsboro;
}
.footer{
   height: 80px;
   background-color: #07111b;
   color: #fff;
   line-height: 80px;
   text-align: center;
   font-size: 12px;
}
.outline{
   position: fixed;
   box-shadow: 0 4px 12px rgba(0,0,0,.5);
   bottom: 120px;
   z-index: 3;
   right: 0;
   padding: 5px 10px;
   background-color: #FFFFFF;

}
.outline__nav-item{
   width: 40px;
   height: 30px;
   line-height: 30px;
   color: #93999f;
   padding: 5px 0;
   background-color: #fff;
   display: block;
   text-align: center;
   margin-top: 5px;
   border-top: 1px solid #eee;
   font-size: 12px;
}
.outline__nav-item:first-child{
   border: none;
}
.outline__item:hover,
.outline__nav-item_active{
   color: red;
}

.header{
   transition: all 1s;
}
.header_status_back{
   background-color: rgba(0,0,0,.5);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 4;
}
.header_status_back .header__logo,
.header_status_back .header__nav-item{
   color: #fff;
}
.outline{
   transition: all 1s;
   opacity: 0;
   transform: translate(100%,0);
}
.outline_status_in{
   opacity: 1;
   transform: translate(0,0);
}
.header__nav-tip{
   position: absolute;
   width: 30px;
   margin-left: 40px;
   height: 2px;
   background: #f00;
   left: 0;
   bottom: 0px;
   transition: all .5s;
}