作品介紹
網(wǎng)頁作品簡介： 寒假期間學(xué)習(xí)HTML和CSS即部分Javascript后的第一個(gè)大作業(yè)，搭建一個(gè)個(gè)人靜態(tài)博客，后面出于興趣，將其部署到GitPage上并利用GitHub添加了留言功能。
一、作品展示
二、代碼實(shí)現(xiàn)
代碼如下（示例）：文章來源：http://www.zghlxwxcb.cn/news/detail-514202.html
<!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>風(fēng)止于秋水，我止于你??</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">關(guān)于</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>
預(yù)覽地址
[網(wǎng)站預(yù)覽地址](https://ylishu.github.io/)
總結(jié)
以上就是今天要講的內(nèi)容，本文僅僅簡單介紹了個(gè)人靜態(tài)博客，而部署個(gè)人靜態(tài)博客基本上是所有前端開發(fā)者必經(jīng)的一個(gè)階段。文章來源地址http://www.zghlxwxcb.cn/news/detail-514202.html
到了這里，關(guān)于【靜態(tài)網(wǎng)頁制作大作業(yè)——個(gè)人博客搭建（HTML+CSS+Javascript）】的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
