css

/* Grallery样式 */
.gallery {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.gallery .gallery-contain {
    box-sizing: border-box;
    height: 653px;
    float: left;
    margin: 20px;
}
.gallery .gallery-contain dl {
    width: 360px;
    margin-right: 40px;
    margin-bottom: 20px;
    float: left;
}
.gallery .gallery-contain dl:nth-child(3n+3) {
    margin-right: 0;
}
.gallery .gallery-contain dt {
    width: 360px;
    height: 240px;
}
.gallery .gallery-contain dd {
    background-color: #000;
}
.gallery .gallery-contain dd>p {
    font-size: 20px;
    color: #fff;
    margin-left: 20px;
    line-height: 50px;
}

/* 页脚 */
footer {
    height: 80px;
    background-color: #07cbc9;
    line-height: 80px;
    font-size: 18px;
    text-align: center;
}

html

    <!-- Gallery区域 -->
    <div class="gallery">
        <h2 class="content-title">GALLERY</h2>
        <div class="line"></div>
        <div class="gallery-overview">
            <p class="overview">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<br>
                when
                an
                unknown printer took a galley of type and scrambled <br>it to make a type specimen book.
            </p>
        </div>
        <div class="gallery-contain">
            <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>



    <!-- Footer页脚 -->
    <footer>
        <p>&copy; 2016 imooc.com 京ICP备13046642号</p>
    </footer>

本地效果

网页完整代码

我估计你也不会看
太长，我放在CodePen了。
css文件需命名为main.css