体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

我的立即购买按钮和老师的不一样

来源：3-11 静态页面第五屏以及后续

weixin_慕仔2495609

2019-07-17 17:12:29

<!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/style.css">
</head>
<body>
	<div class="box">
		<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 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__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 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">16G/32G/64G</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">16G/32G/64G</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">16G/32G/64G</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">16G/32G/64G</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">
			© 2016 imooc.com 京ICP备13046642号
		</footer>
	</div>
</body>
</html>
*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
}
h2,h3{
	font-weight: normal;
}
/*
BEM设计模式

模块（没有前缀   多个单词  —— 连接）
元素（元素在模块之后，可以有多个层级，用 __ 连接）
修饰（某元素、或者某模块特别的状态，必须有一个状态名和状态值，使用 _ 连接）
*/
.header{
	height: 80px;
	background-color: #f7f7f7;

}
.header__wrap{
	width: 1200px;
	height: 80px;
	margin: 0 auto;
	position: relative;
}
.header__logo{
	width: 150px;
	height: 38px;
	line-height: 38px;
	font-size: 20px;
	color: #07111b;
	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;

}

.header__nav{
	position: absolute;
	right: 20px;
	top:50%;
	margin-top: -19px;
	height: 38px;

}
.header__nav-item{
	color: #292f35;
	font-size: 14px;
	display: block;
	height: 38px;
	line-height: 38px;
	float: left;
	margin-left: 40px;
	position: relative;
}
.header__nav-item:hover{
	color: #f01400;

}
.header__nav-item_status_active{
	color: #f01400;
}
.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: #000;
	color: #f4f4f5;
	text-align: center;
	width: 90px;
	border-radius: 3px;
}

/*第一屏*/
.screen-1{
	height: 800px;
	background: url(../img/bg-screen-1.png) no-repeat center;
	background-size: cover;  /*使背景图片铺满*/
	position: relative;
	overflow: hidden;

}
.screen-1__heading{
	font-weight: normal;
	font-size: 46px;
	color: #4d555d;
	text-align: center;
	padding-top: 152px;
}
.screen-1__heading b{
	color: #f01400;
	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: .8;
}
/*第二屏*/
.screen-2{
	background-color: #fafafa;
	height: 800px;
	position: relative;
	overflow: hidden;

}
.screen-2__heading{

	font-size: 46px;
	line-height: 46px;
	color: #f01400;
	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: -464px;
	bottom: -345px;
	z-index: 2;
}
.screen-2__point{
	width: 108px;
	height: 22px;
	padding-right: 112px;
	font-size: 22px;
	line-height: 22px;
	color: #4d555d;
	background: url(../img/icon-point-right.png) no-repeat center right;
	position: absolute;

}
.screen-2__point_custom_right{
	padding: 0 0 0 112px;
	background: url(../img/icon-point-left.png) no-repeat center left;
}

