我这出问题了，麻烦老师看一下
老师，我在引入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;
}21
收起
正在回答
4回答
同学你好，更改index.css文件中如下位置的width确实是可以改变下划线宽度的。
老师测试结果如下：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
Redamancy_Y6
2020-03-02 19:43:44
老师，我更改宽度了，但是这条红色的下划线并没有变长
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星