为什么我第五屏实现效果和老师的不一样

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/base.css" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>
  <body>
    <!-- 头部导航栏 -->
    <header class="header">
      <div class="header__wrap">
        <div class="header__logo">慕课手机</div>
        <nav class="header__nav">
          <a
            href="javescript:;"
            class="header__nav-item header__nav-item__status__active"
            >首页</a
          >
          <a href="javescript:;" class="header__nav-item">型号</a>
          <a href="javescript:;" class="header__nav-item">说明</a>
          <a href="javescript:;" class="header__nav-item">其他产品</a>
          <a
            href="javescript:;"
            class="header__nav-item header__nav-item__custom__button"
            >立即购买</a
          >
        </nav>
      </div>
    </header>
    <!-- 第一屏 -->
    <div class="screen-1">
      <h2 class="screen-1__heading"><b>慕课手机</b> 让你的生活更精彩</h2>
      <div class="screen-1__phone"></div>
      <div class="screen-1__shadow"></div>
    </div>
    <!-- 第二屏 -->
    <div class="screen-2">
      <h2 class="screen-2__heading">优美的设计，更令人着迷</h2>
      <h3 class="screen-2__subheading">
        采用受欢迎的设计，让它更加出色。<br />
        款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。
      </h3>
      <div class="screen-2__phone">
        <div class="scree-2__point scree-2__point_i_1">高清摄像</div>
        <div
          class="scree-2__point scree-2__point_custom_right scree-2__point_i_2"
        >
          超薄机身
        </div>
        <div
          class="scree-2__point scree-2__point_custom_right scree-2__point_i_3"
        >
          大屏显示
        </div>
      </div>
    </div>
    <!-- 第三屏 -->
    <div class="screen-3">
      <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__phone"></div>
          <div class="screen-3__features">
            <div class="screen-3__features__item">
              <div class="screen-3__features__item__number">5.7</div>
              <div class="screen-3__features__item__desc">英寸大屏</div>
            </div>
            <div class="screen-3__features__item">
              <div class="screen-3__features__item__number">1200</div>
              <div class="screen-3__features__item__desc">万像素</div>
            </div>
            <div class="screen-3__features__item">
              <div class="screen-3__features__item__number">3D</div>
              <div class="screen-3__features__item__desc">touch</div>
            </div>
            <div class="screen-3__features__item">
              <div class="screen-3__features__item__number">A9</div>
              <div class="screen-3__features__item__desc">处理器</div>
            </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">慕课红</div>
            <div class="screen-4__type__item__storage">32G/64G/128G</div>
          </div>
          <div class="screen-4__type__item screen-4__type__item_i-2">
            <div class="screen-4__type__item__color">土豪金</div>
            <div class="screen-4__type__item__storage">32G/64G/128G</div>
          </div>
          <div class="screen-4__type__item screen-4__type__item_i-3">
            <div class="screen-4__type__item__color">太空灰</div>
            <div class="screen-4__type__item__storage">32G/64G/128G</div>
          </div>
          <div class="screen-4__type__item screen-4__type__item_i-4">
            <div class="screen-4__type__item__color">绅士黑</div>
            <div class="screen-4__type__item__storage">32G/64G/128G</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 href="javascript:;" class="screen-buy__button">立即购买</a>
    </div>
    <!-- 底部 -->
    <footer class="footer">
      © 2016 imooc.com 京ICP备13046642号
    </footer>
  </body>
</html>

蛤小蛤 2019-10-21

源自：宣传页项目 3-11 静态页面第五屏以及后续

收起

7回答

好帮手慕夭夭回答被采纳获得+3积分 2019-10-24 10:07:08

你好同学，根据你提供的图片，你说的不正常是指图片显示的太全吧？这个是正常的哦

你可以下载源码测试一下，也是这样的。老师那边之所以显示的不全是因为分辨率的问题。ie显示不全是因为低版本的ie不支持background-size属性，这个也不用管，实际开发中，基本上不考虑低版本ie了。同学的代码老师也看了一下，没有问题。不用纠结这里了，继续往下做吧。

祝学习愉快，望采纳。

收起回答

提问者蛤小蛤 2019-10-23 19:41:46

收起回答

好帮手慕夭夭 2019-10-23 19:22:44

你好同学，老师这边测试了谷歌，360以及火狐都没有问题。老师上一次让你把有问题的地方截图给老师看一下，但是同学没有截图。请点击浏览器右侧查看一下是不是缩放的比例有问题，调成100%哦。

祝学习愉快，望采纳。

收起回答

提问者蛤小蛤 #1

老师我还有一个问题很关键，在4-4网页动态效果上里边提的，您能帮我看一下么

2019-10-23 19:35:27
提问者蛤小蛤 #2

