体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

来源：5-6 作业题

Redamancy_Y6

2020-03-02 14:51:12

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

<!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>
// 获取元素

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);
}
// 将有动画效果的放一起
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);
}
/*第一屏*/
.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);
}
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;
}


写回答

4回答

好帮手慕慕子

2020-03-03

已采纳

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

http://img.mukewang.com/climg/5e5db63209bcb9a208660532.jpg

老师测试结果如下：

http://img.mukewang.com/climg/5e5db65209a1477406580586.jpg

http://img.mukewang.com/climg/5e5db65c09ae3ada03400140.jpg

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

0

Redamancy_Y6

提问者

2020-03-02

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

0

好帮手慕慕子

2020-03-02

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

http://img.mukewang.com/climg/5e5cda2b0996e50d13040716.jpg

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

0
hedamancy_Y6
h 请老师看一下我刚刚在本问题中回答的图，我把宽度调宽但是没有效果
h020-03-02
共1条回复

好帮手慕慕子

2020-03-02

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

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

    http://img.mukewang.com/climg/5e5cb0b709c10f5119260636.jpg

  2. 在css中设置样式

    http://img.mukewang.com/climg/5e5cb0c7092a086806500392.jpg

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

    http://img.mukewang.com/climg/5e5cb0ea09f7756014241034.jpg

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

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

0
hedamancy_Y6
h 老师，导航条下面的红色下划线的长度应该在哪里调？
h020-03-02
共1条回复

0 学习 · 40143 问题

查看课程

相似问题

老师，第一屏滚动没有效果是怎么回事？麻烦老师帮忙看一下是哪里打错了

回答 5

麻烦老师帮忙看哈滑动门这儿，为什么影响结构nav结构了。滑动门部分

回答 2

老师帮我看下

回答 4

老师，麻烦看下源码好像这里出问题了呀

回答 1

老师，帮我看下错在哪里了

回答 3

打开慕课网App查看更多内容