老师我已经全部写完了ipad端的效果后面我不知道该怎么处理了麻烦老师给个思路吧

首页课程实战体系课手记专栏慕课教程

来源：3-2 作业题

小丸子不吃丸子

2020-12-05 14:13:03

# 具体遇到的问题
具体css该怎么设置？尽量别用栅格系统吧我感觉好混乱

iphone6端 1 4 5区域换了该怎么写能不能给个思路和例子谢谢！！

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css\index.css">
    <link rel="stylesheet" href="css\base.css">
</head>
<body>
   <div class="header">
       <div class="header-nav">
           <div class="header-nav-container">
                <ul class="header-nav-col">
                   <li class="header-nav-item ">
                        <a href="###" class="header-nav-link header-nav-active">前端</a>
                   </li>
                   <li class="header-nav-item">
                        <a href="###" class="header-nav-link">java</a>
                   </li>
                   <li class="header-nav-item">
                        <a href="###" class="header-nav-link">ios</a>
                    </li>
                   <li class="header-nav-item">
                        <a href="###" class="header-nav-link">andriod</a>
                    </li>
                   <li class="header-nav-item">
                        <a href="###" class="header-nav-link">php</a>
                   </li>
               </ul>
            </div>
       </div>
       <div class="bannar">
           <div class="bannar-logo-container">
                <img class="bannar-logo"src="img\1.png">
           </div>
           <div class="bannar-font">IMOOC</div>
           <button class="bannar-button" id="bannar-button">start</button>
       </div>
    </div>
   <div class="nav-container">

            <ul class="main-nav">
                <li class="main-nav-item">
                    <a href="###" class="main-nav-link">关于慕课网</a>
                </li>
                <li class="main-nav-item">
                    <a href="###" class="main-nav-link">关于课程</a>
                </li>
                <li class="main-nav-item">
                    <a href="###" class="main-nav-link">核心团队</a>
                </li>
                <li class="main-nav-item">
                    <a href="###" class="main-nav-link">新增专题</a>
                </li>
            </ul>

   </div>
   <hr>
   <div class="intrContainer">
        <h3 class="intrContainer-title">响应式</h3>
        <div class="intrContainer-content">
            <div class="intrContainer-content">介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。如：width会有min-width和max-width媒介查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。</div>
        </div>
   </div>
   <div class="address-container">
      <p class="address-container">    imooc</p>
      <p class="address">welcome to www.imooc.com   </p>
   </div>
   <div class="class-container">
       <div class="class-container-title">主打课程</div>
       <div class="photo-container">
            <div class="photo-item">
                <a href="###" class="photo-item-link">
                    <img src="img\1.jpg"class="photo">
                </a>
            </div>
            <div class="photo-item">
                <a href="###" class="photo-item-link">
                    <img src="img\2.jpg"class="photo">
                </a>
            </div>
            <div class="photo-item">
                <a href="###" class="photo-item-link">
                    <img src="img\3.jpg"class="photo">
                </a>
            </div>
            <div class="photo-item">
                <a href="###" class="photo-item-link">
                    <img src="img\4.jpg"class="photo">
                </a>
            </div>
            <div class="photo-item">
                <a href="###" class="photo-item-link">
                    <img src="img\5.jpg"class="photo">
                </a>
            </div>
            <div class="photo-item">
                <a href="###" class="photo-item-link">
                    <img src="img\6.jpg"class="photo">
                </a>
            </div>

       </div>
   </div>
   <div class="footer-container">
       <p class="footer">Copy©2017 imooc.com All Rights Reserved</p>
   </div>

</body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示

index.css
/* header */

.header{
    height:300px;
}
.header-nav{
    height: 30px;
    width:100%;
    background-color: #b2c5cc;
    border:none;
}
.header-nav-container{
    margin:0 auto;
    height:100%;
    display: flex;
    justify-content:center;
    border:none;
}
.header-nav-col{
    height:100%;
    width:500px;
    display: flex;
    justify-content:space-around;
    align-items: center;
    font-size: 14px;
}

