请问老师这样做是否正确，是否有布局的坏习惯？哪里还可以优化，虽然实现了效果，但总觉得自己是投机取巧

来源：4-11 自由编程

weixin_慕码人7523200

2020-10-25 23:28:23

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    header {
        width: 500px;
        margin: 0 auto;
    }

    header h2 {
        text-align: center;
        font-size: 32px;
    }

    .heng {
        width: 60px;
        height: 3px;
        background: #07cbc9;
        margin: 10px auto;
    }

    header .comment {
        text-align: center;
        color: gray;
        font-size: 14px;
    }

    section {
        position: relative;
        width: 1201px;
        height: 464px;
        margin: 0 auto;
        padding-top: 30px;
    }

    section .left {
        float: left;
        width: 270px;
    }

    section .left article {
        position: absolute;
        top: 50%;
        margin-top: -130px;
        width: 300px;
        padding: 20px;
        font-size: 18px;
        border: 1px solid gray;
        background: rgba(255, 255, 255, .5);
    }

    section .left article button {
        width: 140px;
        height: 40px;
        background: black;
        color: white;
        outline: none;
        border: none;
        margin-top: 30px;
    }

    section img {
        float: left;
    }

    section .right {
        float: right;
    }

    section .right .r {
        width: 260px;
        border: 1px solid grey;
        padding: 40px 0;
        text-align: center;
    }

    section .right .r h3 {
        font-size: 28px;
        font-weight: bold;
    }

    section .right .right-up {
        margin-bottom: 30px;
    }

    section .top {
        width: 500px;
        margin: 0 auto;
        text-align: center;
    }

    section .comment {
        text-align: center;
        color: gray;
        font-size: 14px;
    }

    section .photo {
        width: 1200px;
        height: 653px;
        padding: 20px;
    }

    section .photo ul {
        list-style: none;
        width: 1160px;
        height: 613px;
    }

    section .photo ul li {
        float: left;
        position: relative;
        width: 360px;
        height: 240px;
        margin-right: 40px;
        margin-bottom: 30px;
    }

    section .photo ul li:nth-child(3),
    section .photo ul li:nth-child(6) {
        margin-right: 0;
    }

    section .photo ul li div {
        position: absolute;
        width: 100%;
        height: 50px;
        left: 0;
        bottom: 0;
        text-indent: 20px;
        text-align: left;
        line-height: 50px;
        color: white;
        background-color: #000;
    }

    footer img {
        display: block;
        width: 1200px;
        margin: 0 auto;
    }
</style>

<body>
    <header>
        <h2>ABOUT</h2>
        <div class="heng"></div>
        <div class="comment">
            lkjsdj lsjdkii lkjlw3e mdk lksjdkl sdklse klsdkkdfj ksdfjs sdffksdflks klsdfklsd kldkflsdf lslsl lsdfkl kl ;ldfg ldfgk k sdf sdfs df sdf sdfsdf sdfs sdf sdfsdf sdf sdf sfd sdf sdf
        </div>
    </header>
    <section>
        <div class="left">
            <h2>A WORD <br> ABOUT US</h2>
            <article>
                <p>
                    Pra esent ingk vakrre skt s, dkfbi lib dum ldib nsdk focng gisl nodf obil kdkd gifv msdfk osdfkjsd lkkdkg ksdkfsd lsd lsdfk sdfk lsdflk kldkf lsdf
                </p>
                <button>EXPLORE</button>
            </article>
        </div>
        <img src="images/bb3.jpg" alt="">
        <div class="right">
            <div class="right-up r">
                <h3>70000</h3>
                <div class="heng"></div>
                <div>Students</div>
            </div>
            <div class="right-down r">
                <h3>600</h3>
                <div class="heng"></div>
                <div>Faculty</div>
            </div>
        </div>
    </section>

    <section>
        <div class="top">
            <h1>GALLERY</h1>
            <div class="heng"></div>
            <div class="comment">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam ducimus tempora minima consequatur incidunt quidem rerum tenetur distinctio.

            </div>
        </div>
        <div class="photo">
            <ul>
                <li>

                    <div>Science Lab</div>
                    <img src="images/03-01.jpg" alt="">

                </li>
                <li>

                    <div>Indoor Stadium</div>
                    <img src="images/03-02.jpg" alt="">
                </li>
                <li>

                    <div>Transportation</div>
                    <img src="images/03-03.jpg" alt="">

                </li>
                <li>

                    <div>kids Room</div>
                    <img src="images/03-04.jpg" alt="">

                </li>
                <li>

                    <div>Meditation Classes</div>
                    <img src="images/03-05.jpg" alt="">

                </li>
                <li>

                    <div>Kids Play Ground</div>
                    <img src="images/03-06.jpg" alt="">

                </li>
            </ul>

        </div>
    </section>
    <footer>
        <img src="images/footer.png" alt="">
    </footer>
</body>

</html>