7-2作业问题

来源：7-1 items区域的布局

Afflatus扶苏

2017-08-25 22:08:40

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="wrapper">
    <header class="hd">
        <nav>
            <a href="">前端</a>
            <a href="">java</a>
            <a href="">ios</a>
            <a href="">Android</a>
            <a href="">php</a>
        </nav>
        <img src="img/1.png">
        <div>IMOOC</div>
        <div class="start">
            <button>start</button>
        </div>
            
    </header>
    <section class="about">
            <a href="">关于慕课网</a>
            <a href="">关于课程</a>
            <a href="">核心团队</a>
            <a href="">新增专题</a>
    </section>
    <article>
        <p>响应式</p>
        <div>响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
        我们在上面了解了什么是响应式布局，那在我们的实际项目中应该怎么去设计呢？在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰，还要来个不同尺寸设备，我们该怎么淡定下来呢？有需求就会有解决方案，说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询），这可是个好东西，易用、强大、快捷……</div>
    </article>
    <section class="welcome">
        <span class="span1">IMOOC</span>
        <span class="span2">welcome to <a href="">www.imooc.com</a></span>
    </section>
    <section class="lesson">
        <p>
            主打课程
        </p>
        <div>
            <img src="img/1.jpg">
            <img src="img/2.jpg">
            <img src="img/3.jpg">
            <img src="img/4.jpg">
            <img src="img/5.jpg">
            <img src="img/6.jpg">
        </div>
    </section>
    <footer>Copyright © 2017 imooc.com All Rights Reserved</footer>
</div>
</body>
</html>


CSS文档
*{
    margin:0;
    padding:0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.wrapper{
    width:768px;
    margin:0 auto;
}
.hd{
    width:100%;
    height:550px;
    background: #B2C5CC;
}
nav{
    width:100%;
    height:50px;
    display: flex;
    justify-content: center;
    
}
nav a{
    display: inline-block;
    width:80px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #757575 ;
    font-size: 13px;
}
nav a:hover{
    color:#afafaf;
}
.hd img{
    display: block;
    width:100px;
    height:100px;
    margin:0 auto;
    margin-top:80px;
    margin-bottom: 20px;
}
.hd div{
    width:100%;
    height:40px;
    color:#fff;
    font-size: 18px;
    line-height: 40px;
    text-align: center;

}
.start{
    width:100%;
    height:100px;
}
.hd button{
    width:140px;
    height:40px;
    border:none; 
    background: #fff;
    margin:0 auto;
    margin-top:50px;
    cursor: pointer;
}
.hd button:hover{
    background: -webkit-linear-gradient(#fff,rgb(255, 255, 255));
    background:    -moz-linear-gradient(#fff,rgb(255, 255, 255));
    background:       -o-linear-gradient(#fff,rgb(255, 255, 255));
    background:          linear-gradient(#fff,rgb(255, 255, 255));
}
.about{
    width:100%;
    height:60px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #afafaf;
}
.about a{
    display: inline-block;
    height:60px;
    width:180px;
    text-align: center;
    line-height: 60px;
    font-size: 13px;
    color:#afafaf;
}
.about a:hover{
    color:#757575;
}
article{
    width:100%;
    height:400px;
}
article p{
    display: block;
    width:100%;
    height: 130px;
    line-height: 200px;
    text-align: center;
    font-size: 20px;
}
article div{
    width:60%;
    height: 200px;
    margin:0 auto;
    font-size: 13px;
    color:#afafaf;
}
.welcome{
    width:100%;
    height: 60px;
    background: #f4f4f4;
    display: flex;
    justify-content: space-between;
}
.welcome span{
    display: inline-block;
    height:60px;
    line-height: 60px;
    color:#afafaf;
}
.span1{
    margin-left: 50px;
    font-size: 16px;
}
.span2{
    margin-right: 50px;
    font-size: 13px;
}
.span2 a{
    color:#000;
}
.lesson{
    width:100%;
    height:450px;
    background-image: url(../img/bg.jpg);
    background-size: cover;
}
.lesson p{
    display: block;
    width:100px;
    height: 30px;
    margin-left: 35px;
    margin-top:60px;
    color:#757575;
}
.lesson div{
    width:100%;
    height: 370px;
    display: flex;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap; 
}
.lesson img{
    display: inline-block;
    width:28%;
    height: 170px;
}
footer{
    width:100%;
    height:40px;
    background: #f4f4f4;
    line-height: 40px;
    text-align: center;
}

@media screen and (max-width: 420px){
    .wrapper{
        width:100%;
        position: relative;
    }
    .hd div:before{
        content: "imooc";
        width:100%;
        height:50px;
        background: #7EA6B1;
        position: absolute;
        top:0;
        left: 0;
    }
}

我这个代码为什么用开发者工具测试的时候，响应式那段代码没反应的？我去手动缩小屏幕大小又有反应，是哪里出问题了？？？

写回答

3回答