可以参考下我的作品，在老师的基础上我做了优化：
1、音乐停止与播放时图标指针变化
2、第二页倒计时显示
3、展示到第三页的时候绑定上拉下滑翻页。
github：https://github.com/ar414-com/html5cards
效果链接：https://ar414-com.github.io/html5cards/(觉得有帮助可以start一下呗)

用谷歌浏览器运行你的HTML，F12调试，换成手机模式

href没找对么

千图网

不知道啊

你在通配符哪里改一下字体颜色，看看CSS格式是否链入。

一。Alt + F3 多选

二 按住Ctrl键 选择多行  然后输入 就会输入多个class

music的高度也要设置为百分之百

http://blog.csdn.net/charlene0824/article/details/50705795

试试在CSS样式的通配符里改一下文字颜色，看看CSS文件是否链入HTML中。

屏幕宽640px 对应100vw

100/640=0.15625 vw/1px

font-size为10px,换成vw单位为

10*0.15625=1.5625vw

视频中说是在ps中量出来的

设置动画和延时,

加上这个margin:auto;

这是位置不统一造成的，请检查一下html,body{height:100%;}是否设置成为height：100%了

有的呢

我也是移动不到右边

为什么我的中文显示为乱码

*{
   margin:0;
   padding:0;
   border:none;
   font-size: 1.5625vw;
   font-family:"Microsoft Yahei";
}
html,
body{
   height:100%;
   overflow: hidden;
}
.music {
  position:fixed;
  top:3vh;
   right:4vw;
   z-index:5;
   width:15vw;
   height:15vw;
   border:4px solid #ef1639;
   border-radius: 50%;
   background-color: #fff;
}
.music > img:first-of-type{
   position:absolute;
   z-index: 1;
   top:24%;
   right:2.5%;
   width:28.421%;
}
.music > img:last-of-type{
   position:absolute;
   z-index: 0;
   top:0;
   right:0;
   bottom:0;
   left:0;
   margin:auto;
   width:79%;
}
.music > img.play{
   animation:music_disc 4s linear infinite;
}
@keyframes music_disc {
   0%{transform: rotate(0deg);}
   100%{transform: rotate(360deg);}
}

.page{
   height:100%;
   width:100%;
   position:absolute;
}
.page > .bg{
   position:absolute;
   height:100%;
   width:100%;
   z-index:-1;
}

