我这出问题了，麻烦老师看一下

我这出问题了，麻烦老师看一下

老师，我在引入index.js之前，测试是一切正常的，现在的问题就是不能自动播放动画，还有就是麻烦老师看一下，除了不能播放动画，还有哪里需要改进？代码顺序为：index.html、index.js、test.js、animate.css、index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网页作业</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
    <!-- 头部 -->
    <header class="header header_status_back">
        <div class="header__wrap">
            <div class="header__logo">H5实战页面</div>
            <nav class="header__nav">
                <!-- 点击不会有触发 -->
                <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">云端学习</a>
                <a href="javascript:;" class="header__nav-item header__nav-item_custom_button">即刻学习</a>
            </nav>
        </div>
    </header>
    <!-- 第一屏 -->
    <div class="screen-1">
        <!-- 文字 -->
        <h2 class="screen-1__heading">实战课程重磅上线</h2>
        <h5 class="screen-1__heading_b">一键云学习，还在等待什么？</h5>
    </div>
    <!-- 第二屏 -->
    <div class="screen-2">
        <!-- 文字 -->
        <h2 class="screen-2__heading">每门课都是真实商业案例</h2>
        <h3 class="screen-2__subheading_b">真实案例，真实场景，在实战中实践、操作、调试</h3>
        <h3 class="screen-2__subheading">大牛带你体验BAT真实开发流程，所有开发过程一一为你呈现</h3>
        <!-- 图片 -->
        <div class="screen-2__picture">
            <div class="screen-2__point_people"></div>
            <div class="screen-2__point"></div>
        </div>
    </div>
    <!-- 第三屏 -->
    <div class="screen-3">
        <div class="screen-3__wrap">
            <!-- 文字 -->
            <h2 class="screen-3__heading">强大的语言课程体系支持</h2>
            <h3 class="screen-3__subheading">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决<br/>，让你体验开发全流程</h3>
            <!-- 图片 -->
            <div class="screen-3__picture"></div>
            <div class="screen-3__features">
                <div class="screen-3__features__item">
                    <div class="screen-3__features__item__desc screen-3__features__item__desc1">HTML5</div>
                </div>
                <div class="screen-3__features__item">
                    <div class="screen-3__features__item__desc screen-3__features__item__desc2">PHP</div>
                </div>
                <div class="screen-3__features__item">
                    <div class="screen-3__features__item__desc screen-3__features__item__desc3">JAVA</div>
                </div>
                <div class="screen-3__features__item">
                    <div class="screen-3__features__item__desc screen-3__features__item__desc4">Python</div>
                </div>
                <div class="screen-3__features__item">
                    <div class="screen-3__features__item__desc screen-3__features__item__desc5">Node.js</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第四屏 -->
    <div class="screen-4">
        <div class="screen-4__wrap">
            <!-- 文字 -->
            <h2 class="screen-4__heading">省去本地复杂的环境搭建</h2>
            <h3 class="screen-4__subheading">你可以告别在虚拟机中调试开发了</h3>
            <div class="screen-4__type">
                <div class="screen-4__type__item screen-4__type__item_i_1">
                    <div class="screen-4__type__item__color screen-4__type__item__color1">实战课程集成开发环境</div>
                </div>
 
                <div class="screen-4__type__item screen-4__type__item_i_2">
                    <div class="screen-4__type__item__color screen-4__type__item__color2">内置终端命令行</div>
                </div>
 
                <div class="screen-4__type__item screen-4__type__item_i_3">
                    <div class="screen-4__type__item__color screen-4__type__item__color3">编译你的应用程序</div>
                </div>
 
                <div class="screen-4__type__item screen-4__type__item_i_4">
                    <div class="screen-4__type__item__color screen-4__type__item__color4">通过云端服务输出效果</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第五屏 -->
    <div class="screen-5">
            <!-- 文字 -->
            <h2 class="screen-5__heading">云端学习可以这样简单</h2>
            <h3 class="screen-5__subheading">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得，从此学习不一样</h3>
            <div class="screen-5__bg"></div>
    </div>
    <!-- 第六屏 -->
    <div class="screen-buy">
        <a class="screen-buy__button" href="javascript:;">继续了解学习体验</a>
    </div>
    <!-- 底部 -->
    <footer class="footer">
        <dir class="footer-in">
            <div class="footer-word">
                <span><a href="#">网站首页</a></span>
                <span><a href="#">人才招聘</a></span>
                <span><a href="#">联系我们</a></span>
                <span><a href="#">高校联盟</a></span>
                <span><a href="#">关于我们</a></span>
                <span><a href="#">讲师招聘</a></span>
                <span><a href="#">意见反馈</a></span>
                <span><a href="#">友情链接</a></span>
            </div>
            <div class="footer-end">
                <p>Copyright © 2015 imooc.com All Rights Reserved | 京ICP备13046642号-2</p>
            </div>
        </dir>
    </footer>
    <!-- 导航侧边栏 -->
    <div class="outline">
        <a href="javascript:;" class="outline__item">实</a>
        <a href="javascript:;" class="outline__item">战</a>
        <a href="javascript:;" class="outline__item">课</a>
        <a href="javascript:;" class="outline__item">环</a>
        <a href="javascript:;" class="outline__item">境</a>
    </div>
    <!-- <script type="text/javascript" src="js/test.js"></script> -->
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
// 获取元素
 
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__heading',
    '.screen-1__heading_b',
  ],
  '.screen-2' : [
    '.screen-2__subheading_b',
    '.screen-2__heading',
    '.screen-2__subheading',
    '.screen-2__picture',
    '.screen-2__point',
    '.screen-2__point_people',
  ],
  '.screen-3' : [
    '.screen-3__heading',
    '.screen-3__picture',
    '.screen-3__subheading',
    '.screen-3__features',
  ],
  '.screen-4' : [
    '.screen-4__heading',
    '.screen-4__subheading',
    '.screen-4__type__item_i_1',
    '.screen-4__type__item_i_2',
    '.screen-4__type__item_i_3',
    '.screen-4__type__item_i_4',
  ],
  '.screen-5' : [
    '.screen-5__heading',
    '.screen-5__subheading',
    '.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__item');
 
