文章目录
- 作品介绍
- 一、作品展示
- 二、代码实现
- 预览地址
- 总结
作品介绍
网页作品简介： 寒假期间学习HTML和CSS即部分Javascript后的第一个大作业，搭建一个个人静态博客，后面出于兴趣，将其部署到GitPage上并利用GitHub添加了留言功能。
一、作品展示
二、代码实现
代码如下（示例）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Li Shu's site</title> <link href="img/title.ico" rel="shortcut icon"/> <style type="text/css"> html{ position: relative; } .top{ background-color: #FFFFFF; height: 60px; width: 1900px; position: absolute; top: 0; left: 0; } .top h1{ padding-left: 150px; font-family: "华文新魏"; } .top-left{ width: 250px; height: 50px; } .top-left span{ position: absolute; top: 15px; left: 250px; font-family: "华文新魏"; font-size: 28px; color: pink; float: left; display: none; } .top-left:hover span{ display: block; } .top1{ position: absolute; top: 0px; left: 600px; padding: 20px; font-family: "华文新魏"; font-size: 30px; } .top2{ position: absolute; top: 0px; left: 800px; padding: 20px; font-family: "华文新魏"; font-size: 30px; } .top3{ position: absolute; top: 0px; left: 1050px; padding: 20px; font-family: "华文新魏"; font-size: 30px; } .top4{ position: absolute; top: 0px; left: 1300px; padding: 20px; font-family: "华文新魏"; font-size: 30px; } a{ text-decoration: none; color: black; } a:hover{ text-decoration: none; color: orange; } a:active{ text-decoration: line-through; color: cadetblue; } .top-right{ position: absolute; top: 0px; right: 30px; padding: 20px; font-family: "华文新魏"; font-size: 20px; } .top img{ width: 40px; height: 40px; border-radius: 25px; position: absolute; top: 5px; right: 0px; } .top-right1{ position: absolute; top: -4px; right: -150px; padding: 20px; } .top-right1 input{ font-family: "华文新魏"; font-size: 20px; border-radius: 8px; } .main{ position: absolute; top: 60px; left: 0; background-image: url(img/人生背景.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; width: 2133px; height: 1141px; } .main-left h1{ position: absolute; left: 50px; top: 180px; color: #517693; font-size: 40px; font-weight: bold; font-family: "华文行楷"; } .main-left h3{ position: absolute; left: 50px; top: 280px; color: #517693; font-size: 28px; font-weight: bold; font-family: "华文行楷"; } .center-left{ position: absolute; top: 30px; left: 550px; width: 250px; height: 850px; border: 3px solid white; border-radius: 20px; background-color:white; opacity: 0.8; } .center-left img{ width: 100px; height: 100px; border-radius: 100px; position: absolute; top: 5px; left: 75px; } .center-left #name{ position: absolute; top: 110px; left: 75px; text-align: center; font-family: "华文新魏"; font-size: 17px; } .span ul{ position:absolute; top: 200px; left: 510px; width: 250px; height: 680px; } .span li{ line-height: 111px; list-style-type: none; } .pane{ width: 256px; text-align: center; font-family: "华文新魏"; font-size: 20px; } .pane:hover{ background-color: white; } .pane1{ width: 256px; height: 114px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; text-align: center; font-family: "华文新魏"; font-size: 20px; } .pane1:hover{ background-color: white; } .center{ position: absolute; top: 30px; left: 820px; width: 850px; height: 850px; border: 3px solid white; border-radius: 20px; background: rgba(250,250,250,0.8); } .center iframe{ border-radius: 20px; } #showtime1{ position: absolute; left: 30px; bottom: 20px; color: #517693; font-size: 28px; font-weight: bold; font-family: "华文新魏"; } #showtime2{ position: absolute; left:40px; bottom: -15px; color: #517693; font-size: 25px; font-weight: bold; font-family: "华文新魏"; } .time{ position: absolute; right: 30px; bottom: 5px; color: #517693; font-size: 28px; font-weight: bold; font-family: "华文新魏"; } .bottom { position: absolute; top: 1110px; width: 2110px; height: 85px; } </style> </head> <body> <div class="top"> <div class="top-left"> <h1>止于此</h1> <span>风止于秋水，我止于你💗</span> </div> <a class="top1" href="home page.html">首页</a> <a class="top2" href="work.html">苦海无涯</a> <a class="top3" href="life.html">人生旅途</a> <a class="top4" href="message board.html">人生良言</a> <span class="top-right">黎曙</span> <img src="img/头像.jpg" title="头像" alt="头像" /> <span class="top-right1"><input type="submit" value="登录"></span> </div> <div class="main"> <div class="main-left"> <h1>欢迎来到黎曙的世界！<br/>Welcome to Li Shu's world!</h1> <h3>今天也要加油昂！<br/>Today, we still have to refuel!</h3> </div> <div class="main-center"> <div class="center-left"> <a href="my.html" target="frame"><img src="img/头像.jpg" alt="头像" title="头像" /></a> <span id="name">黎曙<br/>非常热爱生活</span> </div> </div> <div class="span"> <ul> <li class="pane"><a href="main1.html" target="frame">主页</a></li> <li class="pane"><a href="work.html" target="frame">笔记</a></li> <li class="pane"><a href="conclude.html" target="frame">归档</a></li> <li class="pane"><a href="email.html" target="frame">邮箱</a></li> <li class="pane"><a href="about.html" target="frame">关于</a></li> <li class="pane1">更多</li> </ul> </div> <div class="center"> <iframe src="main1.html" width="850px" height="850px" frameborder="0" scrolling="yes" name="frame"></iframe> </div> </div> <div class="bottom"> <p id="showtime1" title="我们的征途是星辰大海">哈雷彗星的约定：</p> <p id="showtime2" >14193天3:22:55</p> <script> var showtime2 = function () { var nowtime = new Date(); endtime = new Date("2061/1/1"); var lefttime = endtime.getTime() - nowtime.getTime(); leftd = Math.floor(lefttime/(1000*60*60*24)); lefth = Math.floor(lefttime/(1000*60*60)%24); leftm = Math.floor(lefttime/(1000*60)%60); lefts = Math.floor(lefttime/1000%60); return leftd + "天" + lefth + ":" + leftm + ":" + lefts; } var div = document.getElementById("showtime2"); setInterval (function () { div.innerHTML = showtime2(); }, 1000); </script> <div class="time"> <script> document.write("<span id=time></span>") setInterval("time.innerText=new Date().toLocaleString()",1000) </script> </div> </div> </body> </html>
预览地址
[网站预览地址](https://ylishu.github.io/)
总结
以上就是今天要讲的内容，本文仅仅简单介绍了个人静态博客，而部署个人静态博客基本上是所有前端开发者必经的一个阶段。
