Web网页开发技术 个人博客主页MyPersonalBlog 大学编程作业(TUST天津科技大学2022年)

已于 2023-08-17 22:25:24 修改
阅读量475 收藏 2
点赞数 3
分类专栏： 源码分享 大学学习 文章标签： html css javascript 前端 vscode
于 2022-12-05 01:01:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40734758/article/details/128179877
版权

Web 网页开发技术 个人博客主页 MyPersonalBlog 大学编程作业(TUST 天津科技大学 2022 年)

一、项目简介

本个人博客主页 MyPersonalBlog ，我使用了 HTML、CSS、JavaScript 等来制作，实现了博客主页和登录页，分别以首页、关于我、我的热爱、技术栈、分享和留言为主要内容，博客整体采用响应式交互，内容丰富多彩，给人以简洁清爽，活泼跳脱之感。通过这次 Web 网页开发技术的实践，我巩固了 Web 网页开发基础知识，熟练应用了 HTML、CSS、JavaScript。

这个项目是我大三写的，现在回顾已经非常粗糙，分享出来一方面希望可以帮助初学者，另一方面希望能让同学们可以从目前大学中普遍毫无价值的形式主义作业中解脱出来，更加高效地学习优质计算机知识和主流编程技术，一起发扬开源精神，感受互联网技术的美好愿景。

二、项目界面

MyPersonalBlog1

MyPersonalBlog2

MyPersonalBlog3

MyPersonalBlog4

MyPersonalBlog5

MyPersonalBlog6

MyPersonalBlog7

MyPersonalBlog8

三、项目源码

  1. index.html：