.header-nav-item{
    height:100%;
    margin-left: 14px;
}
.header-nav-item:first-child {
    margin-left: 0;

}
.header-nav-active{
    color:blue;
}
.header-nav-link{
    height:100%;
    display: flex;
    align-items: center;
}
.bannar{
    background-color: #b2c5cc;
    height:270px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top:-1px;
}
.bannar-logo-container{
    width:60px;
    height: 60px;
    margin-bottom:15px;

}
.bannar-font{
    color:#fff;
    margin-bottom:15px;
    font-weight: bold;
}
.bannar-button{
    border:none;
    width:100px;
    height:30px;

}
/* nav-container */
.nav-container{
    height:30px;
    width:100%;

}
.main-nav,
.main-nav-item,
.main-nav-link{
    height:30px;
}
.main-nav-link{
    display:block;
    text-align: center;
    line-height:30px;
}
.main-nav{
    display:flex;
    justify-content: space-around;
    align-items: center;
}
.main-nav-link{
    align-items: center;
}
.intrContainer{
    height:300px;

    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.intrContainer-content{
    width:300px;
    margin-top:10px;
}
.address-container{
    display:block;
    height:30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f4f4f4;
}

.class-container{
    height:400px;
}
.class-container-title{
    padding:40px 25px 0 25px;

}
.photo-container{
    padding:10px 20px;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;

}
.photo-item{
    width:220px;
    height:140px;

}
.photo-item-link{
    display:block;
    width:220px;
    height:140px;
}
.photo{
    width:230px;
    height:120px;
    background-size:cover;
    background-attachment: fixed;
}
.footer-container{
    height:30px;
}
.footer{
    font-size:14px;
    text-align: center;
    line-height: 30px;
}

base.css
*{
    padding: 0;
    margin:0;
    box-sizing: border-box;
}
body {
    font-size: 14px;
}
li {
    list-style: none;
}
a {
    font-size: 14px;
    color: #363636;
    text-decoration: none;
}
a:hover {
    color: #1428a0;
}
img {
    vertical-align: top;
    width: 100%;
    border: none;
}

写回答

1回答

好帮手慕慕子

2020-12-05

已采纳

同学你好，可以使用媒体查询@media实现效果。老师这里给同学提供一个简单的思路，如下：

1、先书写好iphone6下顶部导航的结构和样式，要实现的效果如下图所示：

html结构示例：

css样式示例：

设置媒体查询，调整iphone6下要改变的样式

接下来设置iphone6下的样式都是在媒体查询@media下的

修改header-wrap的display属性，让其显示出来

调整下拉菜单的样式，ipad型号下的导航需要隐藏，所以可以设置header-nav-col为绝对定位，然后设置高度为0，结合overflow:hidden;实现超出隐藏，方便后面实现点击按钮的时候，显示下拉菜单的效果

注意：可以通过js实现，在iphone6型号下，点击按钮时，改变header-nav-col的高度为150px,让下拉列表慢慢显示出来，再次点击时，改变高度为0，让内容隐藏起来。

2、调整第四区域的样式，修改弹性布局的方向，实现上下两行排列

3、调整第五区域的样式

经过上述调整后实现的样式如下：

完成的代码如下：

/* 给顶部添加相对定位 */
.header-nav-container {
  position: relative;
}
/* 设置样式 */
.header-wrap {
  /* 默认隐藏 */
  display: none;
  flex: 1;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #7ea6b1;
}
.header-wrap .btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 20px;
  height: 20px;
  border: 1px solid #eee;
}
.header-wrap h1 {
  font-size: 16px;
  color: #fff;
}
/* iphone6型号下 */
@media (max-width: 375px) {
  /* 在这里设置iphone6下的样式 */
  /* 顶部显示出来 */
  .header-wrap {
    display: block;
  }
  /* ipad型号下的导航需要隐藏，可以设置为绝对定位，通过设置高度为0，超出隐藏，方便实现点击按钮的时候，显示下拉菜单的效果 */
  .header-nav-col {
    position: absolute;
    width: 100%;
    top: 50px;
    left: 0;
    height: 0;
    overflow: hidden;
    /* 可以通过js实现，在iphone6型号下，点击按钮时，改变header-nav-col的高度为150px,让下拉列表慢慢显示出来 */
    /* height: 150px; */
    background: #fff;
    display: block;
    transition: height 1s;
  }
  .header-nav-col li {
    height: 30px;
    line-height: 30px;
    margin-left: 0;
    text-align: center;
  }
  .header-nav-link {
    justify-content: center;
    border-bottom: 1px solid #eee;
  }
  /* 调整第四区域的样式 */
  .address-container {
    flex-direction: column;
    height: auto;
    padding: 10px 0;
  }
  /* 调整第五区域的样式 */
  /* 去掉外层的高度，让其由内容撑开高度 */
  .class-container {
    height: auto;
  }
  /* 调整每个宽度，实现一行排列两个的效果 */
  .photo-item {
    width: 50%;
    /* 通过padding属性调整空白间距 */
    padding: 0 10px;
    /* 高度设置为auto,让其由内容撑开高度 */
    height: auto;
  }
  /* 调整图片和他的父元素宽度为百分百 */
  .photo-item-link,
  .photo {
    width: 100%;
  }
}

老师给出的只是一种参考的实现方式，同学可以结合代码测试理解下，具体的细节样式同学自己再调整下，作业完成后，可以提交作业，批作业的老师会针对同学整个作业，给出详细的修改建议，并整理成文档，发送给同学，便于同学查看与修改。

祝学习愉快~

0 学习 · 6815 问题

查看课程

相似问题

我试了一个示例的代码可是报了一堆错，不知道该改什么了

回答 5

老师不知道为什么我写代码的时候代码会自动往上移动

回答 5

你好，老师，请教一个接口的问题

回答 2

老师这个我是这么布局的 iphone6下这头部点击有效果的我写不出来不知道怎么写

回答 5

为什么我的没有效果？

回答 2

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