作业，请老师帮忙看一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>作业部分</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
</head>
<body>
<div>
<header class="header">
<div class="header-warp">
<div class="header-log">H5实战页</div>
<nav class="header-nav">
<a href="javascript:;" class="nav-item item-active">实战课程</a>
<a href="javascript:;" class="nav-item">商业案例</a>
<a href="javascript:;" class="nav-item">课程体系</a>
<a href="javascript:;" class="nav-item">集成环境</a>
<a href="javascript:;" class="nav-item">云端学习</a>
<a href="javascript:;" class="nav-item item-btn">即刻学习</a>
<div class="header__nav-tip"></div>
</nav>
</div>
</header>
<div class="main">
<!-- 第一屏 -->
<div class="screen-1">
<h1 class="screen1-heading s1-heading-init">实战课程重磅上线</h1>
<h3 class="screen1-subheading s1-subheading-init">一键云学习，还在等待什么？</h3>
</div>
<!-- 第二屏 -->
<div class="screen-2">
<h2 class="screen2-heading hide">每门课都是真实商业案例</h2>
<div class="screen2-cut hide"></div>
<div class="screen2-subheading hide">
<h3>真实案例，真实场景，在实战中实践、操作、调试<br>
大牛带你体验BAT真实开发流程，所有开发过程————为你呈现</h3>
</div>
<div class="screen2-bg hide"></div>
<div class="screen2-rocket hide"></div>
<div class="screen2-man hide"></div>
</div>
<!-- 第三屏 -->
<div class="screen-3">
<div class="screen3-bg"></div>
<article>
<h2 class="screen3-heading">强大的语言课程体系支持</h2>
<div class="screen3-cut"></div>
<h3 class="screen3-subheading">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决，<br>
让你体验开发全流程</h3>
<div class="screen3-example">
<span class="s3-item">HTML5</span>
<span class="s3-item">PHP</span>
<span class="s3-item">JAVA</span>
<span class="s3-item">Python</span>
<span class="s3-item">Node.js</span>
</div>
</article>
</div>
<!-- 第四屏 -->
<div class="screen-4">
<h2 class="screen4-heading">省去本地复杂的环境搭建</h2>
<div class="screen4-cut"></div>
<h3 class="screen4-subheading">你可以告别在虚拟机中调试开发了</h3>
<div class="screen4-type">
<div class="s4-item s4-item1">
<div class="s4-item-storage">实战课程集成开发环境</div>
</div>
<div class="s4-item s4-item2">
<div class="s4-item-storage">内置终端命令</div>
</div>
<div class="s4-item s4-item3">
<div class="s4-item-storage">编译你的应用程序</div>
</div>
<div class="s4-item s4-item4">
<div class="s4-item-storage">通过云端服务输出效果</div>
</div>
</div>
</div>
<!-- 第五屏 -->
<div class="screen-5">
<div class="screen5-headbg"></div>
<h2 class="screen5-heading">云端学习可以这样简单</h2>
<div class="screen5-cut"></div>
<h3 class="screen5-subheading">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样</h3>
</div>
<!-- 学习体验 -->
<div class="screen-6">
<a href="" class="screen6-btn">继续了解学习体验</a>
</div>
</div>
</div>
<footer class="footer">
<div class="linklist">
<a href="">网站首页</a>
<a href="">人才招聘</a>
<a href="">联系我们</a>
<a href="">高校联盟</a>
<a href="">关于我们</a>
<a href="">讲师招募</a>
<a href="">意见反馈</a>
<a href="">友情链接</a>
</div>
<h3 class="explain">Copyright © 2015 imooc.com All Rights Reserved | 京ICP备 13046642号-2</h3>
</footer>
<div class="outline">
<a href="javascript:;" class="outline__item outline-active">实</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>
<a href="javascript:;" class="outline__item">即</a>
</div>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
//样式
*{margin:0;padding:0;border:none}a{text-decoration:none}.header{width:100%;height:80px;position:fixed;background-size:cover;z-index:3}.header-warp{width:1200px;height:80px;position:relative;margin:0 auto}.header-log{width:140px;height:60px;background:url(../img/logo.png) no-repeat center left;position:absolute;left:20px;top:50%;margin-top:-30px;text-align:center;line-height:60px;text-indent:40px;font-size:18px;font-weight:800;color:#fff}.header-nav{right:20px;position:absolute;height:40px;top:50%;margin-top:-20px;text-align:center}.nav-item{color:#fff;font-size:16px;font-weight:400;line-height:40px;display:block;float:left;width:90px;text-align:center;padding-left:30px}.item-active{color:red}.item-btn{margin-left:40px;padding:0;background:#000;border-radius:5px}.screen-1{height:640px;background:url(../img/sc1.jpg) no-repeat center;background-size:cover;overflow:hidden;position:relative}.screen1-heading{color:#fff;font-weight:400;text-align:center;font-size:48px;padding-top:240px}.screen1-subheading{color:#fff;font-weight:400;text-align:center;font-size:20px}.screen-2{height:640px;background:#f3f5f7;position:relative}.hide{opacity:0}.screen2-heading{text-align:center;font-size:40px;font-weight:400;padding-top:90px}.screen2-subheading{text-align:center;padding-top:25px}.screen2-cut{width:50px;height:3px;background:red;position:absolute;left:50%;margin-left:-20px;top:153px}.screen2-subheading>h3{text-align:center;font-size:16px;font-weight:400}.screen2-bg{width:750px;height:361px;position:absolute;background:url(../img/sc2.png) no-repeat center;bottom:0;left:50%;margin-left:-375px}.screen2-rocket{width:266px;height:205px;background:url(../img/sc2-2.png) no-repeat center;position:absolute;left:50%;bottom:94px}.screen2-man{width:275px;height:380px;background:url(../img/sc2-1.png) no-repeat center;position:absolute;bottom:0;left:50%;margin-left:-137px}.screen-3{height:640px;background-color:#2b333b;position:relative}.screen3-bg{width:570px;height:630px;background:url(../img/sc3.png) no-repeat center;background-size:cover;position:absolute;top:50%;margin-top:-315px;left:100px}.screen-3>article{width:520px;height:640px;position:absolute;right:100px}.screen3-heading{font-size:38px;font-weight:400;color:#fff;padding-top:150px}.screen3-cut{width:50px;height:3px;background-color:red;margin-top:24px}.screen3-subheading{font-size:14px;font-weight:400;color:#fff;padding-top:30px}.screen3-example{width:520px;height:70px;position:absolute;bottom:100px}.screen3-example>span{width:60px;height:60px;float:left}.screen3-example>span:nth-child(1){color:#1f5975;border:5px solid #1f5975;border-radius:50%;font-size:14px;font-weight:800;text-align:center;line-height:60px;margin-right:30px;cursor:pointer}.screen3-example>span:nth-child(2){color:#424d76;border:5px solid #424d76;border-radius:50%;font-size:14px;font-weight:800;text-align:center;line-height:60px;margin-right:30px;cursor:pointer}.screen3-example>span:nth-child(3){color:#6b4146;border:5px solid #6b4146;border-radius:50%;font-size:14px;font-weight:800;text-align:center;line-height:60px;margin-right:30px;cursor:pointer}.screen3-example>span:nth-child(4){color:#29535f;border:5px solid #29535f;border-radius:50%;font-size:14px;font-weight:800;text-align:center;line-height:60px;margin-right:30px;cursor:pointer}.screen3-example>span:nth-child(5){color:#3e4e40;border:5px solid #3e4e40;border-radius:50%;font-size:14px;font-weight:800;text-align:center;line-height:60px;margin-right:30px;cursor:pointer}.screen-4{background-color:#f3f5f7;height:640px;position:relative;overflow:hidden}.screen4-heading{font-size:38px;text-align:center;padding-top:90px}.screen4-cut{width:50px;height:3px;background-color:red;margin-top:15px;position:absolute;left:50%;margin-left:-25px}.screen4-subheading{font-size:16px;text-align:center;font-weight:400;margin-top:38px}.screen4-type{width:1200px;height:160px;position:absolute;top:360px;left:50%;margin-left:-600px}.s4-item{width:160px;height:155px;margin-right:70px;margin-left:70px;float:left;position:relative;text-align:center;background-size:cover}.s4-item1{background:url(../img/sc4-1.png) no-repeat center}.s4-item2{background:url(../img/sc4-2.png) no-repeat center}.s4-item3{background:url(../img/page4_3.png) no-repeat center}.s4-item4{background:url(../img/sc4-4.png) no-repeat center}.s4-item-storage{width:100%;height:14px;font-size:14px;line-height:14px;position:absolute;bottom:0}.screen-5{height:640px;background:url(../img/sc5.jpg) no-repeat center;background-size:cover;position:relative;overflow:hidden}.screen5-headbg{width:200px;height:200px;position:absolute;background:url(../img/sc5-1.png) no-repeat center;left:50%;margin-left:-100px;top:100px}.screen5-heading{font-size:38px;font-weight:400;color:#fff;padding-top:375px;text-align:center}.screen5-cut{width:50px;height:3px;background-color:#f3f5f7;position:absolute;left:50%;margin-left:-25px;margin-top:15px}.screen5-subheading{font-size:14px;font-weight:400;color:#fff;text-align:center;margin-top:38px}.screen-6{height:120px;position:relative;background-color:#fff}.screen6-btn{display:block;width:160px;height:60px;background-color:red;text-align:center;line-height:60px;font-size:16px;color:#f3f5f7;border-radius:10px;position:absolute;top:50%;left:50%;margin-top:-30px;margin-left:-80px}.screen6-btn:hover{background-color:#f3f5f7;color:red;transition:all 1s}.footer{height:100px;background-color:#000;position:relative}.linklist{position:absolute;width:960px;height:40px;top:50%;left:50%;margin-left:-480px;margin-top:-20px;text-align:center}.linklist>a{color:#c8cdd2;font-size:16px;font-weight:400;line-height:40px;display:block;float:left;width:90px;text-align:center;padding-left:30px}.linklist>a:hover{color:red}.explain{font-size:14px;color:#c8cdd2;text-align:center;font-weight:400;padding-top:70px}.outline{position:fixed;padding:5px 10px;bottom:120px;right:0;z-index:1;background-color:#fff;box-shadow:0 4px 12px 0 rgba(7,17,27,.1);z-index:3}.outline__item{display:block;width:40px;height:30px;line-height:30px;padding:5px 0;background:#fff;margin:5px 0 0;border-top:1px solid #eee;text-align:center;color:#93999f}.outline__item:first-child{border:none}.outline__item:hover,.outline__item_status_active{color:red}.header__nav-tip{position:absolute;width:67px;height:2px;background:red;left:0;bottom:0;margin-left:40px;transition:all .5s}
//动画
.screen1-heading,.screen1-subheading{transition:all 1s}.s1-heading-init{opacity:0;transform:translate(0,-50%)}.s1-heading-done,.s1-subheading-done{opacity:1;transform:translate(0,0)}.s1-subheading-init{opacity:0;transform:translate(0,700%)}.screen2-heading{transition:all 1s .5s}.screen2-subheading{transition:all 1s 1.5s}.screen2-cut{transition:all 1s 1s}.screen2-bg,.screen2-man,.screen2-rocket{transition:all 1s 2s}.s2-heading-init,.s2-subheading-init{opacity:0;transform:translate(-20%,0)}.s2-bg-done,.s2-cut-done,.s2-heading-done,.s2-man-done,.s2-rocket-done,.s2-subheading-done{opacity:1;transform:translate(0,0)}.s2-cut-init{opacity:0;transform:translate(-600%,0)}.s2-bg-init,.s2-man-init,.s2-rocket-init{opacity:0;transform:translate(0,100%)}.screen3-bg{transition:all 1s}.screen3-subheading{transition:all 1s 2s}.screen3-cut{transition:all 1s 1.5s}.screen3-heading{transition:all 1s 1s}.screen3-example{transition:all 1s 2s}.s3-bg-init{opacity:0;transform:translate(0,100%)}.s3-bg-done,.s3-cut-done,.s3-heading-done,.s3-subheading-done{opacity:1;transform:translate(0,0)}.s3-cut-init,.s3-heading-init,.s3-subheading-init{opacity:0;transform:translate(0,-100%)}.s3-example-init{opacity:0;transform:translate(-100%,0)}.s3-example-done{opacity:1;transform:translate(0,0)}.screen4-cut,.screen4-heading,.screen4-subheading{transition:all 1s}.s4-heading-init{opacity:0;transform:translate(0,-100%)}.s4-subheading-init{opacity:0;transform:translate(0,600%)}.s4-cut-init{opacity:0;transform:translate(-600%,0)}.s4-heading-done,.s4-subheading-done{opacity:1;transform:translate(0,0)}.s4-item1{transition:all 1s .5s}.s4-item2{transition:all 1s 1s}.s4-item3{transition:all 1s 1.5s}.s4-item4{transition:all 1s 2s}.s4-i1-init,.s4-i2-init,.s4-i3-init,.s4-i4-init{opacity:0}.s4-i1-done,.s4-i2-done,.s4-i3-done,.s4-i4-done{opacity:1}.screen5-headbg,.screen5-heading{transition:all 1s}.screen5-cut{transition:all 1s .5s}.screen5-subheading{transition:all 1s 1s}.s5-headbg-init{opacity:0;transform:translate(0,-100%)}.s5-headbg-done{opacity:1;transform:translate(0,0)}.s5-heading-init,.s5-subheading-init{opacity:0;transform:translate(-10%,0)}.s5-heading-done,.s5-subheading-done{opacity:1;transform:translate(0,0)}.s5-cut-init{opacity:0;transform:translate(-400%,0)}.s5-cut-done{opacity:1;transform:translate(0,0)}@-webkit-keyframes bounce{0%,100%{transform:scale(.8)}50%{transform:scale(1)}}.screen3-example>span:nth-child(1)::after,.screen3-example>span:nth-child(1)::before{content:' ';display:block;width:70px;height:70px;position:absolute;top:-4px;left:-4px;border:4px solid #1f59759e;border-radius:50%;-webkit-animation:bounce 2s infinite}.screen3-example>span:nth-child(1)::before{-webkit-animation:bounce 2s infinite 1.5s}.screen3-example>span:nth-child(2)::after,.screen3-example>span:nth-child(2)::before{content:' ';display:block;width:70px;height:70px;position:absolute;top:-4px;left:96px;border:4px solid #424d769e;border-radius:50%;-webkit-animation:bounce 2s infinite}.screen3-example>span:nth-child(2)::before{-webkit-animation:bounce 2s infinite 1.5s}.screen3-example>span:nth-child(3)::after,.screen3-example>span:nth-child(3)::before{content:' ';display:block;width:70px;height:70px;position:absolute;top:-4px;left:196px;border:4px solid #6b41469e;border-radius:50%;-webkit-animation:bounce 2s infinite}.screen3-example>span:nth-child(3)::before{-webkit-animation:bounce 2s infinite 1.5s}.screen3-example>span:nth-child(4)::after,.screen3-example>span:nth-child(4)::before{content:' ';display:block;width:70px;height:70px;position:absolute;top:-4px;left:296px;border:4px solid #29535f9e;border-radius:50%;-webkit-animation:bounce 2s infinite}.screen3-example>span:nth-child(4)::before{-webkit-animation:bounce 2s infinite 1.5s}.screen3-example>span:nth-child(5)::after,.screen3-example>span:nth-child(5)::before{content:' ';display:block;width:70px;height:70px;position:absolute;top:-4px;left:396px;border:4px solid #3e4e409e;border-radius:50%;-webkit-animation:bounce 2s infinite}.screen3-example>span:nth-child(5)::before{-webkit-animation:bounce 2s infinite 1.5s}.header{transition:all 1s}.header-status-back{background-color:rgba(0,0,0,.5)}.outline{opacity:0;transition:all 1s;transform:translate(100%,0)}.outline-status-in{opacity:1;transform:translate(0,0)}
//JS
var getElem=function(a){return document.querySelector(a)},getAllElem=function(a){return document.querySelectorAll(a)},getCls=function(a){return a.getAttribute("class")},setCls=function(a,b){return a.setAttribute("class",b)},addCls=function(a,b){var c=getCls(a);-1===c.indexOf(b)&&setCls(a,c+" "+b)},delCls=function(a,b){var c=getCls(a);-1<c.indexOf(b)&&setCls(a,c.split(b).join(" ").replace(/\s+/g," "))},screenAnimateElements={".screen-1":[".screen1-heading",".screen1-subheading"],".screen-2":[".screen2-heading",".screen2-subheading",".screen2-cut",".screen2-bg",".screen2-rocket",".screen2-man"],".screen-3":[".screen3-bg",".screen3-heading",".screen3-cut",".screen3-subheading",".screen3-example",".s3-item"],".screen-4":[".screen4-heading",".screen4-cut",".screen4-subheading",".s4-item1",".s4-item2",".s4-item3",".s4-item4"],".screen-5":[".screen5-headbg",".screen5-heading",".screen5-cut",".screen5-subheading"]},setElements={".screen-1":["s1-heading","s1-subheading"],".screen-2":["s2-heading","s2-subheading","s2-cut","s2-bg","s2-man","s2-rocket"],".screen-3":["s3-bg","s3-heading","s3-cut","s3-subheading","s3-example"],".screen-4":["s4-heading","s4-cut","s4-subheading","s4-i1","s4-i2","s4-i3","s4-i4"],".screen-5":["s5-headbg","s5-heading","s5-cut","s5-subheading"]},setScreenAnimateInit=function(a){for(var b=document.querySelector(a),c=screenAnimateElements[a],d=setElements[a],e=0;e<c.length;e++){var f=document.querySelector(c[e]),g=f.getAttribute("class");f.className=g+" "+d[e]+"-init"}},playScreenAnimateDone=function(a){for(var b=document.querySelector(a),c=screenAnimateElements[a],d=setElements[a],e=0;e<c.length;e++){var f=document.querySelector(c[e]),g=f.getAttribute("class");f.setAttribute("class",g.replace("-init","-done"))}};function init(){for(k in screenAnimateElements)".screen-1"!==k&&setScreenAnimateInit(k)}init();var navItems=getAllElem(".nav-item"),outLineItems=getAllElem(".outline__item"),switchNavItemsActive=function(a){for(var b=0;b<navItems.length;b++)delCls(navItems[b],"item-active");addCls(navItems[a],"item-active");for(var b=0;b<outLineItems.length;b++)delCls(outLineItems[b],"outline__item_status_active");addCls(outLineItems[a],"outline__item_status_active")};window.onscroll=function(){var a=document.body.scrollTop||document.documentElement.scrollTop;80<a?(addCls(getElem(".header"),"header-status-back"),addCls(getElem(".outline"),"outline-status-in")):(delCls(getElem(".header"),"header-status-back"),delCls(getElem(".outline"),"outline-status-in"),switchNavItemsActive(0)),1<a&&(playScreenAnimateDone(".screen-1"),switchNavItemsActive(0)),a>430&&(playScreenAnimateDone(".screen-2"),switchNavItemsActive(1)),a>1070&&(playScreenAnimateDone(".screen-3"),switchNavItemsActive(2)),a>1710&&(playScreenAnimateDone(".screen-4"),switchNavItemsActive(3)),a>2350&&(playScreenAnimateDone(".screen-5"),switchNavItemsActive(4))};for(var setNavJump=function(a,b){var c=b[a];c.onclick=function(){document.documentElement.scrollTop=640*a-200}},i=0;i<navItems.length;i++)setNavJump(i,navItems);for(var i=0;i<outLineItems.length;i++)setNavJump(i,outLineItems);for(var navTip=getElem(".header__nav-tip"),setTip=function(a,b){b[a].onmouseover=function(){navTip.style.left=120*a+"px"};var c=0;b[a].onmouseout=function(){for(var a=0;a<b.length;a++)-1<getCls(b[a]).indexOf("item-active")&&(c=a);navTip.style.left=120*c+"px"}},i=0;i<navItems.length;i++)setTip(i,navItems);setTimeout(function(){playScreenAnimateDone(".screen-1")},1e3);
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星