<!DOCTYPE html>
<html lang="en">
  <!-- lang 属性规定元素内容的语言 -->
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- http-equiv 属性提供了 content 属性的信息/值的 HTTP 头，http-equiv 属性可用于模拟一个 HTTP 响应头 -->
    <!-- 该meta标签告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面 -->

    <title>末影小黑xh的个人博客</title>

    <meta name="keywords" content="HTML,CSS,JavaScript" />
    <meta name="description" content="一个Web开发技术综合报告的网页。" />
    <meta name="author" content="MYXHcode" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 该meta标签的作用是让当前viewport的宽度等于设备的宽度 -->
    <!-- 网页标题图标 -->

    <link rel="icon" href="../images/大户爱.svg" type="images/x-icon" />
    <!-- 导入全局样式 -->

    <link rel="stylesheet" href="../CSS/index.css" />
    <!-- 时钟 -->

    <script src="../JavaScript/time.js"></script>
  </head>

  <body>
    <div class="blank">
      <a href="#top"
        ><img src="../images/上箭头.svg" alt="上箭头" title="点击回到顶部"
      /></a>
    </div>

    <div class="top">
      <div class="big-box">
        <img src="../images/大户爱.png" alt="大户爱" />
        <div class="h-1">前端开发</div>
        <div class="h-2">后端开发</div>
        <div class="h-3">游戏制作</div>
        <div class="a1"></div>
        <div class="a2"></div>
        <div class="a3"></div>
        <div class="a4"></div>
      </div>

      <ul class="list">
        <li><a href="##">首页</a></li>
        <li><a href="#gyw">关于我</a></li>
        <li><a href="#hobby">我的热爱</a></li>
        <li class="logo"><img src="../images/music.svg" alt="music" /></li>
        <li><a href="#jsz">技术栈</a></li>
        <li><a href="#wdfx">分享</a></li>
        <li><a href="#lyq">留言</a></li>
      </ul>

      <div class=" top-nav-down">
        <a href="#two" title="点击继续查看"><p></p></a>
      </div>
    </div>

    <header class="first" id="two">
      <!-- header 标签定义文档或者文档的一部分区域的页眉 -->
      <!-- 添加背景音乐 -->
      <audio
        src="../music/林文宇 - Stay Gold (翻奏 宇多田ヒカル).mp3"
        autoplay
        hidden
        loop
      ></audio>
      <!-- header头部区域end -->

      <div class="box">
        <!-- 计时器 -->
        <div class="time">
          <p>时钟</p>
          <p class="time-text">请珍惜美好的时间！</p>
          <span id="demo"> </span>
          <p class="p-text">
            在夜空所有星星熄灭的时候，所有梦想、所有溪流，都能汇入同一片大海中，那时我们终会相见。
          </p>
        </div>

        <!-- banner轮播图区域 -->
        <div class="swiper">
          <input type="radio" name="btn" id="btn1" />
          <input type="radio" name="btn" id="btn2" />
          <input type="radio" name="btn" id="btn3" />
          <input type="radio" name="btn" id="btn4" />
          <input type="radio" name="btn" id="btn5" />
          <input type="radio" name="btn" id="btn6" />
          <input type="radio" name="btn" id="btn7" />
          <input type="radio" name="btn" id="btn8" />
          <input type="radio" name="btn" id="btn9" />
          <input type="radio" name="btn" id="btn10" />
          <input type="radio" name="btn" id="btn12" />
          <input type="radio" name="btn" id="btn13" />
          <input type="radio" name="btn" id="btn14" checked />

          <label for="btn1"></label>
          <label for="btn2"></label>
          <label for="btn3"></label>
          <label for="btn4"></label>
          <label for="btn5"></label>
          <label for="btn6"></label>
          <label for="btn7"></label>
          <label for="btn8"></label>
          <label for="btn9"></label>
          <label for="btn10"></label>
          <label for="btn12"></label>
          <label for="btn13"></label>
          <label for="btn14"></label>

          <ul class="banner">
            <li><img src="../images/001.webp" alt="主页轮播配图001" /></li>
            <li><img src="../images/002.webp" alt="主页轮播配图002" /></li>
            <li><img src="../images/003.webp" alt="主页轮播配图003" /></li>
            <li><img src="../images/004.webp" alt="主页轮播配图004" /></li>
            <li><img src="../images/005.webp" alt="主页轮播配图005" /></li>
            <li><img src="../images/006.webp" alt="主页轮播配图006" /></li>
            <li><img src="../images/007.webp" alt="主页轮播配图007" /></li>
            <li><img src="../images/008.webp" alt="主页轮播配图008" /></li>
            <li><img src="../images/009.webp" alt="主页轮播配图009" /></li>
            <li><img src="../images/010.webp" alt="主页轮播配图010" /></li>
            <li><img src="../images/011.webp" alt="主页轮播配图011" /></li>
            <li><img src="../images/012.webp" alt="主页轮播配图012" /></li>
            <li><img src="../images/013.webp" alt="主页轮播配图013" /></li>
            <li><img src="../images/014.webp" alt="主页轮播配图014" /></li>
          </ul>
        </div>
        <!-- banner结束 -->

        <!-- 盒子右边start -->
        <div class="box-right">
          <div class="box-right-logo">
            <img src="../images/大户爱.png" alt="大户爱" />
          </div>

          <h3>末影小黑xh</h3>
          <p>签名：人生如逆旅，我亦是行人。</p>
          <p>求知若饥，虚心若愚。Stay hungry, stay foolish.</p>

          <hr />
          <h2>个人标签</h2>
          <ul class="lb">
            <li>Java</li>
            <li>Python</li>
            <li>C/C++</li>
            <li>Go</li>
            <li>C#</li>
            <li>Unity</li>
            <li>ACG</li>
            <li>指弹吉他</li>
            <li>Minecarft</li>
            <li>科幻小说</li>
          </ul>
        </div>
      </div>

      <div class="hd-footer">
        <ul class="list-box">
          <li>
            <img src="../images/1.jpg" alt="1" />
            <span>
              我可以一个人穿越雨和雨的间隙，去找寻比星辰还明亮萤火虫。
            </span>
            <br /><br />
            <p>2022年05月01日 08:00</p>
            <i class="icon-1"
              ><a href="##" alert="点赞成功"
                ><img src="../images/点赞.svg" alt="" /></a
            ></i>
          </li>

          <li>
            <img src="../images/2.jpg" alt="2" />
            <span>
              不止爱自己向阳的花朵，也要理解自己的孤独痛苦，爱这埋藏在泥土里的根茎。
            </span>
            <br /><br />
            <p>2022年05月02日 08:05</p>
            <i class="icon-1"
              ><a href="##"><img src="../images/点赞.svg" alt="" /></a
            ></i>
          </li>

          <li>
            <img src="../images/3.jpg" alt="3" />
            <span>
              智慧使人自然而然的醒悟，信仰反易使人人于偏执与热狂之途。
            </span>
            <br /><br />
            <p>2022年05月03日 08:10</p>
            <i class="icon-1"
              ><a href="##"><img src="../images/点赞.svg" alt="" /></a
            ></i>
          </li>

          <li>
            <img src="../images/4.jpg" alt="4" />
            <span>
              在人生的道路上没有比被弃置不顾、被彻底忘却更痛苦的了，那是冰冷阴湿的黑夜、是狭窄深陷的冰窖，那是与死比邻的生。
            </span>
            <br /><br />
            <p>2022年05月04日 08:15</p>
            <i class="icon-1"
              ><a href="##"><img src="../images/点赞.svg" alt="" /></a
            ></i>
          </li>
        </ul>
      </div>

      <div class=" hd-footer-end">
        <a href="#gyw" title="点击继续查看">
          <p></p>
        </a>
      </div>
    </header>
    <!-- 首页end -->

    <!-- 关于我start -->
    <div id="gyw">
      <div class="content">
        <h1>Hi!朋友你好！</h1>
        <h2>欢迎来到我的个人博客。</h2>
        <h3>所谓有朋自远方来，不亦乐乎。</h3>
        <h4>进来的请一定要耐心收看完这段文字哦！(๑╹ヮ╹๑)ﾉＩ Lᵒᵛᵉᵧₒᵤ❤</h4>
        <h5>容我自我介绍一番，我，00后，一个热爱编程的在校大学生。</h5>
        <h6>
          第一次接触编程是在大一，到现在已经差不多两年，中间一路坎坷，也有所收获！
        </h6>
        <p>
          求知若饥，虚心若愚。Stay hungry, stay foolish.是对自己说过最多的话。
        </p>
        <p>热衷于探索世界。</p>
        <p>梦想是成为独立游戏制作人。</p>
        <p>如果消灭bug是一个痛苦的过程，那么学习一定是一个享受的过程。</p>
        <p>要学会享受这个学习的过程。</p>
        <p>幸运的是，我自己拥有积极的心态，心态对一个人作用真的是很重要。</p>
        <p>希望各位还在坚持的朋友也能保持乐观下去，积极面对明天。</p>
        <p>
          祝还在拼搏的各位，不仅能消灭代码中的bug，还能轻易消灭生活的bug，开心过好每一天。
        </p>
        <p>(๑ت๑)</p>
      </div>

      <div class="gyw-footer">
        <ul class="gyw-img">
          <li><img src="../images/gyw-1.jpg" alt="gyw-1" /></li>
          <li><img src="../images/gyw-2.jpg" alt="gyw-2" /></li>
          <li><img src="../images/gyw-3.jpg" alt="gyw-3" /></li>
          <li><img src="../images/gyw-4.jpg" alt="gyw-4" /></li>
        </ul>
      </div>
    </div>
    <!-- 关于我end -->

    <!-- 我的热爱start -->
    <div id="hobby">
      <div class="box1">
        <!-- 上半部分盒子 -->
        <div class="box-top1">
          <div class="top-left">
            <span></span>
            <i><img src="../images/大户爱.png" alt="大户爱" /></i>
            <hr />
            <h1>ACG</h1>
          </div>

          <div class="content">
            <h2>不算资深的动漫迷</h2>
            <p>
              我喜欢的动漫有紫罗兰的永恒花园、气蛋物语、致不灭的你、re0、月色真美、声之形。
            </p>
          </div>
        </div>

        <div class="box-top2">
          <div class="top-right">
            <i><img src="../images/hobby-2.png" alt="hobby-2" /></i>
            <hr />
            <h1>指弹吉他</h1>
          </div>

          <div class="content">
            <h2>唯有音乐不可辜负</h2>
            <p>
              我喜欢的音乐有星辰不坠落、海边旅馆的一夜、光、带上她的眼睛、Stay
              Gold、Santa Monica Dream。
            </p>
          </div>
        </div>
      </div>

      <!-- 下半部分盒子 -->
      <div class="box2">
        <div class="box-bottom1">
          <div class="box-bottom-left">
            <span></span>
            <i><img src="../images/hobby-3.png" alt="hobby-3" /></i>
            <hr />
            <h1>Minecarft</h1>
          </div>

          <div class="content">
            <h2>独立游戏爱好者</h2>
            <p>我喜欢的游戏有Minecarft、光遇、原神、奇异人生。</p>
          </div>
        </div>

        <div class="box-bottom2">
          <div class="box-bottom-right">
            <span></span>
            <i><img src="../images/hobby-4.png" alt="hobby-4" /></i>
            <hr />
            <h1>科幻小说</h1>
          </div>

          <div class="content">
            <h2>三体</h2>
            <p>我喜欢的书籍有三体、带上她的眼睛、你一生的故事、挪威的森林。</p>
          </div>
        </div>
      </div>
    </div>
    <!-- /* 我的热爱end */ -->

    <!-- 技术栈start -->
    <div id="jsz">
      <ol class="card-list">
        <li>
          <img src="../images/jsz-1.jpg" alt="jsz-1" />
          <div class="up-1">
            <h1>HTML</h1>
          </div>
        </li>

        <li>
          <img src="../images/jsz-2.jpg" alt="jsz-2" />
          <div class="up-1">
            <h1>CSS</h1>
          </div>
        </li>

        <li>
          <img src="../images/jsz-3.jpg" alt="jsz-3" />
          <div class="up-1">
            <h1>JavaScript</h1>
          </div>
        </li>

        <li>
          <img src="../images/jsz-4.jpg" alt="jsz-4" />
          <div class="up-1">
            <h1>框架</h1>
          </div>
        </li>
      </ol>

      <div class="lxt">
        <a href="../images/前端学习路线图.jpg" target="_blank">
          <h1 title="点击查看前端学习路线">»»前端学习路线图</h1>
        </a>
      </div>
    </div>

    <!-- 留言 -->
    <footer class="ly" id="lyq">
      <!-- footer 标签定义文档或者文档的一部分区域的页脚 -->
      <h1>给我留言</h1>
      <div class="fc-1">
        <img src="../images/风车.svg" alt="风车" />
      </div>

      <div class="icon">
        <a href="https://space.bilibili.com/237724969"
          ><img
            src="../images/BiliBili.svg"
            alt="BiliBili"
            title="点击打开我的B站主页"
        /></a>
        <img src="../images/GitHup.svg" alt="GitHup" title="个人GitHub" />
        <img src="../images/微博.svg" alt="微博" title="微博" />
        <img src="../images/Youtube.svg" alt="Youtube" title="YouTube" />
        <img src="../images/QQ.svg" alt="" title="QQ" />

        <!-- 微信二维码 -->
        <li class="sanjiao">
          <img src="../images/微信.svg" alt="微信" title="个人微信" />
          <div class="qq"></div>
        </li>
      </div>

      <a href="https://space.bilibili.com/237724969"><p>更多源码</p></a>
    </footer>
  </body>
