效果如下

我的代码如下：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The blah</title>
    <link rel="stylesheet" type="text/css" href="homework.css">
</head>
<body>
    <div class="header">
        <img src="images/blah.png">
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Site</a></li>
            <li><a href="#">Other</a></li>
        </ul>
    </div>
    <div class="main-content">
        <h2>The Beach</h2>
        <hr>
        <ul class="photos">
            <li><img src="images/0001.jpg" width="150" height="150" alt="Pic1"></li>
            <li><img src="images/0003.jpg" width="150" height="150" alt="Pic2"></li>
            <li><img src="images/0004.jpg" width="150" height="150" alt="Pic3"></li>
        </ul>
        <p>
            When I wrote the following pages, or rather the bulk of them, I lived alone, in the woods,
            a mile from any neighbor, in a house which I had built myself, on the shore of Walden Pond,
            in Concord, Massachusetts, and earned my living by the labor of my hands only. I lived there
            two years and two months. At present I am a sojourner in civilized life again.
        </p>
    </div>
    <div class="footer">
        <p>©mugglecoding</p>
    </div>
</body>
</html>

总结：
1.自己动手做比想像中难一点，基础知识记不住，对照着教程才做出来；
2.引用CSS的时候，没注意多打了个分号，导致图片的排列是竖着排的，找了一段时间才发现原因；
3.通过实操能更好的理解并记住相关知识