还是发现不了代码231行bottom 修改背景色为什么没变。padding-top也没改

还是发现不了代码231行bottom 修改背景色为什么没变。padding-top也没改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>主体课程</title>
        <style type="text/css">
        *{padding: 0;
        margin:0}
.header{
    width:100%;
    height:100px;
}
.header img{
    width: 300px;
    height:84px;
    padding-left: 100px;
    padding-top: 8px;
}
.header .logo{
    float:left;
}
.header .nav{
    float:right;
}
.header .nav ul{
    padding-right: 100px;
}
.header .nav ul li{
    float:left;
    list-style: none;
    width: 80px;
    height:100px;
    line-height: 100px;
    font-size: 15px;
    font-weight: bolder;
    color:#7d7d7d;
}
.main .top{
    width: 100%;
    height: 900px;
}
.main .top img{
    width: 100%;
    height: 900px;
}
.main .toplayer{
    position: absolute;
    top:100px;
    left:0;
    background-color: #000;
    width:100%;
    height:900px;
    opacity:0.5;
}
.main .middle{
    width:1000px;
    margin:0 auto;
}
.main .middle .m-top .social{
    float:left;
    width:33.3%;
    padding-top:50px;
    text-align: center;
}
.main .middle .m-top .social .comm{
    font-size: 20px;
    color:#7D7C7F;
    font-weight: bold;
    padding-top: 20px;
}
.main .middle .social img{
    width:100px;
    height:100px;
    }
.main .toplayer-top{
    width:500px;
    height:300px;
    /*background-color: blue;*/
    position:absolute;
    z-index:2;
    top:550px;
    margin-top:-150px;
    right:50%;
    margin-right:-250px;
}
.main .toplayer-top .word{
    padding-top: 100px;
    color:#fff;
    font-size:45px;
    font-weight: bolder;
    text-align: center;
    font-family: "微软雅黑";
}
.main .toplayer-top button{
    width: 200px;
    height: 60px;
    margin-top: 50px;
    color:#fff;
    font-size:14px;
    font-weight: bolder;
    text-align: center;
    font-family: "微软雅黑";
    background-color: pink;
    border-radius: 8px; /*圆角*/
    margin-left:150px;  /*150=500/2-200/2*/
}
.main .middle .m-middle{
    font-size:22px;
    font-style:italic ;
    color:greenyellow;
    padding-top: 50px;
    text-align: center;
    font-weight: bold;
    padding-bottom: 50px;
    
}
.main .middle .clear{
    clear:both;
}
.main .middle .m-bottom .m-com{
    float:left;
    padding: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;/*相同的设置放在父级里*/
    /*width: 33.3%;*/
}
.main .middle .m-bottom .m-com img{
    width:310px;
    height:260px ;
    
}
.main .middle .m-bottom .m-com .des1{
    padding-top: 20px;
    color:#7D7D7F;
}
.main .middle .m-bottom .m-com .des2{
    
    padding-top: 10px;
    color:#BDBDBC;
}
.mian .bottom {
    background-color: orange;
}
.main .bottom .content{
    width: 1000px;
    margin:0 auto;
}
.main .bottom .content .title{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color:#7D7C7F;font-family: "微软雅黑";
    padding-top: 100px;
}




