0
点赞
收藏
分享

微信扫一扫

静态网站

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



第三课: 静态网站

静态网站_网址导航

任务拆分:


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

(全文完)

长按二维码,加关注!叶子陪你玩

静态网站_网页内容_02


欢迎转载,转载请注明出处!

欢迎关注公众微信号:叶子陪你玩编程 分享自己的python学习之路




举报

相关推荐

0 条评论