var switchNavItemsActive = function( idx){
  for(var i=0;i<navItems.length;i++){
    console.log(navItems[i]);
    delCls(navItems[i],'header__nav-item_status_active');
     navTip.style.left = 0+'px';
     
  }
  addCls(navItems[idx],'header__nav-item_status_active');
  navTip.style.left = ( idx * 70 )+'px';
   
 
  for(var i=0;i<outLineItems.length;i++){
    delCls(outLineItems[i],'outline__item_status_active');
  }
  addCls(outLineItems[idx],'outline__item_status_active');
}
 
window.onscroll = function () {
 
  var top  = document.body.scrollTop || document.documentElement.scrollTop;
  console.log(top);
 
  //   2.1 导航条样式变动
  if( top > 100 ){
      addCls( getElem('.header'),'header_status_back' );
  }else{
      delCls( getElem('.header'),'header_status_back' );
 
      switchNavItemsActive(0); // 后面添加的，不需要立刻
  }
 
  if(top > 640*1 ){
      addCls( getElem('.outline'),'outline_status_in' );}
  if( top > ( 640*1) ){
    playScreenAnimateDone('.screen-2');
 
    switchNavItemsActive(1); // 后面添加的，不需要立刻
  }
  if( top > ( 640*2) ){
    playScreenAnimateDone('.screen-3');
    switchNavItemsActive(2); 
  }
  if( top > ( 640*3) ){
    playScreenAnimateDone('.screen-4');
    switchNavItemsActive(3); 
  }
  if( top > ( 640*4) ){
    playScreenAnimateDone('.screen-5');
    switchNavItemsActive(4); 
  }
}
 
//  第三步 导航条双向定位
 
// 3.1 导航条 - 点击页面跳转
 
var setNavJump = function(i,lib){
  var elem = lib[i];
  elem.onclick = function(){
    document.body.scrollTop = i*640;
    document.documentElement.scrollTop = i * 640;
  }
}
 
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(){
    for(var i=0;i<lib.length;i++){
        if( getCls( lib[i] ).indexOf('header__nav-item_status_active') > -1  ){
          currentIdx = i;
          break;
        }
    }
    console.log(currentIdx);
    navTip.style.left = ( currentIdx * 70 )+'px';
  }
 
}
 
