老师更改效果还是不正确课件代码写的bottom：-100px 效果并不一致

.header{
background: #FFFFFF;
}

.header_wrap{
height: 80px;
width: 1200px;
position: relative;
margin: 0 auto;

}

.header_logo{
position: absolute;
width: 132px;
height: 40px;
line-height: 40px;
font-size: 20px;
color: #07111B;
text-indent: 50px;
background: url("../image/宣传页项目切图/慕课手机_slices/形状 62.png")left center no-repeat;
background-size: 40px 40px;
top: 50%;
margin-top: -20px;
left: 20px;

}
.header_nav{
position: absolute;
right: 20px;
height: 40px;
margin-top: -20px;
top: 50%;
}
.header_nav-item{
color: #292f35;
font-size: 14px;
display: block;
height: 40px;
float: left;
margin-left: 40px;
line-height: 40px;
position: relative;
}
.header_nav-item:hover{
color: #f01400;
}
.header_nav-item_status_active{
color: #f01400;
border-bottom: 2px solid red;

}
.header_nav-item_status_active::after{
content: ' ';
display: block;
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
background-color:#f01400;
}
.header_nav-item_custom_button{
background-color: #000;
color: #f4f4f5;
text-align: center;
border-radius: 3px;
line-height: 40px;
width: 90px;
height: 40px;

}

