参与计划的第一天,对照着教程,动手做了个网页,
效果如下
我的代码如下:
!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.通过实操能更好的理解并记住相关知识
网友评论