for(var i=0;i<navItems.length;i++){
  setTip(i,navItems);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// 将有动画效果的放一起
var screenAnimateElements = {
    // 每屏动画
    '.screen-1' : [
        '.screen-1__heading',
        '.screen-1__heading_b',
    ],
    '.screen-2' : [
        '.screen-2__subheading_b',
        '.screen-2__heading',
        '.screen-2__subheading',
        '.screen-2__picture',
        '.screen-2__point',
        '.screen-2__point_people',
    ],
    '.screen-3' : [
        '.screen-3__heading',
        '.screen-3__picture',
        '.screen-3__subheading',
        '.screen-3__features',
    ],
    '.screen-4' : [
        '.screen-4__heading',
        '.screen-4__subheading',
        '.screen-4__type__item_i_1',
        '.screen-4__type__item_i_2',
        '.screen-4__type__item_i_3',
        '.screen-4__type__item_i_4',
    ],
    '.screen-5' : [
        '.screen-5__heading',
        '.screen-5__subheading',
        '.screen-5__bg',
    ],
};
 
 
// 设置当前屏幕的样式
function setScreenAnimate(screenCls){
    var screen = document.querySelector(screenCls);//获取当前屏的元素
    var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素
    //测试是否有初始化子元素的样式
    var isSetAnimateClass = false;
    //当前屏幕下所有子元素的状态是DONE？
    var isAnimateDone = false;
    screen.onclick = function(){
        // 初始化样式，增加init（A A_init）
        if( isSetAnimateClass === false){
            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');
            }
            isSetAnimateClass = true;
            return ;
        }
        //切换所有的 AnimateElements 的 init ——> done （A A_done）
        if( isAnimateDone === false){
            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'));
            }
            isAnimateDone = true;
            return ;
        }
        //切换所有的 AnimateElements 的 done ——> init （A A_init）
        if( isAnimateDone === true){
            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_done','_animate_init'));
            }
            isAnimateDone = false;
            return ;
        }
    }
}
// 每一屏动画
for(k in screenAnimateElements){
    setScreenAnimate(k);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
/*第一屏*/
.screen-1__heading{
    transition: all .8s;
}
.screen-1__heading_b{
    transition: all 1.5s;
}
.screen-1__heading_b_animate_done,
.screen-1__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen-1__heading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-1__heading_b_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
/*第二屏动画*/
.screen-2__subheading_b,
.screen-2__subheading,
.screen-2__heading{
    transition: all 1s;
}
.screen-2__picture{
    transition: .8s;
}
.screen-2__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-2__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-2__subheading_b_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-2__subheading_b_animate_done,
.screen-2__picture_animate_done,
.screen-2__subheading_animate_done,
.screen-2__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen-2__point{
    transition: all 1s 1s;
}
.screen-2__point_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen-2__point_people{
    transition: 1s;
    opacity: 1;
    transform: translate(0,0);
}
.screen-2__point_people_animate_init{
    opacity: 0;
    transform: translate(0,0);
}
.screen-2__point_animate_init{
    opacity: 0;
    transform: translate(0,250%);
}
/*第三屏动画*/
.screen-3__subheading,
.screen-3__picture,
.screen-3__heading{
    transition: all 1s;
}
.screen-3__features{
    transition: all 2s;
}
.screen-3__features_animate_done,
.screen-3__subheading_animate_done,
.screen-3__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
 
.screen-3__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
 
.screen-3__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-3__features_animate_init{
    opacity: 0;
    transform: translate(0,800%);
}
.screen-3__picture_animate_init{
    opacity: 0;
    transform: scale(.4);
}
.screen-3__phone_animate_done{
    opacity: 1;
    transform: scale(1);
}
/*第四屏动画*/
.screen-4__subheading,
.screen-4__heading{
    transition: all 1s;
}
.screen-4__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-4__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-4__type__item_i_1{
    transition: all 1s .5s;
}
.screen-4__type__item_i_2{
    transition: all 1s 1s;
}
.screen-4__type__item_i_3{
    transition: all 1s 1.5s;
}
.screen-4__type__item_i_4{
    transition: all 1s 2s;
}
.screen-4__type__item_i_1_animate_init,
.screen-4__type__item_i_2_animate_init,
.screen-4__type__item_i_3_animate_init,
.screen-4__type__item_i_4_animate_init{
    opacity: 0;
}
.screen-4__type__item_i_1_animate_done,
.screen-4__type__item_i_2_animate_done,
.screen-4__type__item_i_3_animate_done,
.screen-4__type__item_i_4_animate_done{
    opacity: 1;
}
/*第五屏动画*/
.screen-5__bg,
.screen-5__subheading,
.screen-5__heading{
    transition: all 1s;
}
.screen-5__heading_animate_init{
    opacity: 0;
    transform: translate(0,0);
}
 
.screen-5__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-5__bg_animate_init{
    opacity: 0;
    transform: scale(.4);
}
.screen-5__bg_animate_done{
    opacity: 1;
    transform: scale(1);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
a{
    color: #fff;
}
.header{
    background-color: #000;
}
.header_status_back{
    background-color: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
}
.header__wrap{
    width:100%;
    height: 80px;
    margin: 0 auto;
    position: relative;
}
.header__logo{
    width: 200px;
    height: 38px;
    line-height: 38px;
    font-size: 20px;
    color: #fff;
    text-indent: 50px;
    background: url('../img/logo.png') left center no-repeat;
    background-size: 38px 38px;
    position: absolute;
    top: 50%;
    margin-top: -19px;
    left: 20px;
    cursor:pointer;
}
.header__logo:hover{
    color: red;
}
/*导航*/
.header__nav{
    position: absolute;
    right: 20px;
    height: 38px;
    top: 50%;
    margin-top: -19px;
}
/*导航内元素*/
.header__nav-item{
    color: #fff;
    font-size: 14px;
    display: block;
    height: 38px;
    line-height: 38px;
    float: left;
    position: relative;
    width: 60px;
    text-align: center;
/*  margin: 0;*/
    padding-left: 40px;
}
.header__nav-item_status_active{
    color: #f01400;
}
/*导航下划线*/
.header__nav-item_status_active::after{
    /*content: ' ';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    background-color:#f01400; 
    left: 0;
    bottom: 0;*/
}
/*导航条按钮*/
.header__nav-item_custom_button{
    background: #f01400;
    color: #fff;
    text-align: center;
    width: 90px;
    border-radius: 3px;
    /**/
    margin-left:40px;
    padding: 0;
}
.header__nav-item_custom_button:hover{
    background: #990000;
}
/*第一屏*/
.screen-1{
    height: 640px;
    background-color: #e7e7e7;
    position: relative;
    overflow: hidden;
    background:url(../img/sc1.jpg) no-repeat center;
    background-size: cover;
}
/*文字内容*/
.screen-1__heading{
    font-weight: bold;
    margin: 0;
    padding: 0;
    font-size:46px;
    color: #fff;
    text-align: center;
    padding-top: 195px;
}
.screen-1__heading_b{
    font-weight: normal;
    margin: 0;
    padding: 0;
    font-size:20px;
    color: #fff;
    text-align: center;
    padding-top: 30px;
}
/*第二屏*/
.screen-2{
    background-color: #fafafa;
    height: 640px;
    position: relative;
    overflow: hidden;
    /*让背景图撑满整个屏*/
    background-size: cover;
}
 
.screen-2__heading{
    font-weight: bold;
    margin: 0;
    padding: 0;
    font-size:46px;
    line-height: 46px;
    color: #2c3137;
    text-align: center;
    padding-top: 100px;
}
.screen-2__subheading_b{
    font-weight: normal;
    margin: 0;
    padding: 0;
    font-size:16px;
    color: #2c3137;
    text-align: center;
    padding-top: 40px;
    line-height: 28px;
}
.screen-2__subheading{
    font-weight: normal;
    margin: -35px;
    padding: 0;
    font-size:16px;
    color: #2c3137;
    text-align: center;
    padding-top: 25px;
    line-height: 28px;
}
.screen-2__picture{
    width: 928px;
    height: 873px;
    background:url(../img/sc2.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -464px;
    bottom: -256px;
    z-index: 2;
}
.screen-2__point_people{
    width: 275px;
    height: 380px;
    left: 50%;
    margin-left: -137.5px;
    bottom: 252px;
    position: absolute;
    background: url(../img/sc2-1.png) no-repeat center right;
    z-index: 2;
}
.screen-2__point{
    width: 266px;
    height: 205px;
    left: 46%;
    bottom: 355px;
    position: absolute;
    background: url(../img/sc2-2.png) no-repeat center left;
    z-index: 1;
}
/*第三屏*/
.screen-3{
    background-color: #2b333b;
    height: 640px;
    position: relative;
    overflow: hidden;
    /*让背景图撑满整个屏*/
    background-size: cover;
}
/*第三屏容器*/
.screen-3__wrap{
    width: 1400px;
    height: auto;
    position: relative;
    left: 50%;
    margin-left: -700px;
}
/*大标题*/
.screen-3__heading{
    position: absolute;
    font-size:30px;
    line-height: 30px;
    color: #ffffff;
    top: 230px;
    right: 215px;
}
/*子标题*/
.screen-3__subheading{
    font-size:17px;
    color: #ffffff;
    text-align: left;
    padding-top: 322px;
    right: 0;
    line-height: 28px;
    position: absolute;
}
/*图片*/
.screen-3__picture{
    width: 574px;
    height: 640px;
    background:url(../img/sc3.png) no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    background-size: cover;
}
/*左侧内容*/
.screen-3__features{
    position: absolute;
    top: 525px;
    right: 0;
    width: 486px;
    height: 60px;
}
.screen-3__features__item{
    width: 60px;
    height:60px;
    margin: 0 30px 30px 0;
    float: left;
    color: #fff;
    text-align: center;
}
.screen-3__features__item__desc1{
    border: 3px solid #1f5975;
    border-radius:60px;
}
.screen-3__features__item__desc2{
    border: 3px solid #424d76;
    border-radius:60px;
}
.screen-3__features__item__desc3{
    border: 3px solid #6b4146;
    border-radius:60px;
}
.screen-3__features__item__desc4{
    border: 3px solid #23595f;
    border-radius:60px;
}
.screen-3__features__item__desc5{
    border: 3px solid #3e4e40;
    border-radius:60px;
}
.screen-3__features__item__desc{
    height: 60px;
    width: 60px;
    font-size: 12px;
    line-height: 60px;
}
/*第四屏*/
.screen-4{
    height: 640px;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    /*让背景图撑满整个屏*/
    background-size: cover;
}
.screen-4__wrap{
    width: 1200px;
    height: auto;
    margin: 0 auto;
    position: relative;
}
/*大标题*/
.screen-4__heading{
    font-size: 44px;
    line-height: 44px;
    color: #000;
    text-align: center;
    padding-top: 90px;
    font-weight: bold;
}
/*子标题*/
.screen-4__subheading{
    font-size: 14px;
    color: #464a4f;
    text-align: center;
    padding-top: 60px;
}
/*手机型号*/
.screen-4__type{
    width: 1200px;
    height: auto;
    position: absolute;
    top: 304px;
}
/*单个手机*/
.screen-4__type__item{
    width: 80px;
    height: 80px;
    float: left;
    text-align: center;
    background-size: cover;
}
/*手机描述*/
.screen-4__type__item__color{
    width: 120px;
    height: 14px;
    line-height: 14px;
    font:14px;
    color: #2c3238;
    position: absolute;
    bottom: -34px;
    text-align: center;
     
}
.screen-4__type__item__color1{
    left: 90px;
}
.screen-4__type__item__color2{
    left: 390px;
}
.screen-4__type__item__color3{
    left: 690px;
}
.screen-4__type__item__color4{
    left: 990px;
}
.screen-4__type__item_i_1{
    background: url('../img/sc4-1.png') no-repeat left top;
    margin-right: 110px;
    margin-left: 110px;
}
.screen-4__type__item_i_2{
    background: url('../img/sc4-2.png') no-repeat left top;
    margin-right: 110px;
    margin-left: 110px;
}
.screen-4__type__item_i_3{
    background: url('../img/sc4-3.png') no-repeat left top;
    margin-right: 110px;
    margin-left: 110px;
}
.screen-4__type__item_i_4{
    background: url('../img/sc4-4.png') no-repeat left top;
    margin-right: 110px;
    margin-left: 110px;
}
/*第五屏*/
.screen-5{
    height: 640px;
    position: relative;
    overflow: hidden;
    background:url(../img/sc5.jpg) no-repeat center;
    /*让背景图撑满整个屏*/
    background-size: cover;
}
.screen-5__bg{
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 95px;
    background:url(../img/sc5-1.png) no-repeat center;
}
/*大标题*/
.screen-5__heading{
    font-size: 42px;
    line-height: 42px;
    color: #fff;
    text-align: center;
    padding-top: 364px;
}
/*子标题*/
.screen-5__subheading{
    font-size: 21px;
    color: #fff;
    text-align: center;
    padding-top: 60px;
    line-height: 21px;
}
 
/*第六屏*/
.screen-buy{
    padding: 69px 0;
    position: relative;
    overflow: hidden;
    background: #fff;
    text-align: center;
    /*让背景图撑满整个屏*/
    background-size: cover;
}
/*按钮*/
.screen-buy__button{
    height: 60px;
    width: 240px;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    color: #000;
    display: inline-block;
    border: 1px #000 solid;
     
}
.screen-buy__button:hover{
    color: red;
}
/*底部*/
.footer{
    height: 100px;
    color: #fff;
    background-color: #07111b;
    text-align: center;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.footer-in{
    margin-top: 30px;
    padding: 0;
}
.footer-word span{
    font-size: 12px;
    margin-right: 43px;
}
/*导航侧边栏*/
.outline{
    position: fixed;
    padding: 5px 10px;
    bottom: 120px;
    right: 0;
    z-index: 1;
    background-color: #fff;
     box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
    z-index: 3;
}
.outline__item{
    display: block;
    width: 40px;
    height: 30px;
    line-height: 30px;
    padding: 5px 0;
    background: rgb(255,255,255);
    margin: 5px 0px 0px;
    border-top: 1px solid #eee;
    text-align: center;
    color: #93999f;
}
.outline__item:first-child{
    border: none;
}
.outline__item:hover,
.outline__item_status_active{
    color: #f00;
}
.header__nav-tip{
    position: absolute;
    width: 30px;
    margin-left: 40px;
    height: 2px;
    background: #f00;
    left: 0;
    bottom: 0px;
    transition:  all .5s;
}
Redamancy_Y6 2020-03-02
源自：宣传页项目   5-6 作业题
21
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

4回答
好帮手慕慕子 回答被采纳获得+3积分 2020-03-03 09:44:40

同学你好，更改index.css文件中如下位置的width确实是可以改变下划线宽度的。

http://img1.sycdn.imooc.com//climg/5e5db63209bcb9a208660532.jpg

老师测试结果如下：

http://img1.sycdn.imooc.com//climg/5e5db65209a1477406580586.jpg

http://img1.sycdn.imooc.com//climg/5e5db65c09ae3ada03400140.jpg

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

0
收起回答
提问者 Redamancy_Y6 2020-03-02 19:43:44

老师，我更改宽度了，但是这条红色的下划线并没有变长http://img1.sycdn.imooc.com//climg/5e5cf168092eba5201230067.jpg

0
收起回答
好帮手慕慕子 2020-03-02 18:04:47

同学你好，如下，可以在css中通过width属性调试下划线宽度。

http://img1.sycdn.imooc.com//climg/5e5cda2b0996e50d13040716.jpg

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

0
收起回答
  • 提问者 Redamancy_Y6 #1
    请老师看一下我刚刚在本问题中回答的图，我把宽度调宽但是没有效果
    2020-03-02 19:45:23
好帮手慕慕子 2020-03-02 15:10:33

同学你好，因为没有在html中设置顶部导航先对应的下划线，无法获取到对应的元素，导致代码报错，所以整体效果无法实现。建议：参考如下进行修改：

  1. 在html结构中添加下划线。

    http://img1.sycdn.imooc.com//climg/5e5cb0b709c10f5119260636.jpg

  2. 在css中设置样式

    http://img1.sycdn.imooc.com//climg/5e5cb0c7092a086806500392.jpg

  3. js中在使用该元素之前获取对应的元素。并调整left的计算

    http://img1.sycdn.imooc.com//climg/5e5cb0ea09f7756014241034.jpg

老师这边测试修改后，动画就可以正常运行了。至于作业中其他细节问题，由于同学这个代码是个项目作业，建议同学提交作业，批作业的老师会针对同学的代码中存在的细节问题，给出详细的修改方案，并整理成文档，发送给同学，便于同学查看。

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

0
收起回答
  • 提问者 Redamancy_Y6 #1
    老师，导航条下面的红色下划线的长度应该在哪里调？
    2020-03-02 15:51:18
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师,麻烦帮帮我,找了很久也没解决的问题!
0 0 4
老师，麻烦看一下
5 0 2
老师，麻烦看一下
11 0 4
老师麻烦看一下 调试不出来 代码如下
6 0 2
为什么我的menu-box宽高都不对，麻烦看一下问题出在哪。图1是我的，图2是老师的
0 1 5

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码