老师我测试了下IE里面显示效果是正常的只有360极速浏览器里不正常

2019-10-23 19:36:09

好帮手慕夭夭 2019-10-22 09:35:48

你好同学，老师这边和源码中实现的效果是一样的。如果你的出现问题，哪里有问题可以截图发给老师看一下，可以告诉老师你使用什么浏览器测试的。老师帮助你测试一下。

祝学习愉快 !

收起回答

提问者蛤小蛤 #1

360chrome

2019-10-23 18:41:57

好帮手慕夭夭 2019-10-21 19:31:59

你好同学，老师这边测试，效果是一样的，没有问题。同学那边是不是分辨率比较小，所以两边的图片展示不全，这个是正常的，可以下载源码对比一下，也是这样的。

祝学习愉快，望采纳。

收起回答

提问者蛤小蛤 #1

我的会看到整张图片。。。

2019-10-21 20:02:48

提问者蛤小蛤 2019-10-21 17:33:30

body {
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-family: MicrosoftYaHeiLight;
}
a {
  text-decoration: none;
}
h2,h3{
  margin: 0;
  padding: 0;
  font-weight: normal;
}

收起回答

提问者蛤小蛤 2019-10-21 17:32:46

/*  
 BEM设计模式
  
 模块（没有前缀，多个单词用 - 连接）
 元素（元素在模块之后，可以有多个层级，以 _ 连接） 
修饰（某元素、或者某模块特别的状态，必须有一个状态名和状态值，使用_连接）
  */

/* 头部导航栏 */
.header {
  background-color: #f7f7f7;
}
/* 包裹盒子 */
.header__wrap {
  height: 80px;
  width: 1200px;
  position: relative;
  margin: 0 auto;
}
/* logo图 */
.header__logo {
  width: 150px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  color: #07111b;
  text-indent: 50px;
  background: url(../img/logo.png) left center no-repeat;
  background-size: 40px 40px;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  left: 20px;
}
/* 导航项 */
.header__nav {
  position: absolute;
  right: 20px;
  height: 40px;
  line-height: 40px;
  top: 50%;
  margin-top: -20px;
}
.header__nav-item {
  color: #07111b;
  font-size: 14px;
  display: block;
  height: 40px;
  float: left;
  margin-left: 40px;
  position: relative;
}
.header__nav-item:hover {
  color: #f01414;
}
.header__nav-item__status__active {
  color: #f01414;
}
/* active下划线 */
.header__nav-item__status__active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  background-color: #f01414;
  width: 100%;
  height: 2px;
}
/* 黑色按钮块 */
.header__nav-item__custom__button {
  background-color: #07111b;
  border-radius: 2px;
  color: #ffffff;
  text-align: center;
  width: 90px;
}

/* 第一屏 */
.screen-1 {
  height: 800px;
  background-color: #e7e7e7;
  background: url(../img/bg-screen-1.png) no-repeat center;
  position: relative;
  overflow: hidden;
  background-size: cover;
}
.screen-1__heading {
  font-weight: normal;
  margin: 0;
  padding: 0;
  font-size: 46px;
  color: #4d555d;
  text-align: center;
  padding-top: 152px;
}
.screen-1__heading b {
  color: #f01414;
  font-weight: normal;
}
.screen-1__phone {
  width: 1375px;
  height: 305px;
  background: url(../img/screen-1-phone.png) no-repeat center;
  position: absolute;
  left: 50%;
  margin-left: -687px;
  bottom: 180px;
  z-index: 2;
}
.screen-1__shadow {
  width: 1233px;
  height: 411px;
  background: url(../img/screen-1-shadow.png) no-repeat center;
  position: absolute;
  left: 50%;
  margin-left: -616px;
  bottom: 30px;
  z-index: 1;
  opacity: 0.8;
}

/* 第二屏 */
.screen-2 {
  background-color: #fafafa;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.screen-2__heading {
  font-size: 46px;
  line-height: 46px;
  color: #f01414;
  text-align: center;
  padding-top: 96px;
}
.screen-2__subheading {
  font-size: 14px;
  color: #2c3137;
  text-align: center;
  padding-top: 25px;
  line-height: 28px;
}
.screen-2__phone {
  width: 928px;
  height: 873px;
  background: url(../img/screen-2-phone.png) no-repeat center;
  position: absolute;
  left: 50%;
  margin-left: -340px;
  bottom: -345px;
  z-index: 2;
}
.scree-2__point {
  width: 108px;
  height: 22px;
  padding-right: 112px;
  position: absolute;
  font-size: 22px;
  line-height: 22px;
  color: #4d555d;
  background: url(../img/icon-point-right.png) no-repeat center right;
}
.scree-2__point_custom_right {
  padding: 0 0 0 112px;
  background: url(../img/icon-point-left.png) no-repeat center left;
}
.scree-2__point_i_1 {
  top: 150px;
  left: -164px;
}
.scree-2__point_i_2 {
  top: 30px;
  right: 130px;
}
.scree-2__point_i_3 {
  top: 330px;
  right: 30px;
}

