老师求助

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页布局案例跟练</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="header">

        <div class="logo">
            <img src="image\logo.png" alt="logo" >
        </div>
        <!-- 左侧logo -->

        <div class="nav">
            <ul>
                <li>首页</li>
                <li>图片</li>
                <li>视频</li>
                <li>手记</li>
            </ul>
        </div>
        <!-- 右侧导航 -->
        </div>
        <!-- 头部 -->




    <div class="main">
            <div class="top">
                <img src="image\1.jpeg" >
                <div class="toplaye"></div>
                <!-- 遮罩层 -->
                <div class="toplayer-top">
                    <div class="word">MY BEAYTIFUL LIFE</div>
                <button> LOOK MORE&GT;</button>
                </div>
            </div>
            <!-- 主体头部 -->

            <div class="middle">
                <div class="m-top">
                    <div class="commen weibo">
                            <img src="image\weibo.png" >
                            <div class="comm">MICROBLOG</div>
                    </div>
                    <div class="commen weixin">
                             <img src="image\weixin.png" >
                             <div class="comm">WECHAT</div>
                    </div>

                    <div class="commen qq">
                            <img src="image\QQ.png" >
                            <div class="comm">QQ</div>
                    </div>
                </div>
                    <div class="clear"></div>
                <!-- 空标签清除浮动 -->

                <div class="m-middle">
                            “I want to give good things to record down,<br> after the recall will be
                            vey beautiful”

                </div>

                <div class="m-bottom">
                    <div class="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>
            <!-- 主体中间部分 -->


    </div>
    <!-- 主体 -->





    <div class="footer">

    </div>
    <!-- 底部 -->
</body>
</html>

问题描述：

豆包侠 2021-09-01

源自：项目：网页布局案例 2-6 主体部分的中间

收起

1回答

好帮手慕然然回答被采纳获得+3积分 2021-09-01 14:15:37

同学你好，目前老师只能看到HTML代码，无法猜测出同学遇到的问题，所以建议同学详细的描述一下问题，老师好帮助同学解决。祝学习愉快！

收起回答

豆包侠提问者 #1

老师不是我不想写问题是我写了就被拦截发不出来最下面的那三张图 padding ：10px；没起作用是为啥

2021-09-01 14:16:38
好帮手慕然然回复提问者豆包侠 #2

同学你好，建议把css代码也发上来，老师需要测试。祝学习愉快！

2021-09-01 14:21:41

豆包侠提问者回复好帮手慕然然 #3

*{padding: 0;margin: 0;}
.header{
    width: 100%;
    height: 100px;

}
.header img{
    width: 300px;
    height: 85px;
    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: 16px;
    font-weight: bolder;
    color: #7d7d7d;
}
/* 以上为导航样式 */

.main .top{
    width: 100%;
    height: 600px;
}
.main .top img{
    width: 100%;
    height: 600px;
}
.main .toplayer{
    position:absolute;
    top: 100px;
    left: 0;
    background: #000;
    width: 100%;
    height: 600px;
    opacity: 0.5;/*透明度*/
}
.main .toplayer-top{
    width: 500px;
    height: 300px;

    position: absolute;

    top: 400px;
    margin-top: -150px;
    z-index: 2;
    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;
    background: #f5704f;
    text-align: center;
    font-family: "微软雅黑";
    font-weight: bolder;
    font-size: 14px;
    border-radius: 8px;
    /* 设置圆角 */
    clear: both;
    margin-left: 150px;
    border: 0;
    /* 去除边框线 */

    }
    /* 以上为main-top部分 */

    .main .middle{
         width: 1000px;
         margin: 0 auto;
    }
    .main .middle .m-top .commen{
        float: left;
        width: 33.3%;
        padding-top: 50px;
        text-align: center;

    }
    .main .middle .m-top .commen .comm{
        font-size:20px;
        color: #7d7c7f;
        font-weight: bold;
        padding-top: 20px;

    }
    .main .middle .m-top .commen img{
        width: 100px;
        height: 100px;
    }
    /* 以上为主体中间图标部分 */
    .main .middle .m-middle{
         font-size: 22px;
         color: #e19796;
         font-weight: bold;
         padding-top: 50px;
         font-style: italic;

         text-align: center;
         padding-bottom: 50px;
    }
    .clear{
        clear: both;
    }
    /* 空标签清除浮动 */
    /* 以上为主体中间文字部分 */

    .main .middle .m-bottom .m-com{
        float: left;
        padding: 10px;
        text-align: center;

    }
    .main .middle .m-bottom .m-com{
        width: 310px;
        height: 260px;
        font-weight: bold;
        font-size: 20px;

    }
    .main .middle .m-bottom .m-com .desl{


        color: #7d7d7f;
        padding-top: 20px;

    }

    .main .middle .m-bottom .m-com .des2{


        padding: 10px;
        color: #bdbdbc;
    }

    /* 以上为主体中间 剩余三张图片部分 */