老师请教个问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<style type="text/css">
/* 通用样式 */
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html{
font-size: 100px;
}
body{
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;
font-size: 14px;
}
/* 第一区域 */
header{
width: 100%;
background: #B2C5CC;
display: flex;
flex-direction: column;
align-items: center;
}
header div{
display: none;
}
.nav{
font-size: 12px;
color: #757575;
display: flex;
margin: 20px auto 0 auto;
align-items: baseline;
width: 4rem;
justify-content: space-between;
}
.nav li:first-child{
color: #afafaf;
}
img{
display: block;
margin: 50px 0 20px 0;
}
header span{
margin-bottom: 30px;
color: #f4fcff;
}
header input{
width: 140px;
height: 36px;
text-align: center;
line-height: 36px;
margin-bottom: 100px;
background: #fff;
border: none;
box-shadow: 0 0 1px gray;
}
/* 第二区域 */
.second-area ul{
width: 100%;
border-bottom: 1px solid #cccccc;
display: flex;
flex: 1 0;
justify-content: space-between;
}
.second-area ul li{
margin: 15px auto;
color: #bababa;
}
.second-area ul li:first-child{
color: #545454;
}
/* 第三区域 */
.third-area{
width: 100%;
height: 248px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.third-area h3{
margin-bottom: 20px;
color: #616b6d;
}
.third-area p{
width: 45%;
color: #adadad;
}
/* 第四区域 */
.fourth-area ul{
background: #f4f4f4;
width: 100%;
border-bottom: 1px solid #cccccc;
display: flex;
flex: 1 0;
justify-content: space-between;
align-items: center;
}
.fourth-area ul li{
margin: 15px 40px;
color: #bababa;
}
.fourth-area ul li:first-child{
font-size: 18px;
margin: 15px 40px;
color: #6a6a6a;
}
.fourth-area ul li:last-child a{
color: black;
}
/* 第五区域 */
.five-area{
background: url(素材/bg.jpg);
padding: 40px 20px;
}
.five-area ul{
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-between;
}
.five-area ul li {
width: 30%;
height: auto;
display: flex;
}
.five-area ul li img{
width: 100%;
height: 145px;
margin: 10px 0;
}
/* 页脚 */
footer{
color: black;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 18px 0;
}
/* iphone6以下响应式 */
@media screen and (max-width: 380px) {
header{
width: 100%;
background: #B2C5CC;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
header div{
padding: 10px 0;
width: 100%;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.2);
position: relative;
background:#7EA6B1;
display: flex;
align-items: center;
justify-content: center;
}
header div p{
margin: 0 auto;
font-size: 16px;
}
header div input{
width: 15px;
height: 15px;
background: #7EA6B1;
border: 1.5px solid #afc9d6;
position: absolute;
right: 20px;
}
.nav{
font-size: 12px;
color: #fff;
display: flex;
flex-direction: column;
background:#7EA6B1;
margin: 0 auto 0 auto;
align-items: center;
width: 100%;
justify-content: space-between;
position: absolute;
top: 40px;
-webkit-animation: switchColor 1s;
}
.nav li:first-child{
color: #fff;
}
.nav li{
width: 100%;
font-size: 12px;
padding: 4px 0;
border-bottom: 1px solid rgba(255,255,255,0.6);
text-align: center;
color: #fff;
}
.hide{
display: none;
}
.slide{
-webkit-animation: slide 1s;
font-size: 12px;
color: #fff;
display: flex;
flex-direction: column;
background:#7EA6B1;
margin: 0 auto 0 auto;
align-items: center;
width: 100%;
justify-content: space-between;
position: absolute;
top: -200px;
}
img{
display: block;
width: 22%;
margin: 30px 0 20px 0;
}
header span{
margin-bottom: 20px;
font-size: 10px;
color: #f4fcff;
}
header input{
width: 110px;
height: 30px;
text-align: center;
line-height: 30px;
margin-bottom: 100px;
background: #fff;
border: none;
box-shadow: 0 0 1px gray;
}
/* 第二阶段 */
.second-area ul{
font-size: 10px;
width: 100%;
border-bottom: 1px solid #cccccc;
display: flex;
flex: 1 0;
justify-content: space-between;
}
.second-area ul li{
margin: 15px auto;
color: #bababa;
}
.second-area ul li:first-child{
color: #545454;
}
/* 第三区域 */
.third-area{
width: 100%;
font-size: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px auto;
}
.third-area h3{
margin-bottom: 20px;
color: #616b6d;
}
.third-area p{
width: 50%;
color: #adadad;
}
/* 第四区域 */
.fourth-area ul{
background: #f4f4f4;
width: 100%;
border-bottom: 1px solid #cccccc;
display: flex;
flex-direction: column;
flex: 1 0;
justify-content: center;
align-items: space-around;
}
.fourth-area ul li{
margin: 0px 40px 10px 40px;
color: #bababa;
}
.fourth-area ul li:first-child{
font-size: 18px;
margin: 10px 40px 10px 40px;
color: #bababa;
}
.fourth-area ul li:last-child a{
color: black;
}
/* 第五区域 */
.five-area{
background: url(素材/bg.jpg);
padding: 40px 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.five-area ul{
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-between;
}
.five-area ul li {
width: 48%;
height: auto;
display: flex;
}
.five-area ul li img{
width: 100%;
height: 90px;
margin: 10px 0;
}
/* 页脚 */
footer{
font-size: 8px;
color: black;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 18px 0;
}
@keyframes switchColor{
0% {top: -200px}
100%{top: 40px}
}
@keyframes slide{
0% {top: 40px}
100%{top: -200px}
}
}
/* 第二阶段 */
</style>
<title>7-2作业</title>
</head>
<body>
<div id="web-page">
<header class="first-area">
<div id="top" style="z-index: 2">
<p>imooc</p>
<input type="button" name="" class="btn">
</div>
<ul class="nav hide" style="z-index: 1">
<li>前端</li>
<li>JAVA</li>
<li>IOS</li>
<li>Android</li>
<li>PHP</li>
</ul>
<img src="素材/1.png">
<span>IMOOC</span>
<input type="button" name="" value="start">
</header>
<div class="second-area">
<ul>
<li>关于慕课网</li>
<li>关于课程</li>
<li>核心团队</li>
<li>新增专题</li>
</ul>
</div>
<article class="third-area">
<h3>响应式</h3>
<p>响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式</p>
</article>
<div class="fourth-area">
<ul>
<li>IMOOC</li>
<li>welcome to <a href="#">www.imooc.com</a></li>
</ul>
</div>
<div class="five-area">
<p>主打课程</p>
<ul>
<li><img src="素材/1.jpg" alt=""></li>
<li><img src="素材/2.jpg" alt=""></li>
<li><img src="素材/3.jpg" alt=""></li>
<li><img src="素材/4.jpg" alt=""></li>
<li><img src="素材/5.jpg" alt=""></li>
<li><img src="素材/6.jpg" alt=""></li>
</ul>
</div>
<footer>copyright©2017 imooc.com All Rights Reserved</footer>
</div>
<script>
var hedTop = document.getElementById('top'),
btnOO = hedTop.getElementsByClassName('btn')[0],
hide = document.getElementsByClassName('hide')[0];
btnOO.onclick = function(){
if (hide.className==="nav hide") {
hide.className = "nav"
}else if(hide.className === "nav"){
hide.className = "slide"
}else if(hide.className === "slide"){
hide.className = "nav"
}
}
</script>
</body>
</html>老师我在IPHONE6点击两次按钮以后再切换到ipad下，因为JS原因替换了类，所以样式改变了，这种情况允许吗？
0
收起
正在回答
2回答
同学，你好。
我们做网站不能不让交互和切换啊，是要做响应式的操作。所以只要能影响到布局的都不可以。现在还没有掌握好布局技巧，还没有真正掌握布局的核心，如果做过多的拓展可能会影响你基础布局的学习。建议你先掌握课程中老师讲解的方式哦。
如果帮助到了你，欢迎采纳！
相似问题
登录后可查看更多问答，登录/注册
响应式开发与常用框架 2018
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星