麻烦老师检查代码

来源：4-11 自由编程

淡淡嚣风

2021-03-10 14:28:49

相关截图：

相关代码：

<!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/css.css">
</head>

<body>
    <!-- gallery区域 -->
    <div class="gallery">
        <div class="gallery-up about-up">
            <h2>GALLERY</h2>
            <div class="line"></div>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        </div>
        <div class="gallery-down">
            <dl>
                <dt>
                        <img src="images/03-01.jpg" alt="">
                    </dt>
                <dd>
                    <p>Science Lab</p>
                </dd>
            </dl>
            <dl>
                <dt>
                        <img src="images/03-02.jpg" alt="">
                    </dt>
                <dd>
                    <p>Indoor Stadium</p>
                </dd>
            </dl>
            <dl>
                <dt>
                        <img src="images/03-03.jpg" alt="">
                    </dt>
                <dd>
                    <p>Transportation</p>
                </dd>
            </dl>
            <dl>
                <dt>
                        <img src="images/03-04.jpg" alt="">
                    </dt>
                <dd>
                    <p>Kids Room</p>
                </dd>
            </dl>
            <dl>
                <dt>
                        <img src="images/03-05.jpg" alt="">
                    </dt>
                <dd>
                    <p>Meditation Classes</p>
                </dd>
            </dl>
            <dl>
                <dt>
                        <img src="images/03-06.jpg" alt="">
                    </dt>
                <dd>
                    <p>Kids Play Ground</p>
                </dd>
            </dl>
        </div>
    </div>

    <div class="footer">
        <p>&copy 2016 imooc.com 京ICP备13046642号</p>
    </div>
</body>

</html>

相关代码：

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

header {
    background-color: #07cbc9;
    height: 80px;
}

header .web {
    width: 1200px;
    margin: 0 auto;
}


/* GALLERY 部分 */

.about-up {
    width: 500px;
    margin: 0 auto;
}

.about-up h2 {
    margin-top: 30px;
    font-size: 32px;
    text-align: center;
}

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

.about-up p {
    text-align: center;
    color: gray;
}

.gallery .gallery-down {
    width: 1200px;
    height: 653px;
    margin: 0 auto;
}

.gallery .gallery-down dl {
    float: left;
    margin: 0 20px;
}

.gallery .gallery-down dl dt {
    width: 360px;
    height: 240px;
    margin-top: 20px;
}

.gallery .gallery-down dl dt img {
    display: block;
}

.gallery .gallery-down dl dd {
    box-sizing: border-box;
    width: 360px;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    background-color: rgb(0, 0, 0);
    color: white;
    margin-bottom: 10px;
}


/* 页脚部分 */

.footer {
    height: 80px;
    width: 100%;
    background-color: #07cbc9;
}

.footer p {
    line-height: 80px;
    text-align: center;
}