.screen-2__point_i-1{
	top: 150px;
	left: -164px;
}
.screen-2__point_i-2{
	top: 30px;
	right: 130px;
}
.screen-2__point_i-3{
	top: 330px;
	right: 30px;
}
/*第三屏*/
.screen-3{
	background: url(../img/bg-screen-3.png) no-repeat center;
	background-size: cover;  /*使背景图片铺满*/
	height: 800px;
	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: #fff;
	text-align: left;
	padding-top: 94px;
}
.screen-3__subheading{
	
	font-size: 14px;
	color: #fff;
	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{
	width: 320px;
	height: 280px;
	position: absolute;
	top: 395px;
	left: 0;
}
.screen-3__features__item{
	width: 138px;
	height: 118px;
	border: 1px #cb7173 solid;
	margin: 0 20px 20px 0;
	float: left;
	border-radius: 3px;
	color: #fff;
	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: #fff;
	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;
	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_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__color{
	width:100%;
	height: 14px;
	line-height: 14px;
	font-size: 14px;
	color: #2c3238;
	position: absolute;
	bottom: -44px;

}
.screen-4__type__item__storage{
	width:100%;
	height: 12px;
	line-height: 12px;
	font-size: 12px;
	color: #a4a9a1;
	position: absolute;
	bottom: -66px;
}

/*第五屏*/
.screen-5{
	background-color: #d9dde1;
	height: 800px;
	position: relative;
	overflow: hidden;
}
.screen-5__bg{
	width: 1920px;
	/*height: 433px;*/
	height: 572px;/*老师用的是在psd上测量的高度433，但是这个背景图片没有完全展示，我认为应该为图片的高度527px,然后在父元素设置overfl：hidden.吧。*/
	background: url("../img/bg-screen-5.png") center no-repeat;
	background-size: contain;
	position: absolute;
	left: 50%;
	margin-left: -960px;
	bottom: -198px
}
.screen-5__heading{
	font-size: 46px;
	line-height: 46px;
	color: #f01400;
	text-align: center;
	padding-top: 133px;
}
.screen-5__subheading{
	
	font-size: 14px;
	color: #464a4f;
	text-align: center;
	padding-top: 29px;
	line-height: 28px;
}

/*立即购买*/
.screen-buy{
	background: #2b333b url("../img/bg-screen-buy.png") center no-repeat;
	height: 80px;
	padding: 120px 0;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.screen-buy__button{
	height: 80px;
	width: 240px;
	line-height: 80px;
	font-size: 24px;
	color: #fff;
	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,.5);
}


/*第七屏*/
.footer{
	background-color: #07111b;
	height: 80px;
	line-height: 80px;
	color:#fff;
	font-size: 12px;
	text-align: center;
}


写回答

3回答

好帮手慕慕子

2019-07-18

已采纳

同学你好， 请问你是使用chrome浏览器测试的吗？如果这样的话， 那么是由于浏览器自身解析的原因，导致的这种效果， 建议： 可以使用firefox浏览器测试一下，设置all，就不会出现文字过渡的效果。

如果同学想要在chrome浏览器使用的话， 建议： 可以参考上次的回答，只给box-shadow属性设置过度效果

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~~


0
heixin_慕仔2495609
h 好的，谢谢老师
h019-07-18
共1条回复

好帮手慕慕子

2019-07-17

同学你好， 因为你给所有属性设置0.5s的过渡效果， 所以文字有一个从下变大的过渡效果。建议修改： 可以只给阴影属性设置过渡效果

http://img.mukewang.com/climg/5d2efef90001240904300388.jpg

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~~

0
heixin_慕仔2495609
h 可是老师也是设置的all，为什么没有出现文字的过渡呢？
h019-07-18
共1条回复

好帮手慕慕子

2019-07-17

同学你好， 请问同学可以是指第五屏的“立即购买”按钮吗， 如果是指这里的话， 那么老师测试了你的代码， 是没有问题。

因为这个阴影的效果不是很明显，可以换一个鲜明的颜色测试一下， 同学的代码的是对的哦

http://img.mukewang.com/climg/5d2ef9a900019d8706530167.jpg

效果图：

http://img.mukewang.com/climg/5d2ef9b70001261503560166.jpg

如果不是指这里的话， 建议： 可以详细的描述一下指的是哪里，再次提问， 我们会继续为你解答的

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~

0
heixin_慕仔2495609
h 不是阴影效果，是这里面的字，刷新页面的时候它是从里向外闪出来的。我没有做动画效果啊，看老师的也没有动画效果
h019-07-17
共1条回复

0 学习 · 40143 问题

查看课程

相似问题

老师我的首页2个字的下划线没有显示，还有立即购买的框怎么会显示成这样？

回答 1

一样的代码，视频在4：42。header是排成一行的。我输出来的排成两行，这是什么原因呢？

回答 2

老师你这个点击立即购买说明会变成红色这个怎么解决

回答 1

老师，大纲和双向导航这块没太懂。

回答 3

为什么不直接设置button呢

回答 1

打开慕课网App查看更多内容