col-push不生效是什么原因？
来源：3-2 作业题
陈立天
2020-09-02 16:26:37
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Document</title> <link rel="stylesheet" href="./css/grid-flex.css"> <link rel="stylesheet" href="./css/index2.css"> </head> <body> <div class="header"> <div class="container"> <div class="header-miniLink row"> <div class="d-block d-md-none"> <p class="link">immoc</p> </div> <div class="header-btn col-push-10"></div> <div class="header-title d-none d-md-block"> <div class="header-title-item">前端</div> <div class="header-title-item">java</div> <div class="header-title-item">ios</div> <div class="header-title-item">andriod</div> <div class="header-title-item">php</div> </div> </div> </div> </div> <div class="header-nava"> <div class="header-nava-item">前端</div> <div class="header-nava-item">java</div> <div class="header-nava-item">ios</div> <div class="header-nava-item">andriod</div> <div class="header-nava-item">php</div> </div> <div class="div-1"> <img src="./img/1.png" alt="img" class="div-1-img"> <p class="div-1-link-1">Imooc</p> <div class="div-1-btn">start</div> </div> <div class="div-2"> <div class="div-2-item">关于慕课网</div> <div class="div-2-item">关于课程</div> <div class="div-2-item">核心团队</div> <div class="div-2-item">新增专题</div> </div> <div class="div-3"> <p class="div-3-title">响应式</p> <p class="div-3-inner"> 当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文 内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用 户，还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。想创建 一个简单的单页式站点，还是—个专业的公司网站·亦或是一个别具-格的博客? 起飞页可以满足您的所有需求。我们是响应式网站的倡导者，所有前端页面代码均 采用H和LT5和CSS3实现。起飞页提供了海里精美网站模板和成品网站，几乎覆盖了 当今各个行业，您只需在模板上进行少里修改，即可完成自己的网站，这一切都是免费的。</p> </div> <div class="div-4"> <div class="div-4-title"><p>IMMOC</p></div> <div class="div-4-inner"> <span>welcome to</span> <p>www.imooc.com</p> </div> </div> <div class="div-5"> <div class="container"> <div class="row"> <div class="col"> <div class="div-5-title"> <p>主打课程</p> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="div-5-imgItem col-6 col-md-4"><img src="./img/1.jpg" alt=""></div> <div class="div-5-imgItem col-6 col-md-4"><img src="./img/2.jpg" alt=""></div> <div class="div-5-imgItem col-6 col-md-4"><img src="./img/3.jpg" alt=""></div> <div class="div-5-imgItem col-6 col-md-4"><img src="./img/4.jpg" alt=""></div> <div class="div-5-imgItem col-6 col-md-4"><img src="./img/5.jpg" alt=""></div> <div class="div-5-imgItem col-6 col-md-4"><img src="./img/6.jpg" alt=""></div> </div> </div> </div> <div class="div-6"> <p>Copyright© 2017 imooc.com All Rights Reserve</p> </div> </body> </html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header{
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #7ea6ae;
color: #757575;
}
.div-1{
flex-direction: column;
background-color: #B2C5CC;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
}
.div-1-img{
width: 100px;
height: 100px;
}
.div-1-link-1{
margin-top:5px;
color: #757575;
}
.div-1-btn{
margin-top: 20px;
width: 90px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: rgb(255, 255, 255);
font-size: 14px;
}
.div-2{
width: 100%;
height: 50px;
display: flex;
border-bottom: 1px solid gray;
justify-content: center;
align-items: center;
}
.div-2-item{
flex: 1;
text-align: center;
font-size: 12px;
}
.div-3{
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
margin-bottom: 40px;
}
.div-3-title{
margin: 40px 0 20px 0;
}
.div-3-inner{
font-size: 12px;
width: 50%;
color: rgb(175, 175, 175);
}
.div-4{
display: flex;
flex-direction: column;
align-items: center;
background-color:rgb(231, 231, 231);
height: 80px;
justify-content: center;
}
.div-4-title{
color: gray;
font-size: 16px;
}
.div-4-inner{
display: flex;
height: 20px;
line-height: 20px;
font-size: 12px;
margin-top: 10px;
}
.div-4-inner span{
color: gray;
margin-right: 10px;
}
img{
width: 100%;
height: 100%;
}
.div-5{
padding-top: 40px;
background: url(../img/bg.jpg);
}
.div-5-imgItem{
margin-bottom: 20px;
}
.div-6{
height: 20px;
background-color:rgb(231, 231, 231);
font-size: 12px;
text-align: center;
line-height: 20px;
}
.div-5-title{
margin-bottom: 10px;
}
.header-title{
display: flex;
width: 100%;
}
.header-title-item{
width: 12%;
display: inline-block;
}
.header-btn{
width: 15px;
height: 15px;
border: 1px solid rgb(228, 225, 225);
}
.header-miniLink{
display: flex;
justify-content: center;
align-items: center;
}
.header-btn{
/* display: flex; */
/* position: absolute; */
right: 20px;
align-items: center;
justify-content: center;
}
.header-nava{
}
.header-nava-item{
font-size: 12px;
text-align: center;
line-height: 30px;
height: 30px;
width: 100%;
background-color: #7ea6ae;
border-bottom: 1px solid rgb(216, 216, 216);
color: white;
}
写回答
2回答
-
好帮手慕粉
2020-09-02
同学你好，关于同学的问题回答如下：
1、因为同学引入的grid-flex.css文件中并没有设置push，所以写样式是没有用的。建议同学引用课程里面的grid.css文件，里面对push进行了设置：
引入这个文件：
给小图标添加定位（因为push是结合定位实现的，同学忘记了可以回顾视频）：
2、在ipad pro上时，由于这个型号的宽高较大，背景图片不能完全铺满：
可以设置下背景图片：
3、同学如果有新的问题，建议同学新建一个问答进行提问。既便于同学后期的复习与整体，老师也能更快的看到同学的问题。另外，同学如果作业写完了，可以提交作业哦，批复作业的老师会给出详细的批复文档呢。
如果我的回答帮助了你，欢迎采纳。祝学习愉快~
0 -
陈立天
提问者
2020-09-02
还有一个问题就是 我写的这个代码 iphone678 和ipad都适配 但是换到ipad pro 这里就这样了 是什么原因 要怎么解决这个留白问题
0
相似问题