上篇讲了网址导航，这一篇来到网页的最后一课，实现一个静态网站。
第三课： 静态网站
任务拆分：
任务1：网站规划思路（网页内容分类）
任务2：网页布局（上下、左右等）
任务3：样式编写
任务4：网页内容填
最终主页代码：（其它子页代码省略）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>叶子陪你玩</title>
<style type="text/css">
.contain{margin:0 50px;padding:5px;}
.top{margin:5px 20px;padding:20px;background:skyblue;}
.item{display:inline;vertical-align:middle;margin:0 10px;}
.item a{text-decoration:none;}
.item img{width:50px;height:50px;border-radius:50%;}
.item a:hover{text-decoration:underline;color:red;}
.content{margin:5px 20px;padding:20px;background:skyblue;}
.article{background:white;padding:20px;margin:5px;}
.article a{text-decoration:none;color:skyblue;font-size:20px;}
.article a:hover{text-decoration:underline;color:red;}
.article img{width:100px;height:100px;vertical-align:middle;margin-right:20px;border:2px solid skyblue;padding:5px;}
.bottom{margin:5px 20px;padding:20px;background:skyblue;text-align:center;}
</style>
</head>
<body>
<div class="contain">
<div class="top">
<div class="item"><a href="#"><img src="images/logo.jpg" /></a></div>
<div class="item"><a href="#">首页</a></div>
<div class="item"><a href="#">博客</a></div>
<div class="item"><a href="#">教程</a></div>
<div class="item"><a href="#">关于</a></div>
</div>
<div class="content">
<div class="article">
<img src="images/1.png" />
<a href='content/1.html' target = "_blank">米黄色飞船</a>
</div>
<div class="article">
<img src="images/2.png" />
<a href='content/2.html' target = "_blank">蓝色飞船</a>
</div>
<div class="article">
<img src="images/3.png" />
<a href='content/3.html' target = "_blank">绿色飞船</a>
</div>
<div class="article">
<img src="images/4.png" />
<a href='content/4.html' target = "_blank">粉红色飞船</a>
</div>
<div class="article">
<img src="images/5.png" />
<a href='content/5.html' target = "_blank">黄色飞船</a>
</div>
</div>
<div class="bottom">叶子陪你玩个人网站@2020</div>
</div>
</body>
</html>(全文完)
长按二维码，加关注！叶子陪你玩
欢迎转载，转载请注明出处！
欢迎关注公众微信号：叶子陪你玩编程 分享自己的python学习之路
