Web 网页开发技术 个人博客主页 MyPersonalBlog 大学编程作业(TUST 天津科技大学 年)
Web 网页开发技术 个人博客主页 MyPersonalBlog 大学编程作业(TUST 天津科技大学 年) 一、项目简介二、项目界面三、项目源码四、交流学习一、项目简介
本个人博客主页 MyPersonalBlog ，我使用了 HTML、CSS、JavaScript 等来制作，实现了博客主页和登录页，分别以首页、关于我、我的热爱、技术栈、分享和留言为主要内容，博客整体采用响应式交互，内容丰富多彩，给人以简洁清爽，活泼跳脱之感。通过这次 Web 网页开发技术的实践，我巩固了 Web 网页开发基础知识，熟练应用了 HTML、CSS、JavaScript。
这个项目是我大三写的，现在回顾已经非常粗糙，分享出来一方面希望可以帮助初学者，另一方面希望能让同学们可以从目前大学中普遍毫无价值的形式主义作业中解脱出来，更加高效地学习优质计算机知识和主流编程技术，一起发扬开源精神，感受互联网技术的美好愿景。
二、项目界面
三、项目源码
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 标签定义文档或者文档的一部分区域的页眉 --><!-- 添加背景音乐 --><audiosrc="../music/林文宇 - Stay Gold (翻奏 宇多田ヒカル).mp3"autoplayhiddenloop></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>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>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>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>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>我喜欢的音乐有星辰不坠落、海边旅馆的一夜、光、带上她的眼睛、StayGold、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="/237724969"><imgsrc="../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="/237724969"><p>更多源码</p></a></footer></body></html>
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><audiosrc="../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><inputtype="text"placeholder="用户名"title="请输入用户名"required/></div><div class="item"><i><img src="../images/密码.svg" alt="密码" /></i><inputtype="password"placeholder="密码"title="请输入密码"id="demo"required/></div></div><a href="index.html"><button type="button" onclick="myFunction()">登录</button></a></div></body></html>
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;}
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;}
time.js：
const myVar = setInterval(function () {myTimer();}, 1000);function myTimer() {const d = new Date();document.getElementById("demo").innerHTML = d.toLocaleTimeString();}
四、交流学习
互联网开源精神需要大家一起互相交流学习，互相支持奉献。欢迎大家与我友好交流。
加我 QQ 好友获取所有项目源码和项目文档，感谢大家的支持！
