上篇讲了网址导航,这一篇来到网页的最后一课,实现一个静态网站。
第三课: 静态网站
任务拆分:
最终主页代码:(其它子页代码省略)
<!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>
(全文完)