老师有几个问题
来源：3-2 作业题
小丁同学ddd
2020-04-13 21:20:04
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link type="text/css" rel="stylesheet" href="css/grid.css" />
<link type="text/css" rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/flexible.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<title></title>
<style>
.footer p{
color: black;
line-height: 2rem;
text-align: center;
font-size: 0.45rem;
}
</style>
</head>
<body>
<!--第一区域 #B2C5CC 默认字体颜色：#757575 活跃：#afafaf 按钮背景颜色：rgb(255, 255, 255)-->
<div class="block-one">
<div class="block--one-header">
<div class="row">
<div class="col-12 d-md-none iphone-header">
<p class="phone-text">IMOOC</p>
<div class="nav-btn" id="nav-btn"></div>
</div>
<div class="col-12 d-md-none iphone-nav nav-block" id="phone-nav">
<ul>
<li><a href="#">前端</a></li>
<li><a href="#">java</a></li>
<li><a href="#">ios</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">php</a></li>
</ul>
</div>
<div class="col-12 d-md-block d-sm-none">
<ul class="block-one-nav-ul">
<li class="block-one-nav-item active"><a href="#">前端</a></li>
<li class="block-one-nav-item"><a href="#">java</a></li>
<li class="block-one-nav-item"><a href="#">ios</a></li>
<li class="block-one-nav-item"><a href="#">Android</a></li>
<li class="block-one-nav-item"><a href="#">php</a></li>
</ul>
</div>
</div>
</div>
<div class="block-one-middle">
<div class="block-one-container">
<div class="block-one-container-img">
<img src="img/1.png" />
</div>
<div class="block-one-container-text">IMOOC</div>
<div class="block-one-container-btn">start</div>
</div>
</div>
</div>
<!--第二区域 字体默认颜色：#bababa; 字体活跃颜色：#545454-->
<div class="block-two">
<div class="block-two-nav">
<ul class="block-two-ul">
<li class="block-two-nav-items active"><a>关于慕课网</a></li>
<li class="block-two-nav-items"><a>关于课程</a></li>
<li class="block-two-nav-items"><a>核心团队</a></li>
<li class="block-two-nav-items"><a>新增专题</a></li>
</ul>
</div>
<div class="block-two-text">
<p class="block-two-text-title">响应式</p>
<div class="block-two-text-detail">
<p>应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，
就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个
概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供
更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势
所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很
多的创新，还看到了一些成形的模式。</p>
</div>
</div>
<!--ipad版本-->
<!--第四区域-->
<div class="welcome-block">
<div class="row">
<div class="col-12 d-md-block d-sm-none">
<div class="ipad-welcome">
<p>IMOOC</p>
<p>welcome to www.imooc.com</p>
</div>
</div>
<!--iphone版本-->
<div class="col-12 d-sm-block d-md-none">
<div class="iphone-welcome">
<p>IMOOC</p>
<p>welcome to <span>www.imooc.com</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="block-three">
<!--第五区域-->
<div class="block-three-img">
<p>主打课程</p>
<div class="row">
<div class="image-detail">
<div class="image-items col-md-3 d-md-block d-sm-none"><img src="img/1.jpg" alt="" /></div>
<div class="image-items col-md-3 d-md-block d-sm-none"><img src="img/2.jpg" alt="" /></div>
<div class="image-items col-md-3 d-md-block d-sm-none"><img src="img/3.jpg" alt="" /></div>
<div class="image-items col-md-3 d-md-block d-sm-none"><img src="img/4.jpg" alt="" /></div>
<div class="image-items col-md-3 d-md-block d-sm-none"><img src="img/5.jpg" alt="" /></div>
<div class="image-items col-md-3 d-md-block d-sm-none"><img src="img/6.jpg" alt="" /></div>
</div>
<div class="phone-image-detail">
<div class="phone-image-items col-sm-6 d-md-none"><img src="img/1.jpg" alt="" /></div>
<div class="phone-image-items col-sm-6 d-md-none"><img src="img/2.jpg" alt="" /></div>
<div class="phone-image-items col-sm-6 d-md-none"><img src="img/3.jpg" alt="" /></div>
<div class="phone-image-items col-sm-6 d-md-none"><img src="img/4.jpg" alt="" /></div>
<div class="phone-image-items col-sm-6 d-md-none"><img src="img/5.jpg" alt="" /></div>
<div class="phone-image-items col-sm-6 d-md-none"><img src="img/6.jpg" alt="" /></div>
</div>
</div>
</div>
</div>
<!--第六区域-->
<div class="footer">
<p>Copyright©2017 imooc.com All Rights Reserved</p>
</div>
<script>
var btn = document.getElementById('nav-btn'),
phoneNav = document.getElementById('phone-nav'),
str = 'nav-block';
btn.addEventListener('click',function(){
if (phoneNav.classList.contains(str)){
phoneNav.classList.remove(str);
} else{
phoneNav.classList.add(str);
}
})
</script>
</body>
</html>* {
box-sizing: content-box;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
body {
width: 100%;
height: 100%;
}
.block-one {
width: 100%;
height: 14.5rem;
background-color: #B2C5CC;
}
.block-two{
width: 100%;
height: 12.5rem;
background-color: rgb(255,255,255);
}
.welcome-block{
width: 100%;
}
.block-three{
width: 100%;
background: url(../img/bg.jpg) center center no-repeat;
background-size:100% 100%;
margin-top: 3.5rem;
padding: 1rem;
}
.footer{
background-color: #f1f1f1;
width: 100%;
height: 2rem;
}/*第一部分 ipad端*/
.block--one-header{
width: 100%;
height: 2.5rem;
position: relative;
}
.block-one-nav-ul{
line-height: 2.5rem;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
.block-one-nav-item + .block-one-nav-item{
margin-left: 1rem;
}
.block-one-nav-item a{
font-size: 0.375rem;
color: #757575;
}
.active a{
color: #afafaf;
}
.block-one-middle{
width: 100%;
height: 12.5rem;
padding: 1.25rem 0;
}
.block-one-container{
display: flex;
flex-direction:column;
justify-content:space-between;
align-items: center;
}
.block-one-container-img{
width: 3rem;
height: 3rem;
}
.block-one-container-img img{
width: 3rem;
height: 3rem;
}
.block-one-container-text{
width: 2.5rem;
height: 0.45rem;
color: white;
font-size: 0.45rem;
margin: 1rem 0 2rem 0.77rem;
}
.block-one-container-btn{
width: 3.55rem;
height: 1rem;
background-color: rgb(255, 255, 255);
line-height: 1rem;
text-align: center;
border: none;
font-size: 0.4rem;
}
/*第一部分 iPhone端*/
.iphone-header{
width: 100%;
height: 2rem;
background-color: #7ea6b1;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
position: relative;
}
.phone-text{
font-size: 0.375rem;
line-height: 2rem;
color: white;
text-align: center;
padding-right: 0.625rem;
}
.nav-btn{
width: 0.75rem;
height: 0.75rem;
border: 0.025rem solid lightgray;
background-color: transparent;
position: absolute;
right: 2.5rem;
}
.iphone-nav{
width: 100%;
z-index: 999;
transition: all .5s;
position: absolute;
top: 2rem;
}
.nav-block{
display: none;
}
.iphone-nav ul li{
background-color: #7ea6b1;
width: 100%;
height: 0.8rem;
line-height: 0.2rem; /*为什么会错位???*/
text-align: center;
border-top: 0.025rem solid #FFFFFF;
}
.iphone-nav ul li:first-child{
border-top: none;
}
.iphone-nav ul li a{
color: white;
font-size: 0.35rem;
}
/*第二区域*/
.block-two-nav{
width: 100%;
height: 2.2rem;
border-bottom: 0.025rem solid #bababa;
}
.block-two-ul{
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
.block-two-ul .active a{
color: #545454;
}
.block-two-nav-items a{
color: #bababa;
font-size: 0.35rem;
line-height: 2.2rem;
}
/*第二区域文字*/
.block-two-text{
width: 100%;
height: 10rem;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
margin-bottom: 0.75rem;
}
.block-two-text-detail{
width: 10rem;
height: 6rem;
}
.block-two-text-detail p{
font-size: 0.35rem;
color: #BABABA;
font-size: 0.4rem;
line-height: 0.85rem;
}
.block-two-text-title{
color: #545454;
font-size: 0.5rem;
margin-bottom: 0.55rem;
}
/*第四区域*/
/*ipad版本*/
.ipad-welcome{
width: 100%;
height: 2rem;
background-color: #f4f4f4;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
.ipad-welcome p{
color: #545454;
font-size: 0.375rem;
line-height: 2rem;
}
.ipad-welcome p:nth-child(2){
font-size: 0.35rem;
padding-left: 6rem;
}
/*iphone版本*/
.iphone-welcome{
width: 100%;
height: 3rem;
background-color: #f4f4f4;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.iphone-welcome p{
color: #545454;
font-size: 0.425rem;
}
.iphone-welcome p span{
color: black;
}
.iphone-welcome p:nth-child(1){
font-size: 0.675rem;
padding-bottom: 0.325rem;
}
/*ipad-第五区域*/
.block-three-img p{
font-size: 0.55rem;
color: #757575;
margin-left: 0.5rem;
}
.image-detail{
width:16rem;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
/*.image-detail{
width: 5rem;
height: 4rem;
}*/
.image-detail img{
width: 5rem;
height: 4rem;
}
.image-items{
margin:0.18rem 0;
}
/*iphone-第五区域*/
.phone-image-detail{
width:14.6rem;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.phone-image-detail img{
width: 7rem;
height: 4.5rem;
}
.phone-image-items{
width: 5rem;
margin-left: 0.25rem;
/*margin:0.18rem 0;*/
}为什么右边会多出来？我都设置的宽度100% 然后图片区域就乱套了
还有transition是应该设置height：0才起作用吗 用block没办法起作用？
写回答
1回答
-
好帮手慕慕子
2020-04-14
同学你好， 对于你的问题解答如下：
1、因为设置了宽度百分百之后设置margin和padding会影响元素占据页面的实际位置，所以会导致出现水平滚动条。建议：
统一设置盒子以border-box模式显示。
row需要放在container下，所以需要在使用row的地方添加一个类名为container的元素。
经过上述调整后，就不会出现水平滚动条了，剩下的具体细节样式，同学可以自己再调整下。
2、ipad模式下，图片是一行三列显示，应该是设置col-md-4
调整图片宽度为百分百
iphone模式下，调整图片的样式
3、因为display属性无法过渡，所以使用transiton属性无效，直接对height属性进行过渡实现效果就可以了。
同学完成作业后可以提交作业，批作业的老师会针对同学的完整项目，给出详细的修改建议，并整理成文档发送给同学，方便同学查看与修改，。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题