第一次用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>
网友评论