相关代码：

<!-- Gallery区域 -->
    <div class="gallery">
        <!-- gallery上半部分（标题和简短描述） -->
        <div class="gallery-up">
            <!-- 标题 -->
            <h2>GALLERY</h2>
            <!-- 简短描述 -->
            <div class="cutline"></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>

        <!-- gallery下半部分（详细描述） -->
        <div class="gallery-down">
            <dl>
                <dt>
                    <img src="images/03-01.jpg" alt="">
                </dt>
                <dd>Science Lab</dd>
            </dl>
            <dl>
                <dt>
                    <img src="images/03-02.jpg" alt="">
                </dt>
                <dd>Indoor Stadium</dd>
            </dl>
            <dl>
                <dt>
                    <img src="images/03-03.jpg" alt="">
                </dt>
                <dd>Transportation</dd>
            </dl>
            <dl>
                <dt>
                    <img src="images/03-04.jpg" alt="">
                </dt>
                <dd>Kids Room</dd>
            </dl>
            <dl>
                <dt>
                    <img src="images/03-05.jpg" alt="">
                </dt>
                <dd>Meditation Classes</dd>
            </dl>
            <dl>
                <dt>
                    <img src="images/03-06.jpg" alt="">
                </dt>
                <dd>Kids Play Ground</dd>
            </dl>
        </div>
    </div>
    <!-- footer页脚 -->
    <div class=footer>
        <p>&copy 2016 imooc.com 京ICP备13046642号</p>
    </div>

相关代码：

* {
    padding: 0;
    margin: 0;
}
/* 去掉所有列表的小圆点 */
ul,ol {
    list-style: none;
}
/* 去掉所有超级链接的下划线 */
a {
    text-decoration: none;
}
​
​/* Gallery区域 */
.gallery .gallery-up {
    width: 500px;
    margin: 0 auto;
    margin-top: 30px;
}
.gallery .gallery-up h2 {
    display: block;
    text-align: center;
    font-size: 32px;
}
.gallery .gallery-up p {
    text-align: center;
    color: gray;
    font-size: 14px;
}
.gallery .gallery-down {
    width: 1160px;
    margin: 0 auto;
    padding: 20px 20px 0 20px;
    overflow: hidden;
}
.gallery .gallery-down dl {
    float: left;
    margin-right: 40px;

}
.gallery .gallery-down dl:nth-of-type(3),
.gallery .gallery-down dl:nth-of-type(6) {
    margin-right: 0;
}
.gallery .gallery-down dl dt {
    display: block;
    width: 360px;
    height: 240px;
}
.gallery .gallery-down dl dt img {
    width: 100%;
    height: 240px;
}
.gallery .gallery-down dl dd {
    background-color: #000;
    width: 340px;
    height: 50px;
    margin-bottom: 30px;
    padding-left: 20px;
    color: white;
    line-height: 50px;
}

/* footer页脚 */
.footer {
    width: 100%;
    height: 80px;
    background-color: #07cbc9;
    text-align: center;
    line-height: 80px;
}