/*HTML CSS分界线*/
/*HTML CSS分界线*/
/*HTML CSS分界线*/
        </style>
    </head>
    
    <body><!--头部-->
        <div class="header">
            <div class="logo">
                <img src="http://img1.sycdn.imooc.com/climg//595dd5120001736902000080.png" alt="lgo" />
            </div>
            <div class="nav">
                <ul>
                    <li>前端</li>
                    <li>后端</li>
                    <li>移动端</li>
                    <li>数据开发</li>
                </ul>
            </div>
        </div>
        <!--主体-->
    <div class="main">
        <div class="top"><!--主体顶部-->
            <img src="image/2.jpg" alt="Sorry,I'm missing'" />
        <div class="toplayer"></div><!--遮罩层-->
        <div class="toplayer-top">
            <div class="word">MY BEAUTIFUL LIFE</div>
            <button>LOOK MORE&gt;</button>
        </div>
        <!--主体中间部分-->
        <div class="middle">
            <div class="m-top"> <!--中间部分上部-->
                <div class="social weibo">
                    <img src="image/weibo.png">
                        <div class="comm">weibo</div>
                </div>
                <div class="social weixin">
                    <img src="image/weixin.png">
                        <div class="comm">weixin</div>
                </div>
                <div class="social qq">
                    <img src="image/QQ.png"/>
                        <div class="comm">qq</div>
                </div>
                <div class="clear"></div><!--清除-->
            </div>
            <!--中间部分中部-->
            <div class="m-middle">
                I want to give good things to record down,<br>after the recall will be very beautiful.
            </div>
            <!--中间部分底部-->
            <div class="m-bottom">
              <div class="m-com">
                <img src="image/03-01.jpg" />
                <div class="des1">Cool Image</div>
                <div class="des2">Record The Picture</div>
              </div>
            
            <div class="m-com">
                <img src="image/03-02.jpg" />
                <div class="des1">Cool Image</div>
                <div class="des2">Record The Picture</div>
            </div>
            <div class="m-com">
                <img src="image/03-03.jpg" />
                <div class="des1">Cool Image</div>
                <div class="des2">Record The Picture</div>
            </div>
            </div>
        </div>
        <!--主体的底部部分-->
        <div class="bottom">
            <div class="content">
                <div class="title">FRON THE PHOTO ALBUM</div>
                <div class="pic-content">
                    <dl>
                        <dd><img src="image/04-01.jpg"> </dd>
                        <dd>I want to give good things to record down,
after the recall will be very beautiful. I want to give good things to record down,
after the recall will be very beautiful. I want to give good things to record down,
after the recall will be very beautiful. </dd>
                    </dl>
                    <dl>
                        <dd><img src="image/04-02.jpg"> </dd>
                        <dd>I want to give good things to record down,
after the recall will be very beautiful. I want to give good things to record down,
after the recall will be very beautiful. I want to give good things to record down,
after the recall will be very beautiful. </dd>
                    </dl>
                </div>
            </div>
        </div>
        
    </div>
    <!--尾部-->
    <div class="footer"></div>
    </body>
</html>
越自律_越自信_越自由 2017-08-16
源自：项目：网页布局案例   2-8 主体部分的底部
55
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕糖 2017-08-17 13:45:29

你好，橙色区域超过了bottom是因为，上面的元素设置了浮动，导致脱离文档流，父级高度塌陷，建议：这里可设置以下属性：

.main .middle .m-bottom{
    overflow: hidden;
}

然后，修改之后，标题里的padding-top值也是有效的，你可以修改测试下。

祝学习愉快~

0
收起回答
好帮手慕糖 2017-08-17 10:16:49

你好，背景颜色没有改变是因为，单词拼写错误，这里应该是：.main .bottom,而你写的是.mian .bottom。至于你说的“padding-top”不知道你是想设置给那个元素，建议：这个案例使有源码的，可以在教辅中下载下了，结合源码在听下老师的课程。

祝学习愉快~

0
收起回答
  • 提问者 越自律_越自信_越自由 #1
    老师，你好。代码太长不能回复。 我将main修改后发现，橙色区域超过了bottom所在的范围，上方的图片背景也成了橙色。 另外我是想把FROM THE PHOTO ALBUM这个标题里的padding-top修改。
    2017-08-17 10:32:51
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

4-1 为什么我的要用margin才可以填充显示背景图
28 0 7
老师，为什么把背景改为图片了之后一开始的蓝色部分就会显示出来啊？
22 0 2
bottom部分灰色背景并没有100%覆盖
0 1 3
老师看一下，display：block有什么作用，不用也可以的啊应该
1 0 3
老师，怎样实现鼠标滑过，移出的背景色 可以一直改变？
12 1 3

登录后可查看更多问答，登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师