python四周实战1.01——动手做一个网页

第一次用markdown来编辑，蛮新鲜的，交作业

以前有学过简单的html和CSS，动手做一个网页当复习了。还是很基本的思想，先分析一个网页的构成，例如header部分和main-content部分都是什么元素组成，用html把它给做出来，加上CSS就这么简单了。所以分解很重要？
这是完成的作业

homework1.1.png

总结：

开始时总加载不了css样式，后来发现是两个文件没放在同一目录下面了。太不细心了。
还是引用目录的问题，需要注意的是路径应写相对路径
课程里说的p标签的空格和换行都会保留，试验了下发现并不会。搜索一下发现可以用预处理标签pre来保留空格和换行
pre标签怎么多了一些缩进的？明天去查查资料看看（是代码里的缩进，也一起显示出来了）

代码

<!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" alt="">
        <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" alt="Pic1" width="150" height="150"></li>
            <li><img src="images/0003.jpg" alt="Pic2" width="150" height="150"></li>
            <li><img src="images/0004.jpg" alt="Pic3" width="150" height="150"></li>
        </ul>
        <p>
            听说可以随便写
            试试换行
            这次 是 空    格！

            好像  换行
            并没有保留啊
        </p>
        <hr>
        <pre>
            用‘pre’标签可以保留
            换行
            还有很长       的空格
            叫 预格式化标签pre
        </pre>
    </div>
    <div class="footer">
        <p>©MUGGLECODING</p>
    </div>
</body>
</html>

python四周实战1.01——动手做一个网页

总结：

代码

推荐阅读更多精彩内容