#page1{display:block;}
#page2{display:none;}
#page3{display:none;}
#page1 > .bg{
   background: url(images/p1_bg.jpg) no-repeat center center;
   background-size:100%;
}
#page1 > .p1_lantern{
   position:absolute;
   top:-3.4%;
   right:0;
   left:0;
   margin:auto;
   color:#fff;
   background: url('images/p1_lantern.png') no-repeat center bottom;
   background-size:100%;
   width:45vw;
   height:71.2vh;
   font-size: 3.506rem;
   padding-top:31vh;
   text-align: center;
   -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
       -ms-box-sizing:border-box;
        -o-box-sizing:border-box;
           box-sizing:border-box;
}
#page1 > .p1_lantern:before{
   position: absolute;
   top:0;
   right:0;
   left:0;
   bottom:0;
   z-index: -1;
   content: "";
   border-radius: 50%;
   margin:auto;
   width:30vw;
   height:30vw;
   background: #d60b3b;
   opacity: .5;
   -webkit-box-shadow: 0 0 10vw 10vw #d60b3b;
      -moz-box-shadow: 0 0 10vw 10vw #d60b3b;
       -ms-box-shadow: 0 0 10vw 10vw #d60b3b;
        -o-box-shadow: 0 0 10vw 10vw #d60b3b;
           box-shadow: 0 0 10vw 10vw #d60b3b;
   animation: p1_lantern .5s infinite alternate;
}
@keyframes p1_lantern {
   0%{opacity:.5;transform:scale(.8,.8);}
   100%{opacity:1;}
}
#page1 > .p1_imooc {
   position: absolute;
   right:0;
   left:0;
   bottom:9vh;
   background: url("images/p1_imooc.png") no-repeat center center;
   background-size:100%;
   height:18.63vh;
   width:27.656vw;
   margin:auto;
}
#page1 > .p1_words{
   font-size:2.134rem;
   position: absolute;
   right:0;
   bottom:48px;
   left:0;
   text-align: center;
   color:#231815;
}
#page2{
   transition:.5s;
}
#page2.fadeOut{
   opacity:.3;
   transform:translate(0,-100%);
}
#page2 > .bg {
   background: url(images/p2_bg.jpg) no-repeat center center;
   background-size:100%;
}
#page2 > .p2_circle{
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:auto;
   background: url(images/p2_circle_outer.png) no-repeat center center;
   background-size: 100%;
   width:59.375vw;
   height:59.375vw;
   animation:p2_circle_outer 1s linear 3s infinite;
}
@keyframes p2_circle_outer {
   0%{transform:rotate(0deg);}
   100%{transform:rotate(-360deg);}
}
#page2 > .p2_circle:before{
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:auto;
   content: "";
   background: url(images/p2_circle_middle.png) no-repeat center center;
   background-size: 100%;
   width:45.625vw;
   height:45.625vw;
   animation:p2_circle_middle 1s linear 2s infinite;
}
@keyframes p2_circle_middle {
   0%{transform:rotate(0deg);}
   100%{transform:rotate(720deg);}
}
#page2 > .p2_circle:after{
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:auto;
   content: "";
   background: url(images/p2_circle_inner.png) no-repeat center center;
   background-size: 100%;
   width:39.937vw;
   height:39.937vw;
   animation:p2_circle_inner 1s linear 1s infinite;
}
@keyframes p2_circle_inner {
   0%{transform:rotate(0deg);}
   100%{transform:rotate(-1080deg);}
}
#page2 > .p2_2016{
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:auto;
   background: url(images/p2_2016.png) no-repeat center center;
   background-size: 100%;
   width:27.5vw;
   height:6.24vh;
}
#page2 > .p2_bg_loading{
   z-index:4;
   background:#ef1639;
   animation: p2_bg_loading 1s linear forwards;
}
@keyframes p2_bg_loading {
   0%{opacity:1;}
   100%{opacity:0;}
}
#page3{
   transition:.5s;
}
#page3.fadeIn{
   transform:translate(0,-100%);
}
#page3 > .bg {
   background: url(images/p3_bg.jpg) no-repeat center center;
   background-size:100%;
}
#page3 > .p3_logo{
   width:34.687vw;
   height:6.327vh;
   position:absolute;
   top:7.8vh;
   right:0;
   left:0;
   margin:auto;
   background: url(images/p3_logo.png) no-repeat center center;
   background-size:100%;
}
#page3 > .p3_title{
   width:48.125vw;
   height:50vh;
   position: absolute;
   top:21vh;
   right:0;
   left:0;
   margin:auto;
   background: url(images/p3_title.png) no-repeat center center;
   background-size:100%;
}
#page3 > .p3_second{
   width:22.8125vw;
   height:41.652vh;
   position: absolute;
   top:25.48vh;
   left:3.75vw;
   margin:auto;
   background: url(images/p3_couplet_second.png) no-repeat center center;
   background-size:100%;
}
#page3 > .p3_first{
   width:22.8125vw;
   height:41.652vh;
   position: absolute;
   top:25.48vh;
   right:3.75vw;
   margin:auto;
   background: url(images/p3_couplet_first.png) no-repeat center center;
   background-size:100%;
}
#page3 > .p3_blessing {
   width:32vw;
   height:32vw;
   position: absolute;
   right:0;
   bottom:10vh;
   left:0;
   margin:auto;
   border-radius:50%;
   background: url(images/p3_blessing.png) no-repeat center center;
   background-size:100%;
   animation:p3_blessing 2s linear infinite;
}
@keyframes p3_blessing {
   0%{transofrm:rotate(0deg);}
   100%{transofrm:rotate(360deg);}
}

首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px;

这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了,

vh vw全称为Viewport Height和Viewport Width 意思就是视窗 

当处理宽度的时候，%单位更合适。处理高度的时候，vh单位更好。

手机端页面应该不需要兼容ie8以下吧

那个是辅助功能，在编程的应用平台里才有，就像Java开发时eclipse中的提示功能一样

vw指的是根据屏幕的视口宽度(viewport width)来计算元素所占据的宽度以及位置,vh同理,指的是根据适口高度的高度来计算元素所占的高度和位置,而%则是直接根据屏幕的分辨率来计算,不管你适口实际是多大,这个主要是体现在客户端上,就如课程中讲适口宽度那一节就可以看出适口和分辨率之间的区别.祝你好运!么么哒

#musci>img:first-of-type写错了，应该是music

我个人推荐使用百分比来控制字体大小和元素宽度、边距值

正方形的高度可以通过JS来赋值

sublime Text