</html>
  1. login.html：
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>登录页面</title>

    <link rel="icon" href="../images/登录.svg" type="images/x-icon" />
    <link rel="stylesheet" href="../CSS/login.css" />

    <script>
      function myFunction() {
        const x = document.getElementById("demo").value;
        if (x === "" || isNaN(x)) {
          alert("请输入纯数字密码！");
        }
      }
    </script>
  </head>
  <body>
    <script>
      window.alert("请登录");
    </script>

    <audio
      src="../music/林文宇 - Stay Gold (翻奏 宇多田ヒカル).mp3"
      autoplay="autoplay"
    ></audio>

    <div id="login-box">
      <h1>登录</h1>
      <div class="form" alert>
        <div class="item">
          <i><img src="../images/用户名.svg" alt="用户名" /></i>
          <input
            type="text"
            placeholder="用户名"
            title="请输入用户名"
            required
          />
        </div>

        <div class="item">
          <i><img src="../images/密码.svg" alt="密码" /></i>
          <input
            type="password"
            placeholder="密码"
            title="请输入密码"
            id="demo"
            required
          />
        </div>
      </div>

      <a href="index.html"
        ><button type="button" onclick="myFunction()">登录</button></a
      >
    </div>
  </body>
</html>
  1. index.css：
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  color: rgb(255, 255, 255);
}

body,
html {
  background: url(../images/网页背景.webp) no-repeat;
  background-size: 100% 100%;
  /* 固定背景 */
  background-attachment: fixed;
}

/* 头部 */
.top {
  position: relative;
  width: 1600px;
  height: 940px;
  /* 居中展示 */
  margin: 10px auto;
}

/* 头部旋转动画盒子 */
.top > .big-box {
  display: flex;
  position: relative;
  top: 50%;
  left: 50%;
  /*  */
  transform: translate(-50%, -65%);
  width: 500px;
  height: 500px;
}

/* 头像位置和大小 */
.top > .big-box > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

/* h1标题设置 */
.top .big-box div:nth-child(-n + 3) {
  position: absolute;
  width: 100px;
  height: 35px;
  line-height: 35px;
  border-radius: 15px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  box-shadow: 0 0 2px 2px rgb(255, 255, 255);
  background-color: rgb(77, 219, 255);
  z-index: 1;
}

.top .big-box .h-3 {
  position: absolute;
  top: 80%;
  left: 55%;
  width: 100px;
  height: 35px;
  line-height: 35px;
  border-radius: 15px;
  font-size: 20px;
  color: #fff;
  /* 标题阴影 */
  box-shadow: 0 0 2px 2px rgb(255, 255, 255);
  /* 让小标题最上层展示 */
  z-index: 1;

  text-align: center;
  background-color: rgb(67, 171, 255);
}

/* 对头像旁边的标题进行定位 */
.top > .big-box > div:nth-child(2) {
  left: 64%;
  top: 24%;
}

.top > .big-box > div:nth-child(3) {
  left: 7%;
  top: 29%;
}

/* 导航菜单动画效果 */
.top > .big-box > .a1 {
  position: absolute;
  top: 27%;
  left: 27%;
  width: 220px;
  height: 220px;
  border: 3px solid transparent;
  border-top-color: #ff1010;
  border-bottom-color: #ff4d4d;
  border-radius: 50%;
  /* 规定动画名称 时间 延迟（这里延迟自上往下减少，让动画有错落感）匀速 无限循环 */
  animation: spin 2.7s 1s linear infinite;
}