/* 第一屏样式 */
.screen-1{
height: 800px;
background: url(../image/宣传页项目切图/慕课手机_slices/background.png)no-repeat center;
position: relative;
overflow: hidden;
background-size:cover;
}
.screen-1_heading{
font-weight: normal;
margin: 0;
padding: 0;
color: #4d555d;
text-align: center;
padding-top: 152px;
font-size: 46px;
}
.screen-1_heading b{
color: #f01400;
font-weight: normal;

}
.screen-1_phone{
width: 1375px;
height: 305px;
background: url(../image/宣传页项目切图/慕课手机_slices/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(../image/宣传页项目切图/慕课手机_slices/shadow.png) no-repeat center;
position: absolute;
left: 50%;
margin-left: -616px;
bottom: 30px;
z-index: 1;
opacity: .8;
}
/* 第二屏 */
.screen-2{
background-color: #fafafa;
height: 800px;
position: relative;
overflow: hidden;
}
.screen-2_heading{
font-weight: normal;
margin: 0;
padding: 0;
color: #f01400;
text-align: center;
padding-top: 96px;
font-size: 46px;
line-height: 46px;

}
.screen-2_subheading{
font-weight: normal;
margin: 0;
padding: 0;
color: #2c3137;
text-align: center;
padding-top: 25px;
font-size: 14px;
line-height: 28px;
}
.screen-2_phone{
width: 928px;
height: 873px;
background: url(../image/宣传页项目切图/慕课手机_slices/图层\ 133.png)no-repeat center;
position: absolute;
left: 50%;
margin-left: -464px;
bottom: -345px;
z-index: 2;
}
.screen-2_point{
position: absolute;
width: 108px;
height: 22px;
padding-right: 112px;
font-size: 22px;
line-height: 22px;
color: #4D555D;
background: url(../image/宣传页项目切图/慕课手机_slices/icon-point-right.png)no-repeat center right;
}
.screen-2_point_custom_right{
padding: 0 0 0 112px;
background: url(../image/宣传页项目切图/慕课手机_slices/icon-point-left.png)no-repeat center left;
}
.screen-2_point_i_1{
top: 150px;
left:-164px;

}
.screen-2_point_i_2{
right: 130px;
top: 30px;

}
.screen-2_point_i_3{
right: 30px;
top: 330px;
}

/* 第三屏 */
.screen-3{
background: url(../image/宣传页项目切图/慕课手机_slices/矩形9拷贝.png)no-repeat center;
background-size: cover;
background-color: red;
height: 800px;
position: relative;
overflow: hidden;
/* 此处添加overflow可以隐藏手机多出的图画 */

}
.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{
padding: 0;
color: #FFFFFF;
text-align: left;
padding-top: 25px;
font-size: 14px;
line-height: 28px;
}
.screen-3_phone{
width: 800px;
height: 971px;
background: url(../image/宣传页项目切图/慕课手机_slices/图层\ 134.png)no-repeat center;
position: absolute;
right: 0;
bottom: 0px;
top: 195px;
z-index: 2;
}
.screen-3__feartures{
width: 320px;
height: 280px;
position: absolute;
top: 395px;
left: 0;

}
.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{
position: relative;
height: 800px;
overflow: hidden;
background-color: #FFFFFF;
}
.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{
color: #464a4f;
font-size: 14px;
text-align: center;
padding-top: 29px;
line-height: 28px;

}
.screnn-4_type{
width: 1260px;
height: 270px;
position: absolute;
top: 304px;
margin-left: 30px;

}
.screen-4__type__item{
width: 270px;
margin-right: 0;
float: left;
height: 270px;
position: relative;
text-align: center;
background-size: cover;
}
.screen-4__type__item__color{
width: 100%;
height: 14px;
line-height: 14px;
font:14px;
color: #2c3238;
position: absolute;
bottom: -44px;
}
.screen-4__type__item__storage{
color: #a4a9a1;
line-height: 12px;
width: 100%;
height: 12px;
font: 12px;
position: absolute;
bottom: -66px;
}
.screen-4__type__item__i-1{
background: url(../image/宣传页项目切图/慕课手机_slices/01.png)no-repeat left top;
}
.screen-4__type__item__i-2{
background: url(../image/宣传页项目切图/慕课手机_slices/02.png)no-repeat left top;
}
.screen-4__type__item__i-3{
background: url(../image/宣传页项目切图/慕课手机_slices/03.png)no-repeat left top;
}
.screen-4__type__item__i-4{
background: url(../image/宣传页项目切图/慕课手机_slices/04.png)no-repeat left top;
}

/* 第五屏 */
.screen-5{
height: 800px;
position: relative;
overflow: hidden;
background-color: #d9dde1;
}
.screen-5__bg{
width: 1920px;
height: 433px;
background:url(../image/宣传页项目切图/慕课手机_slices/矩形\ 12.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: #f01400;
text-align: center;
padding-top: 130px;
}
.screen-5_subheading{
font-size:14px;
color: #2c3137;
text-align: center;
padding-top: 25px;
line-height: 28px;
}

/* 第六屏 */
.screen-buy{
height: 80px;
background:#2b333b url("../image/宣传页项目切图/慕课手机_slices/图层\ 1381.png") center no-repeat;
position: relative;
text-align: center;
overflow: hidden;
padding: 120px 0;

}
.screen-buy__button{
height: 80px;
width: 240px;
text-align: center;
line-height: 80px;
font-size: 24px;
color: #FFFFFF;
background-color: #f01414;
display: inline-block;
border-radius: 3px;
transition: all.5s;
}
screen-buy__button:hover{
box-shadow: 0px 0px 10px rgba(0,0,0,1);
}

/* 页脚 */
.footer{
height: 80px;
text-align: center;
color: #FFFFFF;
font-size: 12px;
background: #07111b;
line-height: 80px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">

<script src="./js/js.js"></script>
</head>
<body>
<header class="header">
<div class="header_wrap">
<div class="header_logo">慕课手机</div>

<nav class="header_nav">
<a href="#" class="header_nav-item header_nav-item_status_active">首页</a>
<a href="#" class="header_nav-item">型号</a>
<a href="#" class="header_nav-item">说明</a>
<a href="#" class="header_nav-item">其他产品</a>
<a href="#" 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="screen-2_point
screen-2_point_i_1">高清摄像</div>
<div class="screen-2_point screen-2_point_custom_right
screen-2_point_i_2">超薄机身</div>
<div class="screen-2_point screen-2_point_custom_right
screen-2_point_i_3">大屏显示</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_phone"></div>
<div class="screen-3__feartures">
<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 class="screen-4">
<div class="screen-4_wrap">
<h2 class="screen-4_heading">丰富的手机型号</h2>
<h3 class="screen-4_subheading">找到合适您的手机 </h3>

<div class="screnn-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 class="screen-buy__button" href="#">立即购买</a>
</div>


<footer class="footer">© 2016 imooc.com 京ICP备13046642号</footer>
</body>
</html>

豆包侠 2022-03-08

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

收起

1回答

好帮手慕星星 2022-03-08 10:37:09

同学你好，这边测试代码效果没问题

同学代码的图片路径与课程中不一致，导致无法显示图片，所以用课程中图片路径替换掉了同学代码中的图片路径。建议下载源代码，使用课程中图片，看看是不是图片问题导致的。

祝学习愉快！

收起回答

提问者豆包侠 #1

所以老师，这是我自己切图错误了吗....

2022-03-08 10:39:04
提问者豆包侠 #2

的确是切图问题我直接用蓝湖导的尺寸和源代码课件不一致

2022-03-08 10:57:18
好帮手慕星星回复提问者豆包侠 #3

建议自己切图后与课程图片进行比较，一致的时候再使用，或者为了方便直接使用课程图片。

2022-03-08 11:48:25