【静态网页制作大作业——个人博客搭建（HTML+CSS+Javascript）】
生活随笔
收集整理的這篇文章主要介紹了
【静态网页制作大作业——个人博客搭建（HTML+CSS+Javascript）】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 作品介紹
- 一、作品展示
- 二、代碼實現
- 預覽地址
- 總結
作品介紹
網頁作品簡介： 寒假期間學習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/)總結
以上就是今天要講的內容，本文僅僅簡單介紹了個人靜態博客，而部署個人靜態博客基本上是所有前端開發者必經的一個階段。
總結
以上是生活随笔為你收集整理的【静态网页制作大作业——个人博客搭建（HTML+CSS+Javascript）】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows通过注册表修改3389端口
- 下一篇： 如何用html制作博客页面,HTML个人