/* 第三屏 */
.screen-3 {
  background-color: red;
  height: 800px;
  background: url(../img/bg-screen-3.png) no-repeat center top;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
.screen-3__wrap {
  width: 1200px;
  height: auto;
  margin: 0 auto;
  position: relative;
}
.screen-3__heading {
  font-size: 46px;
  line-height: 46px;
  color: #ffffff;
  text-align: left;
  padding-top: 94px;
}
.screen-3__subheading {
  font-size: 14px;
  color: #ffffff;
  text-align: left;
  padding-top: 25px;
  line-height: 28px;
}
.screen-3__phone {
  width: 750px;
  height: 873px;
  background: url(../img/screen-3-phone.png) no-repeat center top;
  position: absolute;
  right: 0;
  top: 195px;
  z-index: 2;
}
.screen-3__features {
  position: absolute;
  top: 395px;
  left: 0;
  width: 320px;
  height: 280px;
}
.screen-3__features__item {
  width: 138px;
  height: 118px;
  border: 1px solid #cb7173;
  margin: 0 20px 20px 0;
  float: left;
  border-radius: 3px;
  color: #ffffff;
  text-align: center;
}
.screen-3__features__item__number {
  height: 36px;
  font-size: 36px;
  line-height: 36px;
  padding: 28px 0 8px;
}
.screen-3__features__item__desc {
  height: 14px;
  font-size: 14px;
  line-height: 14px;
}
/* 第四屏 */
.screen-4 {
  background-color: #ffffff;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.screen-4__wrap {
  width: 1200px;
  height: auto;
  margin: 0 auto;
  position: relative;
}
.screen-4__heading {
  font-size: 46px;
  line-height: 46px;
  color: #f01400;
  text-align: center;
  padding-top: 135px;
}
.screen-4__subheading {
  font-size: 14px;
  color: #464a4f;
  text-align: center;
  padding-top: 29px;
  line-height: 28px;
}
.screen-4__type {
  width: 1260px;
  height: 270px;
  position: absolute;
  top: 304px;
  margin-left: 30px;
}
.screen-4__type__item {
  width: 220px;
  margin-right: 90px;
  height: 270px;
  float: left;
  position: relative;
  text-align: center;
  background-size: cover;
}
.screen-4__type__item__color {
  width: 100%;
  height: 14px;
  line-height: 14px;
  font-size: 14px;
  color: #2c3238;
  position: absolute;
  bottom: -44px;
}
.screen-4__type__item_i-1 {
  background: url(../img/phone-1.png) no-repeat left top;
}
.screen-4__type__item_i-2 {
  background: url(../img/phone-2.png) no-repeat left top;
}
.screen-4__type__item_i-3 {
  background: url(../img/phone-3.png) no-repeat left top;
}
.screen-4__type__item_i-4 {
  background: url(../img/phone-4.png) no-repeat left top;
}
.screen-4__type__item__storage {
  width: 100%;
  height: 12px;
  line-height: 12px;
  font-size: 12px;
  color: #a4a9ae;
  position: absolute;
  bottom: -66px;
}

/* 第五屏 */
.screen-5 {
  height: 800px;
  position: relative;
  overflow: hidden;
  background-color: #d9dde1;
}
.screen-5__bg {
  width: 1920px;
  height: 433px;
  background: url(../img/bg-screen-5.png) no-repeat center;
  background-size: contain;
  position: absolute;
  left: 50%;
  margin-left: -960px;
  bottom: -100px;
}
.screen-5__heading {
  font-size: 46px;
  line-height: 46px;
  color: #f01414;
  text-align: center;
  padding-top: 130px;
}
.screen-5__subheading {
  font-size: 14px;
  color: #2c3137;
  text-align: center;
  padding-top: 25px;
  line-height: 28px;
}
/* 第六屏buy */
.screen-buy {
  height: 80px;
  padding: 120px 0;
  /* position: relative; */
  overflow: hidden;
  background: #2b333b url(../img/bg-screen-buy.png) center no-repeat;
  text-align: center;
}
.screen-buy__button {
  width: 240px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  font-size: 24px;
  color: #ffffff;
  background-color: #f01414;
  display: inline-block;
  border-radius: 3px;
  transition: all 0.5s;
}
.screen-buy__button:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
/* 底部 */
.footer {
  background-color: #07111b;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 12px;
  color: #ffffff;
}

收起回答