7-2问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>响应式</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<header>
<ul>
<a href="#"><li class="liactive">前端</li></a>
<a href="#"><li class="">java</li></a>
<a href="#"><li class="">ios</li></a>
<a href="#"><li class="">Android</li></a>
<a href="#"><li class="">php</li></a>
</ul>
<div class="content">
<img src="img/1.png" alt="flower">
<p>IMOOC</p>
<button type="button">start</button>
</div>
</header>
<section class="bottom1">
<a href="#">关于慕课网</a>
<a href="#">关于课程</a>
<a href="#">核心团队</a>
<a href="#">新增专题</a>
</section>
<hr/>
<article>
<h1>响应式</h1>
<p>
当今最领先的响应式自助建站平台，我们的流线式网页布局方案和可视化图文内容编辑模式能让网站制作和维护
成为一件轻松惬意的事情。无论您是普通互联网用户还是专业的网站制作人员，都能使用起飞网页制作出最具专业水准的网站。想创建一个简单的单一式站点，还是一个公司的网站，亦或是另一个别具一格的博客？起飞页可以满足您的所有需求。我们是响应式网站的倡导者，所有前端页面均采用HTML5和CSS3实现。起飞页提供了海量精美网站模板和成品网站，几乎覆盖了当今各个行业，您只需在模板上进行少量修改，即可完成自己的网站，这一切都是免费的。
</p>
</article>
<section class="bottom2">
<span class="imooc">IMOOC</span>
<a href="#"><span>welcome to</span> www.imooc.com</a>
</section>
<div class="pic">
<p>主打课程</p>
<div class="in_pic">
<img src="img/1.jpg" alt="1">
<img src="img/2.jpg" alt="2">
<img src="img/3.jpg" alt="3">
<img src="img/4.jpg" alt="4">
<img src="img/5.jpg" alt="5">
<img src="img/6.jpg" alt="6">
</div>
</div>
<footer>
Copyright &copy; 2017 imooc.com All Rights Reserved
</footer>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}
header{
	width: 100%;
	height: 650px;
	overflow: hidden;
	background-color: #B2C5CC;
}
header ul{
	margin-top: 50px;
	list-style: none;
	display: -webkit-box;
	-webkit-box-pack: center;
}
header ul a{
	text-decoration: none;
	display: -webkit-box;
	-webkit-box-pack: center;
}
header ul li{
	padding: 0 45px;
	color: #757575;
	-webkit-transition: all 2s ease-out 0s;
	display: -webkit-box;
	-webkit-box-pack: center;
}
header ul li:hover{
	color: #afafaf;
}
.liactive{
	color: #afafaf;
}
header .content{
	width: 400px;
	height: 400px;
	margin: 0 auto;
}
header .content img{
	display: block;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
}
header .content p{
	text-align: center;
	color: #ffffff;
	margin-top: 30px;
}
header .content button{
	display: block;
	margin: 70px auto;
	width: 150px;
	height: 45px;
	color: black;
	border: none;
	-webkit-transition: all 2s ease-out 0s;
}
header .content button:hover{
	cursor: pointer;
	background-color: rgb(255, 255, 255);
}

.bottom1{
	width: 100%;
	height: 70px;
	line-height: 70px;
	display: -webkit-box;
	-webkit-box-pack: center;
}
.bottom1 a{
	display: inline-block;
	padding: 0 50px;
	text-decoration: none;
	color: #bababa;
	font-size: 17px;
}
.bottom1 a:hover{
	color: #545454;
}

article{
	overflow: hidden;
	padding-bottom: 100px;
}
article h1{
	margin-top: 150px;
	margin-bottom: 40px;
	text-align: center;
	color: gray;
	font-size: 28px;
}
article p{
	margin: auto;
	width: 500px;
	height: 200px;
	line-height: 30px;
	color: #bababa;
	font-size: 13px;
}
.bottom2{
	width: 100%;
	height: 80px;
	line-height: 80px;
	background-color: #f4f4f4;
}	
.bottom2 span,a{
	display: inline-block;
}
.bottom2 .imooc{
	color: gray;
	font-size: 22px;
	margin-left: 100px;
}
.bottom2 a{
	text-decoration: none;
	float: right;
	color: black;
	margin-right: 100px;
}
.bottom2 a span{
	color: gray;
}

.pic{
	width: 100%;
	background: url(../img/bg.jpg) no-repeat center center;
	background-size: 100% 100%;
}
.pic p{
	margin: 20px;
	margin-left:100px;
	margin-bottom: 10px;
}
.pic .in_pic{
	width: 90%;
	height: 500px;
	margin: 0 auto;
}
.pic .in_pic img{
	display: inline-block;
	margin: 5px 5px;
	width: 26%;
	height: 40%;
	transition: all 1s ease 0s;
}
.pic .in_pic img:hover{
	transform: scale(1.5);
}
.pic .in_pic img:nth-child(1){
	margin-left: 62px;
}
.pic .in_pic img:nth-child(4){
	margin-left: 62px;
}

footer{
	width: 100%;
	height: 80px;
	text-align: center;
	line-height: 80px;
	background-color: #f4f4f4;
	font-weight: bold;
}



@media screen and (max-width:375px) {
	header ul{
		list-style: none;
		width: 100%;
		text-align: center;
		background-color: #7ea6b1;
		display: block;
	}
	header ul a{
		display: block;
	}
}

老师，为什么我切换到iphone6下面的时候CSS样式不起作用呢

qq_一个人一個人_0 2018-09-06

源自：项目：移动端课程列表页 7-2 作业题