0
0

【静态网页制作大作业——个人博客搭建（HTML+CSS+Javascript）】

文章目录

作品介绍

  1. 网页作品简介：

寒假期间学习HTML和CSS即部分Javascript后的第一个大作业，搭建一个个人静态博客，后面出于兴趣，将其部署到GitPage上并利用GitHub添加了留言功能。

一、作品展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、代码实现

代码如下（示例）：

  1. <!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">
  2.             html{
  3.                 position: relative;}.top{
  4.                 background-color: #FFFFFF;
  5.                 height:60px;
  6.                 width:1900px;
  7.                 position: absolute;
  8.                 top:0;
  9.                 left:0;}.top h1{
  10.                 padding-left:150px;
  11.                 font-family:"华文新魏";}.top-left{
  12.                 width:250px;
  13.                 height:50px;}.top-left span{
  14.                 position: absolute;
  15.                 top:15px;
  16.                 left:250px;
  17.                 font-family:"华文新魏";
  18.                 font-size:28px;
  19.                 color: pink;
  20.                 float: left;
  21.                 display: none;}.top-left:hover span{
  22.                 display: block;}.top1{
  23.                 position: absolute;
  24.                 top:0px;
  25.                 left:600px;
  26.                 padding:20px;
  27.                 font-family:"华文新魏";
  28.                 font-size:30px;}.top2{
  29.                 position: absolute;
  30.                 top:0px;
  31.                 left:800px;
  32.                 padding:20px;
  33.                 font-family:"华文新魏";
  34.                 font-size:30px;}.top3{
  35.                 position: absolute;
  36.                 top:0px;
  37.                 left:1050px;
  38.                 padding:20px;
  39.                 font-family:"华文新魏";
  40.                 font-size:30px;}.top4{
  41.                 position: absolute;
  42.                 top:0px;
  43.                 left:1300px;
  44.                 padding:20px;
  45.                 font-family:"华文新魏";
  46.                 font-size:30px;}
  47.             a{
  48.                 text-decoration: none;
  49.                 color: black;}
  50.             a:hover{
  51.                 text-decoration: none;
  52.                 color:  orange;}
  53.             a:active{
  54.                 text-decoration: line-through;
  55.                 color: cadetblue;}.top-right{
  56.                     position: absolute;
  57.                     top:0px;
  58.                     right:30px;
  59.                     padding:20px;
  60.                     font-family:"华文新魏";
  61.                     font-size:20px;}.top img{
  62.                 width:40px;
  63.                 height:40px;
  64.                 border-radius:25px;
  65.                 position: absolute;
  66.                 top:5px;
  67.                 right:0px;}.top-right1{
  68.                     position: absolute;
  69.                     top:-4px;
  70.                     right:-150px;
  71.                     padding:20px;}.top-right1 input{
  72.                 font-family:"华文新魏";
  73.                 font-size:20px;
  74.                 border-radius:8px;}.main{
  75.                 position: absolute;
  76.                 top:60px;
  77.                 left:0;
  78.                 background-image:url(img/人生背景.jpg);
  79.                 background-repeat: no-repeat;
  80.                 background-size: cover;
  81.                 background-attachment: fixed;
  82.                 width:2133px;
  83.                 height:1141px;}.main-left h1{
  84.                 position: absolute;
  85.                 left:50px;
  86.                 top:180px;
  87.                 color: #517693;
  88.                 font-size:40px;
  89.                 font-weight: bold;
  90.                 font-family:"华文行楷";}.main-left h3{
  91.                 position: absolute;
  92.                 left:50px;
  93.                 top:280px;
  94.                 color: #517693;
  95.                 font-size:28px;
  96.                 font-weight: bold;
  97.                 font-family:"华文行楷";}.center-left{
  98.                 position: absolute;
  99.                 top:30px;
  100.                 left:550px;
  101.                 width:250px;
  102.                 height:850px;
  103.                 border:3px solid white;
  104.                 border-radius:20px;
  105.                 background-color:white;
  106.                 opacity:0.8;}.center-left img{
  107.                 width:100px;
  108.                 height:100px;
  109.                 border-radius:100px;
  110.                 position: absolute;
  111.                 top:5px;
  112.                 left:75px;}.center-left #name{
  113.                 position: absolute;
  114.                 top:110px;
  115.                 left:75px;
  116.                 text-align: center;
  117.                 font-family:"华文新魏";
  118.                 font-size:17px;}.span ul{
  119.                 position:absolute;
  120.                 top:200px;
  121.                 left:510px;
  122.                 width:250px;
  123.                 height:680px;}.span li{
  124.                 line-height:111px;
  125.                 list-style-type: none;}.pane{
  126.                 width:256px;
  127.                 text-align: center;
  128.                 font-family:"华文新魏";
  129.                 font-size:20px;}.pane:hover{
  130.                 background-color: white;}.pane1{
  131.                 width:256px;
  132.                 height:114px;
  133.                 border-bottom-left-radius:15px;
  134.                 border-bottom-right-radius:15px;
  135.                 text-align: center;
  136.                 font-family:"华文新魏";
  137.                 font-size:20px;}.pane1:hover{
  138.                 background-color: white;}.center{
  139.                 position: absolute;
  140.                 top:30px;
  141.                 left:820px;
  142.                 width:850px;
  143.                 height:850px;
  144.                 border:3px solid white;
  145.                 border-radius:20px;
  146.                 background:rgba(250,250,250,0.8);}.center iframe{
  147.                 border-radius:20px;}
  148.             #showtime1{
  149.                     position: absolute;
  150.                     left:30px;
  151.                     bottom:20px;
  152.                     color: #517693;
  153.                     font-size:28px;
  154.                     font-weight: bold;
  155.                     font-family:"华文新魏";}
  156.             #showtime2{
  157.                     position: absolute;
  158.                     left:40px;
  159.                     bottom:-15px;
  160.                     color: #517693;
  161.                     font-size:25px;
  162.                     font-weight: bold;
  163.                     font-family:"华文新魏";}.time{
  164.                 position: absolute;
  165.                 right:30px;
  166.                 bottom:5px;
  167.                 color: #517693;
  168.                 font-size:28px;
  169.                 font-weight: bold;
  170.                 font-family:"华文新魏";}.bottom
  171.             {
  172.                 position: absolute;
  173.                 top:1110px;
  174.                 width:2110px;
  175.                 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>varshowtime2=function(){var nowtime =newDate();
  176.                         endtime =newDate("2061/1/1");var lefttime = endtime.getTime()- nowtime.getTime();
  177.                         leftd = Math.floor(lefttime/(1000*60*60*24));  
  178.                         lefth = Math.floor(lefttime/(1000*60*60)%24);  
  179.                         leftm = Math.floor(lefttime/(1000*60)%60);  
  180.                         lefts = Math.floor(lefttime/1000%60);return leftd +"&#22825;"+ lefth +":"+ leftm +":"+ lefts;}var div = document.getElementById("showtime2");setInterval(function(){
  181.                     div.innerHTML =showtime2();},1000);</script><div class="time"><script> 
  182.                     document.write("<span id=time></span>")setInterval("time.innerText=new Date().toLocaleString()",1000)</script></div></div></body></html>

预览地址

  1. [网站预览地址](https://ylishu.github.io/)

总结

以上就是今天要讲的内容，本文仅仅简单介绍了个人静态博客，而部署个人静态博客基本上是所有前端开发者必经的一个阶段。

标签： javascript 前端 css3
本文转载自: https://blog.csdn.net/qq_61719813/article/details/124096920
版权归原作者 黎子想写好代码 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【静态网页制作大作业——个人博客搭建（HTML+CSS+Javascript）】”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？