.top > .big-box > .a2 {
  position: absolute;
  top: 25%;
  left: 23%;
  width: 260px;
  height: 260px;
  border: 3px solid transparent;
  border-left-color: #ff4111;
  border-right-color: #ffeb38;
  border-radius: 50%;
  animation: spin 2.8s 0.6s linear infinite;
}

.top > .big-box > .a3 {
  position: absolute;
  top: 21%;
  left: 20%;
  width: 300px;
  height: 300px;
  border: 3px solid transparent;
  border-top-color: #ffd447;
  border-bottom-color: #3bdfee;
  border-radius: 50%;
  animation: spin-2 3s 0.4s linear infinite;
}

.top > .big-box > .a4 {
  position: absolute;
  top: 16%;
  left: 14%;
  width: 350px;
  height: 350px;
  border: 3px solid transparent;
  border-left-color: #53ff6a;
  border-right-color: #ff41c6;
  border-radius: 50%;
  animation: spin-2 3.4s 0.2s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-2 {
  to {
    transform: rotate(360deg);
  }
}

.list {
  display: flex;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 80px;
  justify-content: center;
  align-items: center;
  list-style: none;
  border-bottom: #fff 3px solid;
}

.list li {
  position: relative;
  /* 让盒子里的每个li平分宽度 */
  flex: 1;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 12px;
  color: tomato;
}

.list li .logo {
  /* 中间的音乐盘图标大小 */
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.list li a {
  /* 导航栏a标签的文字颜色 */
  color: #fff;
}

.list li:hover a {
  /* 鼠标滑过a标签样式变化 */
  color: rgb(242, 101, 255);
  font-size: 15px;
  transition: 0.1s;
}

.list .logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 规定动画名称 时间 匀速执行 无限循环 */
  animation: rotate 5s linear infinite;
}

/* 设置动画 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 鼠标滑过样式 */
/* 用：not反选，鼠标滑过图片css没动画 */
.list li:not(.logo)::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 7px;
  background-color: rgb(210, 32, 255);
  transform-origin: bottom right;
  transform: scaleX(0);
  transition: transform ease 0.5s;
}

.list li:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* 回到顶部按钮 */
.blank {
  position: fixed;
  top: 80%;
  right: 3%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.blank:hover {
  box-shadow: 0 0 5px 5px #fff;
}

.top-nav-down {
  /* 设置图标大小 */
  position: absolute;
  bottom: 10%;
  left: 0;
  width: 1600px;
  height: 40px;
}

/* 设置下导航图标 */
.top-nav-down p {
  /* 水平垂直居中 */
  margin: auto;
  width: 40px;
  height: 40px;
  background: url(../images/收缩下箭头.svg) no-repeat;
  /* 规定箭头上下跳动动画的名称 匀速执行 时间 无限循环 */
  animation: top-nav linear 2.3s infinite;
}

/* 按钮动画 */
@keyframes top-nav {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(15px);
  }

  50% {
    transform: translateY(0px);
  }

  75% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* 头部导航区域end */

/* banner 轮播图区域 */
/* 右边个人卡片区域 */
.first {
  width: 1600px;
  height: 1100px;
  margin: 200px auto;
  /* 边框阴影 */
  box-shadow: -4px 0 5px rgb(237, 35, 255);
}

.box {
  position: relative;
  width: 1600px;
  height: 600px;
  margin: 200px auto;
}

.box .box-right {
  position: absolute;
  top: 15%;
  right: 20px;
  /* 卡片大小 */
  width: 295px;
  height: 580px;
  border-radius: 30px;
  background-color: rgb(0, 0, 0, 0.4);
  transition: 0.3s;
}

.box > .box-right > .box-right-logo {
  width: 80px;
  height: 80px;
  margin: 20px auto;
}

.box > .box-right > .box-right-logo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.box > .box-right h3 {
  text-align: center;
  color: #ff4d07;
}

.box > .box-right p {
  text-align: center;
  font-size: 15px;
  margin-top: 7px;
}

.box > .box-right h2 {
  text-align: center;
}

.box > .box-right .lb {
  margin: 18px 50px;
  font-size: 20px;
  font-family: "微软雅黑", serif;
}

/* 鼠标滑过缩放阴影 */
.box > .box-right:hover {
  transform: scale(1.01);
  box-shadow: 0 0 7px 5px rgb(85, 96, 255);
}

.box > .time:hover {
  transform: scale(1.01);
  box-shadow: 0 0 7px 5px rgb(255, 230, 230);
}

/* 时间区域demo */
.box .time {
  position: absolute;
  top: 15%;
  left: 20px;
  width: 295px;
  height: 580px;
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

.time p:nth-child(1) {
  font-size: 40px;
  text-align: center;
}

.time .p-text {
  font-size: 25px;
  text-align: center;
  margin-top: 20px;
  color: white;
}

.time .time-text {
  color: white;
  font-family: serif;
  text-align: center;
}

.time #demo {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(46, 206, 255);
  font-size: 50px;
}

/* banner轮播图start */
.swiper {
  /* 相对定位 */
  position: relative;
  top: 15%;
  width: 900px;
  height: 580px;
  /* 超出盒子隐藏 */
  overflow: hidden;
  margin: 10px auto;
  border-radius: 10px;
}

input {
  /* 将input的小点去掉 */
  display: none;
}

label {
  /* 设置小圆点的大小 */
  z-index: 1;
  position: absolute;
  bottom: 30px;
  width: 14px;
  height: 14px;
  border: 1px solid rgb(240, 95, 50);
  /* 小圆点 */
  border-radius: 50%;
  background-color: #fff;
}

label[for="btn1"] {
  left: 18%;
}

label[for="btn2"] {
  left: 23%;
}

label[for="btn3"] {
  left: 28%;
}

label[for="btn4"] {
  left: 33%;
}

label[for="btn5"] {
  left: 38%;
}

label[for="btn6"] {
  left: 43%;
}

label[for="btn7"] {
  left: 48%;
}

label[for="btn8"] {
  left: 53%;
}

label[for="btn9"] {
  left: 58%;
}

label[for="btn10"] {
  left: 63%;
}

label[for="btn12"] {
  left: 68%;
}

label[for="btn13"] {
  left: 73%;
}

label[for="btn14"] {
  left: 78%;
}

.banner {
  /* 让li水平排列 */
  display: flex;
  /* 自动计算宽度 */
  width: calc(900px * 13);
  /* 过渡时间 */
  transition: all 1s;
  border-radius: 10px;
}

.banner img {
  width: 900px;
  height: 580px;
}

.banner > li {
  list-style-type: none;

  animation: transform linear 26s forwards;
}

@keyframes transform {
  0% {
    transform: translateX(0px);
  }

  18% {
    transform: translateX(900px);
  }

  /* 设置同样的值让图片停留一会 */
  23% {
    transform: translateX(900px);
  }

  28% {
    transform: translateX(1800px);
  }

  33% {
    transform: translateX(1800px);
  }

  38% {
    transform: translateX(2800px);
  }

  43% {
    transform: translateX(2800px);
  }

  48% {
    transform: translateX(3600px);
  }

  53% {
    transform: translateX(3600px);
  }

  58% {
    transform: translateX(4500px);
  }

  63% {
    transform: translateX(4500px);
  }

  68% {
    transform: translateX(5400px);
  }

  73% {
    transform: translateX(5400px);
  }

  78% {
    transform: translateX(6300px);
  }

  83% {
    transform: translateX(6300px);
  }
}

#btn1:checked ~ .banner {
  margin-left: 0;
}

