静态网站 - 码农教程

上篇讲了网址导航，这一篇来到网页的最后一课，实现一个静态网站。

第三课：静态网站

任务拆分：

任务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>

(全文完)