#btn2:checked ~ .banner {
  margin-left: -900px;
}

#btn3:checked ~ .banner {
  margin-left: calc(-900px * 2);
}

#btn4:checked ~ .banner {
  margin-left: calc(-900px * 3);
}

#btn5:checked ~ .banner {
  margin-left: calc(-900px * 4);
}

#btn6:checked ~ .banner {
  margin-left: calc(-900px * 5);
}

#btn7:checked ~ .banner {
  margin-left: calc(-900px * 6);
}

#btn8:checked ~ .banner {
  margin-left: calc(-900px * 7);
}

#btn9:checked ~ .banner {
  margin-left: calc(-900px * 8);
}

#btn10:checked ~ .banner {
  margin-left: calc(-900px * 9);
}

#btn12:checked ~ .banner {
  margin-left: calc(-900px * 10);
}

#btn13:checked ~ .banner {
  margin-left: calc(-900px * 12);
}

#btn14:checked ~ .banner {
  margin-left: calc(-900px * 13);
}

#btn1:checked ~ label[for="btn1"] {
  background-color: tomato;
}

#btn2:checked ~ label[for="btn2"] {
  background-color: tomato;
}

#btn3:checked ~ label[for="btn3"] {
  background-color: tomato;
}

#btn4:checked ~ label[for="btn4"] {
  background-color: tomato;
}

#btn5:checked ~ label[for="btn5"] {
  background-color: tomato;
}

#btn6:checked ~ label[for="btn6"] {
  background-color: tomato;
}

#btn7:checked ~ label[for="btn7"] {
  background-color: tomato;
}

#btn8:checked ~ label[for="btn8"] {
  background-color: tomato;
}

#btn9:checked ~ label[for="btn9"] {
  background-color: tomato;
}

#btn10:checked ~ label[for="btn10"] {
  background-color: tomato;
}

#btn12:checked ~ label[for="btn12"] {
  background-color: tomato;
}

#btn13:checked ~ label[for="btn13"] {
  background-color: tomato;
}

#btn14:checked ~ label[for="btn14"] {
  background-color: tomato;
}

/* 底部点赞卡片 */
.hd-footer {
  width: 1600px;
  height: 250px;
  margin: 20px auto;
}

.hd-footer > .list-box {
  /* flex布局使得子元素水平排列 */
  display: flex;
  list-style: none;
}

.hd-footer > .list-box li {
  position: relative;
  /* li平分空间 */
  flex: 1;
  width: 360px;
  height: 208px;
  margin: 8px 10px;
}

/* 设置卡片背景颜色 */
.hd-footer > .list-box li:nth-child(1) {
  background: linear-gradient(
    to right,
    rgb(202, 20, 193, 0.9),
    rgb(255, 93, 228, 0.9)
  );
  box-shadow: 2px 5px 5px rgb(164, 58, 250);
}

.hd-footer > .list-box li:nth-child(2) {
  background: linear-gradient(
    to right,
    rgb(253, 39, 23, 0.9),
    rgb(248, 167, 16, 0.9)
  );
  box-shadow: 2px 5px 5px rgb(164, 58, 250);
}

.hd-footer > .list-box li:nth-child(3) {
  background: linear-gradient(
    to right,
    rgb(255, 42, 106, 0.9),
    rgb(255, 97, 137, 0.9)
  );
  box-shadow: 2px 5px 5px rgb(164, 58, 250);
}

.hd-footer > .list-box li:nth-child(4) {
  background: linear-gradient(
    to right,
    rgb(155, 255, 116, 0.9),
    rgb(48, 178, 238, 0.9)
  );
  box-shadow: 2px 5px 5px rgb(164, 58, 250);
}

.hd-footer > .list-box li img {
  position: relative;
  top: -40px;
  left: 15px;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.hd-footer > .list-box li span {
  margin-left: 3px;
  font-size: 22px;
  font-family: "宋体", serif;
  color: #fff;
}

.hd-footer > .list-box li p {
  margin-left: 5px;
  margin-bottom: 10%;
  font-size: 10px;
  color: #fff;
}

.hd-footer > .list-box li > .icon-1 img {
  width: 30px;
  height: 24px;
}

.hd-footer > .list-box li .icon-1 {
  position: absolute;
  top: 87%;
  right: 24%;
  width: 30px;
  height: 24px;
}

/* 首页底部按钮 */
.hd-footer-end {
  /* 设置图标大小 */
  margin: 100px auto;
  width: 1600px;
  height: 40px;
}

/* 设置下导航图标 */
.hd-footer-end p {
  /* 水平垂直居中 */
  margin: auto;
  width: 40px;
  height: 40px;
  background: url(../images/收缩下箭头.svg) no-repeat;
  /* 规定箭头上下跳动动画的名称 匀速执行 时间 无限循环 */
  animation: move linear 2.3s infinite;
}

/* 按钮动画 */
@keyframes move {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(15px);
  }

  50% {
    transform: translateY(0px);
  }

  75% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* 首页end */

/* 关于我start */
/* 百叶窗部分 */
#gyw {
  /* flex使得两个盒子水平排列 */
  display: flex;
  /* 水平反向排列，使得内容区在右边 */
  flex-direction: row-reverse;
  position: relative;
  margin: 200px auto;
  width: 1600px;
  height: 980px;
  /* 背景渐变色 */
  /* background: linear-gradient(to right, #ff6666, #66ccff); */
  background: rgb(0, 0, 0, 0.5);
  box-shadow: -4px 4px 5px rgb(237, 35, 255);
}

#gyw .content {
  width: 60%;
  /* 内容居中展示 */
  text-align: center;
}

#gyw .content p,
h1,
h2,
h3,
h4,
h5,
h6 {
  /* 设置字体上下间距和颜色 */
  margin-top: 30px;
  color: #fff;
}

/* 风车伪元素 */
#gyw .content::before {
  content: "";

  position: absolute;
  top: 2%;
  right: 2%;
  display: block;
  width: 40px;
  height: 40px;
  background: url(../images/风车.svg) no-repeat;
  background-size: 100% auto;
  /* 规定动画名称 匀速执行 时间 无限循环 */
  animation: fengche linear 1s infinite;
}

@keyframes fengche {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#gyw .gyw-footer {
  position: relative;
  width: 40%;
  height: 100%;
}

#gyw > .gyw-footer .gyw-img li {
  position: absolute;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  list-style: none;
  transition: 0.3s;
}

#gyw > .gyw-footer .gyw-img li img {
  width: 300px;
  height: 200px;
  border-radius: 10px;
}

#gyw > .gyw-footer .gyw-img li:nth-child(1) {
  left: 40px;
  top: 30px;
}

#gyw > .gyw-footer .gyw-img li:nth-child(2) {
  left: 400px;
  top: 250px;
}

#gyw > .gyw-footer .gyw-img li:nth-child(3) {
  left: 40px;
  top: 460px;
}

#gyw > .gyw-footer .gyw-img li:nth-child(4) {
  left: 400px;
  top: 677px;
}

#gyw > .gyw-footer .gyw-img li:hover {
  box-shadow: 0 0 5px 4px #2989f7;
  transform: scale(1.1);
}

/* 个人爱好区域hobby */
#hobby {
  width: 1600px;
  height: 940px;
  background: rgb(0, 0, 0, 0.5);
  box-shadow: -4px 4px 5px rgb(203, 33, 255);
  /* 居中展示 */
  margin: 50px auto;
}

#hobby > .box1 {
  display: flex;
  width: 1600px;
  height: 500px;
}

#hobby > .box1 .box-top1,
.box-top2 {
  display: flex;
  position: relative;
  flex: 1;
  margin: 2px;
}

/* 左边卡片 */
#hobby > .box1 > .box-top1 .top-left {
  position: absolute;
  top: 8%;
  left: 8%;
  width: 300px;
  height: 400px;
  /* background:linear-gradient( to bottom right,#c96446,#ff8147,#d1963d); */
  background: rgb(255, 88, 59, 0.9);

  border-radius: 15px;
  transition: 0.3s;
}

#hobby > .box1 > .box-top1 .top-left i::before {
  content: "";
  display: block;
  margin: 35px auto;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: url(../images/a_1.png) no-repeat;
  background-size: 100% auto;
  transition: 0.5s;
}

#hobby > .box1 > .box-top1 .top-left img {
  position: absolute;
  top: 12%;
  left: 26%;
  width: 145px;
  height: 145px;
  border-radius: 50%;
}

#hobby > .box1 > .box-top1 .top-left h1 {
  text-align: center;
}

/* hover */
#hobby > .box1 > .box-top1 .top-left i:hover::before {
  transform: rotate(360deg);
}

#hobby > .box1 > .box-top1 .top-left:hover {
  transform: scale(1.01);
  box-shadow: 0 0 6px 5px #ffffff;
}

#hobby > .box1 > .box-top1 .content {
  position: absolute;
  top: 8%;
  right: 10%;
  width: 300px;
  height: 400px;
  text-align: center;
}

#hobby > .box1 > .box-top1 .content p {
  margin-top: 10px;
  font-size: 18px;
  font-family: "微软雅黑", serif;
  color: rgb(255, 255, 255);
  line-height: 28px;
}

/* top右边卡片 */
#hobby > .box1 > .box-top2 .top-right {
  position: absolute;
  top: 8%;
  left: 8%;
  width: 300px;
  height: 400px;
  background-color: rgb(237, 104, 255, 0.9);
  border-radius: 13px;
}

#hobby > .box1 > .box-top2 .top-right i::before {
  content: "";
  display: block;
  margin: 35px auto;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: url(../images/a_2.png) no-repeat;
  background-size: 100% auto;
  transition: 0.5s;
}

#hobby > .box1 > .box-top2 .top-right img {
  position: absolute;
  top: 12%;
  left: 26%;
  width: 145px;
  height: 145px;
  border-radius: 50%;
}

#hobby > .box1 > .box-top2 .top-right h1 {
  text-align: center;
}

/* hover */
#hobby > .box1 > .box-top2 .top-right i:hover::before {
  transform: rotate(360deg);
}

#hobby > .box1 > .box-top2 .top-right:hover {
  transform: scale(1.01);
  box-shadow: 0 0 6px 5px #ffffff;
}

#hobby > .box1 > .box-top2 .content {
  position: absolute;
  top: 8%;
  right: 10%;
  width: 300px;
  height: 400px;
  text-align: center;
}

#hobby > .box1 > .box-top2 .content p {
  margin-top: 10px;
  font-size: 18px;
  font-family: "微软雅黑", serif;
  color: rgb(255, 255, 255);
  line-height: 40px;
}

/* 下半部分卡片 */
#hobby > .box2 {
  display: flex;
  width: 1600px;
  height: 500px;
}

#hobby > .box2 .box-bottom1,
.box-bottom2 {
  display: flex;
  position: relative;
  flex: 1;

  /* background-color: rgb(151, 144, 142); */
  margin: 2px;
}

/* bottom左边卡片 */
#hobby > .box2 > .box-bottom1 .box-bottom-left {
  position: absolute;
  top: 5%;
  left: 8%;
  width: 300px;
  height: 400px;
  background: linear-gradient(to bottom right, #d4799f, #add158, #27e4eb);
  border-radius: 15px;
  transition: 0.3s;
}

#hobby > .box2 > .box-bottom1 .box-bottom-left i::before {
  content: "";
  display: block;
  margin: 35px auto;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: url(../images/a_3.png) no-repeat;
  background-size: 100% auto;
  transition: 0.5s;
}

#hobby > .box2 > .box-bottom1 .box-bottom-left img {
  position: absolute;
  top: 12%;
  left: 26%;
  width: 145px;
  height: 145px;
  border-radius: 50%;
}

#hobby > .box2 > .box-bottom1 .box-bottom-left h1 {
  text-align: center;
}

/* hover */
#hobby > .box2 > .box-bottom1 .box-bottom-left i:hover::before {
  transform: rotate(360deg);
}

#hobby > .box2 > .box-bottom1 .box-bottom-left:hover {
  transform: scale(1.01);
  box-shadow: 0 0 6px 5px #ffffff;
}

#hobby > .box2 > .box-bottom1 .content {
  position: absolute;
  top: 8%;
  right: 10%;
  width: 300px;
  height: 400px;
  text-align: center;
}

#hobby > .box2 > .box-bottom1 .content p {
  margin-top: 10px;
  font-size: 18px;
  font-family: "微软雅黑", serif;
  color: rgb(255, 255, 255);
  line-height: 35px;
}

/* buttom右边卡片 */
#hobby > .box2 > .box-bottom2 .box-bottom-right {
  position: absolute;
  top: 5%;
  left: 8%;
  width: 300px;
  height: 400px;
  background-color: rgb(255, 185, 55, 0.95);
  border-radius: 13px;
}

#hobby > .box2 > .box-bottom2 .box-bottom-right i::before {
  content: "";
  display: block;
  margin: 35px auto;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: url(../images/a_4.png) no-repeat;
  background-size: 100% auto;
  transition: 0.5s;
}

#hobby > .box2 > .box-bottom2 .box-bottom-right img {
  position: absolute;
  top: 12%;
  left: 26%;
  width: 145px;
  height: 145px;
  border-radius: 50%;
}

#hobby > .box2 > .box-bottom2 .box-bottom-right h1 {
  text-align: center;
}

/* hover */
#hobby > .box2 > .box-bottom2 .box-bottom-right i:hover::before {
  transform: rotate(360deg);
}

#hobby > .box2 > .box-bottom2 .box-bottom-right:hover {
  transform: scale(1.01);
  box-shadow: 0 0 6px 5px #ffffff;
}

#hobby > .box2 > .box-bottom2 .content {
  position: absolute;
  top: 3%;
  right: 10%;
  width: 300px;
  height: 400px;
  text-align: center;
}

#hobby > .box2 > .box-bottom2 .content p {
  margin-top: 10px;
  font-size: 18px;
  font-family: "微软雅黑", serif;
  color: rgb(255, 255, 255);
  line-height: 40px;
}
/* 爱好hobby end */

/* 技术栈start */
#wdfx {
  width: 1600px;
  height: 940px;
  margin: 100px auto;
  background-color: rgb(0, 0, 0, 0.4);
  box-shadow: -5px 5px 5px rgb(237, 42, 255);
}

#jsz {
  position: relative;
  width: 1600px;
  height: 600px;
  margin: 100px auto;
  background-color: rgb(0, 0, 0, 0.4);
  box-shadow: 1px 1px 5px rgb(237, 42, 255);
}

/* 前端学习路线图 */
#jsz .lxt {
  position: absolute;
  top: -17%;
  left: 37%;
  width: 1600px;
  height: 100px;
}

#jsz .lxt h1 {
  /* 清除前面的样式污染 */
  margin: 0;
}

#jsz > .card-list {
  position: absolute;
  bottom: 0;
  /* flex布局让子元素水平排列 */
  display: flex;
  width: 1600px;
  height: 500px;
  list-style: none;
  justify-content: space-around;
  align-items: center;
}

#jsz .card-list li {
  position: relative;
  /* 让每个li平分空间 */
  width: 300px;
  height: 400px;
  text-align: center;

  line-height: 10px;
  border-radius: 10px;
  /* 隐藏遮罩层 */
  overflow: hidden;
}

#jsz .card-list li h1 {
  margin: 0; /* 前面的样式污染了 ,清除外边距*/
  line-height: 400px;
}

#jsz .card-list li img {
  width: 300px;
  height: 400px;
  border-radius: 10px;
}

/* 设置遮罩层的样式 */
#jsz .card-list li .up-1 {
  position: absolute;
  top: 400px;
  left: 0;
  width: 300px;
  height: 400px;
  background-color: rgb(0, 0, 0, 0.4);
  border-radius: 10px;
  transition: top 0.6s ease;
}

/* hover效果 */
#jsz .card-list li:hover .up-1 {
  top: 0;
}

#jsz .card-list li:hover img {
  transform: scale(1.3);
  transition: 1s;
}

/* 留言区 */
#lyq {
  position: relative;
  width: 1600px;
  height: 600px;
  background-color: rgba(91, 95, 97, 0.479);
  margin: 100px auto;
}

#lyq h1 {
  text-align: center;
  font-size: 50px;
  margin: 0;
}

#lyq .fc-1 {
  position: absolute;
  top: 3%;
  right: 1%;

  width: 48px;
  height: 48px;
}

#lyq .fc-1 img {
  width: 48px;
  height: 48px;
  animation: rotate linear 1.2s infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#lyq .icon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 900px;
  height: 200px;
  margin: 200px auto;
}

#lyq .icon img {
  display: block;
  margin-left: 10px;
  width: 250px;
  height: 80px;
  border-radius: 13px;
  /* box-shadow: 0 0 2px 2px rgba(110, 106, 106, 0.856); */
  transition: img ease 0.5s;
}

#lyq .icon img:hover {
  transform: translateY(-7px);
  transition: 0.5s;
  background-color: rgba(255, 255, 255, 0.877);
  box-shadow: 0 0 3px 3px rgb(240, 127, 255, 0.8);
  /* transform: scale(1.1); */
}

#lyq .icon .sanjiao {
  list-style: none;
  position: relative;
}

#lyq .icon .sanjiao .qq {
  position: absolute;
  top: 85px;
  right: 46px;
  width: 160px;
  /* height:160px; */
  height: 0;
  background: url("../images/微信二维码.png") no-repeat;
  background-size: 100% auto;
  transition-duration: 350ms;
}

#lyq .icon .sanjiao:hover .qq {
  height: 160px;
}
  1. login.css：
html,
body {
  width: 100%;
}

body {
  background: url(../images/网页背景.webp) no-repeat;
  background-size: 100% auto;
}

#login-box {
  width: 30%;
  height: 400px;
  margin: 15% auto 0;
  text-align: center;
  background: #00000090;
  padding: 20px 50px;
  border-radius: 10px;
}

/* 鼠标进入表单出现阴影 */
#login-box:hover {
  box-shadow: 0 0 5px 5px rgb(255, 44, 244);
}

#login-box h1 {
  color: #fff;
}

#login-box .form .item {
  position: relative;
  margin-top: 24px;
}

#login-box .form .item i {
  position: absolute;
  top: 8%;
  left: 26%;
}

#login-box .form .item input {
  width: 180px;
  font-size: 18px;
  border: 0;
  border-bottom: 2px solid #fff;
  padding: 5px 10px;
  background: rgb(0, 0, 0, 0.3);
  color: #fff;
}

#login-box .form .item input:focus {
  box-shadow: 0 0 5px 5px rgb(255, 44, 244);
}

#login-box button {
  margin-top: 15px;
  width: 140px;
  height: 40px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background-image: linear-gradient(to right, #25d5db, #bb43eb);
  border: 0;
  border-radius: 15px;
}
  1. time.js：
const myVar = setInterval(function () {
  myTimer();
}, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

四、交流学习

互联网开源精神需要大家一起互相交流学习，互相支持奉献。欢迎大家与我友好交流。

加我 QQ 好友获取所有项目源码和项目文档，感谢大家的支持！

末影小黑xh
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
个人博客系统 web开发
02-12
这是一个用vs2010开发的个人博客系统，采用三层模式，数据库用SQL server 2005
web个人博客
qq_42105144的博客
11-30 1246
项目时间：2018/05/21– 2018/06/13 项目简介： 博客的首页，详情页，列表页； 页面侧边栏：分类、归档、标签云； 评论、阅读量、自动生成文章摘要功能； 完善的分页效果、RSS订阅、全文检索及搜索关键词高亮。 支持 Markdown 语法和代码高亮； 开发环境: Python 版本为 3.6.3（64 位）；Django 版本为 1.10.6；虚拟环境Virtuale...
web-个人博客
m0_58813405的博客
01-02 792
实验，div+css
javaweb搭建简易个人博客blog cat
01-17
一个javaweb搭建的个人博客，前台采用bootstrap等js插件完成，后台基于maven管理ssm框架搭建，前台访问界面:/blog-web/index.jsp,后台访问界面/blog-web/admin.jsp
个人博客主页制作
12-26
个人博客主页制作 web前端
数据库应用课程设计 教学管理系统 大学编程作业(TUST天津科技大学2022年)
03-28
这个项目是我大三写的，现在回顾已经非常粗糙，分享出来一方面希望可以帮助初学者，另一方面希望能让同学们可以从目前大学中普遍毫无价值的形式主义作业中解脱出来，更加高效地学习优质计算机知识和主流编程技术，...
移动应用开发技术项目 便签 APP 大学编程作业（TUST 天津科技大学 2023 年）
最新发布
06-23
这个项目是我大三写的，现在回顾已经非常粗糙，分享出来一方面希望可以帮助初学者，另一方面希望能让同学们可以从目前大学中普遍毫无价值的形式主义作业中解脱出来，更加高效地学习优质计算机知识和主流编程技术，...
数据结构课程设计 停车场管理系统 大学编程作业（TUST 天津科技大学 2022年）
12-05
这个项目是我大三写的，现在回顾已经非常粗糙，分享出来一方面希望可以帮助初学者，另一方面希望能让同学们可以从目前大学中普遍毫无价值的形式主义作业中解脱出来，更加高效地学习优质计算机知识和主流编程技术，...
web前端课设（个人博客）
qimeng54321的博客
12-05 1916
本次所写的内容仅仅包括，Javascript,html,css,JQuery四项内容，纯前端，无后端。写得马马虎虎，如果不是太嫌弃的话，就进来看看吧。（源码下载链接放在评论区下方，有意者可取）
【Web 三件套】个人简单博客系统页面搭建（附源码）
吞吞吐吐大魔王的博客
02-20 4万+
文章目录1. 成品展示2. 知识准备3. 博客系统页面搭建3.1 基本介绍3.2 博客列表页3.3 博客详情页3.4 博客登录页3.5 博客编辑页3.6 公共页面样式3.7 markdown 编辑器引入4. 总结 1. 成品展示 以下为个人搭建的一个简单博客系统页面，以后会不断改进，并且与后端结合，形成一个完整的博客系统 2. 知识准备 该博客系统页面是由 HTML + CSS + JavaScript 搭建的，如果没有了解过这些知识的友友，可以通过本人之前写好的几篇相关文章入门 文章一：《超多动图带
个人博客-javaWeb项目
weixin_44252126的博客
08-14 1457
个人博客项目后端实现
HTML+CSS篮球静态网页设计（web前端网页制作课作业）NBA杜兰特篮球运动网页
HTML网页设计
08-11 1705
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；......
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
适合做个人博客网站的一套静态页面模板，非常不错哦
南滨月亮的博客
05-19 8148
适合做个人博客的一套静态页面，非常不错哦 文件结构： 解压后运行index.html，涵盖所有模块页面，只要结合java+DB就可以开发一个个人博客。 原地址：http://www.zuidaima.com/share/1836724810697728.htm csdn下载:https://download.csdn.net/download/qq_38837004/1042413...
制作简易的个人主页(代码笔记）
double_sweet1的博客
11-22 3万+
//html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="This is a testing demo page"> <meta name="keywords" content...
24 Web进阶 基于ThinkPHP的简易个人博客
一夜飘零
08-21 8550
什么是ThinkPHP 一款基于PHP的后端框架   PHP基础：http://www.runoob.com/php/php-tutorial.html ThinkPHP官网（中国人开发的PHP框架）：http://www.thinkphp.cn/   其他流行的PHP框架： CI：http://codeigniter.org.cn/ Yii：http://www.yiiframe...
The import com.tust.tools.bean.GPmaichu cannot be resolved
06-08
这个错误通常表示您的代码中缺少某个依赖项，或者缺少必要的类文件。您可以尝试以下步骤来解决这个问题： 1. 确认您的代码中是否正确导入了所需的类或包。您可以检查您的 import 语句是否正确，并且您所需的类或包...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

末影小黑xh

感谢朋友们对我的支持！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值