组装首页
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>组装首页</title><style>* {margin: 0;padding: 0;box-sizing: border-box;/* 禁止文本选中 */user-select: none;}/* 登录界面样式 */html,body {height: 100%;}body {display: flex;}.wrapper {width: 100%;background: linear-gradient(to bottom, #f7c750, #ff6d6d);background-image: url('file:///D:/img/开门.png');background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;}.container {width: 98%;height: 96%;display: flex;flex-direction: column;/* 设置为列方向 */position: relative;border-radius: 8px;margin: 2% auto;border: 1px solid rgba(255, 255, 255, 6);background-image: linear-gradient(to top left,rgba(255, 255, 255, 0.1),rgba(255, 255, 255, 0.1) 30%,rgba(255, 255, 255, 0));backdrop-filter: blur(4px);box-shadow:inset 4px 4px 3px rgba(255, 255, 255, 0.6),inset -4px -4px 3px rgba(0, 0, 0, 0.6);}.welcome-box {width: 100%;height: 50%;/* 调整高度 */position: absolute;/* 保持绝对定位 */left: 0;top: 0;transition: transform 0.5s ease-in-out;/* 保持过渡效果 */border: 5px;border-radius: 8px 8px 0 0;background-image: url('file:///D:/img/上.png');background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;box-shadow:inset 2px 2px 3px rgba(255, 255, 255, 0.6),inset -2px -2px 3px rgba(0, 0, 0, 0.6);text-shadow: 1px 1px 1px #100000;z-index: 9;}.container p,.container h1 {color: rgb(255, 255, 255);}.welcome-box h1 {margin-top: 45px;text-align: center;letter-spacing: 5px;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}.welcome-box p {height: 25px;line-height: 25px;text-align: center;margin: 10px 0;font-weight: bold;text-shadow: 2px 2px 2px #100000;}.image-container {width: 100px;height: 100px;margin: 10px auto;border-radius: 50%;overflow: hidden;background: rgba(75, 82, 88, 0.524);backdrop-filter: blur(5px);opacity: 0.9;box-shadow:inset 2px 2px 3px rgba(255, 255, 255, 0.6),inset -2px -2px 3px rgba(0, 0, 0, 0.6);text-shadow: 1px 1px 1px #100000;z-index: 99;}.image-container img {width: 100%;height: 100%;}.form-container {margin: 120px auto;}.form-container,.registration-container {flex: 1;height: 100%;margin: 40px auto;}.title-container {height: 50px;line-height: 4px;}.title-container h1 {text-align: center;letter-spacing: 5px;background-image: linear-gradient(to top left,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2) 30%,rgba(0, 0, 0, 0));box-shadow:inset 2px 2px 3px rgba(255, 255, 255, 0.6),inset -2px -2px 3px rgba(0, 0, 0, 0.6);text-shadow: 1px 1px 1px #100000;}.input-group {display: flex;flex-direction: column;align-items: center;}.container input {width: 60%;height: 25px;margin-bottom: 20px;text-indent: 4px;border-radius: 3px;box-shadow: 0px 0px 5px 5px #f7c750;}.form-container input[type="password"] {transform: translateY(20px);}.container input:focus {color: rgb(61, 185, 71);}.button-container {display: flex;justify-content: center;}.form-container .button-container {margin-top: 45px;}.container button {width: 100px;height: 30px;margin: 0 3px;border: none;border-radius: 3px;color: #fff;background-color: #2196F3;background-image: linear-gradient(to top left,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2) 30%,rgba(0, 0, 0, 0));box-shadow:inset 2px 2px 3px rgba(255, 255, 255, 0.6),inset -2px -2px 3px rgba(0, 0, 0, 0.6);text-shadow: 1px 1px 1px #100000;}.register-btn {background-color: #4CAF50;}button:hover {cursor: pointer;background-color: aqua;}.button-container p {height: 30px;line-height: 30px;padding: 0 10px;font-size: 14px;background-color: #f56c6c;border-radius: 3px;background-image: linear-gradient(to top left,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2) 30%,rgba(0, 0, 0, 0));box-shadow:inset 2px 2px 3px rgba(255, 255, 255, 0.6),inset -2px -2px 3px rgba(0, 0, 0, 0.6);text-shadow: 1px 1px 1px #d3bfbf;}button:hover,.button-container p:hover {cursor: pointer;background-color: rgb(251, 16, 16);background-image: linear-gradient(to top left,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2) 30%,rgba(0, 0, 0, 0));box-shadow:inset 2px 2px 3px rgba(255, 255, 255, 0.6),inset -2px -2px 3px rgba(0, 0, 0, 0.6);}.button-container p:active,button:active {box-shadow:inset -2px -2px 3px rgba(255, 255, 255, 0.6),inset 2px 2px 3px rgba(0, 0, 0, 0.6);}.container ::placeholder {color: rgb(36, 192, 127);letter-spacing: 25px;font-size: 15px;}/* 登录界面样式 结束 *//* 登录后的样式 */#mask {display: none;width: 100%;transition: background-color 0.3s, color 0.3s;background: #0b1b2c;/* 默认背景色 */color: #ffffff;}nav {background-color: #cbcbcb;padding: 5px;}nav a {color: #007bff;padding: 4px 8px;text-decoration: none;transition: background-color 0.3s;}nav a:hover {background-color: #ff000097;color: white;backdrop-filter: blur(5px);}.nav-active {display: inline-block;transform: scale(1.5);transform-origin: center;margin-left: 10px;padding: 0;border-radius: 3px;background-color: #ff0000;color: white;text-shadow: 1px 1px 1px #000000;}.content {display: none;padding: 20px;}.content p {background-color: #144756;color: #f56c6c;text-shadow: 1px 1px 1px #000000;}.active {display: block;}#mask.day-mode {background-color: #f0f0f0;color: #000000;}nav.day-mode {background-color: #cccccc;}.toggle-day-mode {float: right;}/* 调整我的标志位置 */#logo {position: absolute;top: -28px;right: 175px;}/* 登录后的结束 */</style>
</head><body><!-- 登录界面.wrapper --><div class="wrapper"><div class="container"><div class="welcome-box"><h1>欢迎</h1><p>加入我们！</p><div class="image-container"><img src="file:///D:/img/空.png" alt="正方形图片"></div></div><div class="registration-container"><div class="title-container"><h1>注册</h1></div><div class="input-group"><input type="text" id="reg-username" placeholder="用户名"><input type="password" id="reg-password" placeholder="密码"><input type="password" id="reg-confirm-password" placeholder="确认密码"></div><div class="button-container"><button class="register-btn" onclick="register()">注册</button><p onclick="mySwitch()">已有账号？去登录</p></div></div><div class="form-container"><div class="title-container"><h1>登录</h1></div><div class="input-group"><input type="text" id="login-username" placeholder="用户名"><input type="password" id="login-password" placeholder="密码"></div><div class="button-container"><button onclick="login()">登录</button><p onclick="mySwitch()">没有账号?去注册</p></div></div></div></div><!-- 登录界面.wrapper结束 --><!-- 登录后的内容#mask --><div id="mask"><!-- 导航栏 nav--><nav><!-- 引入我的标志和外部 JavaScript 文件 --><div id="logo">我的标志</div><script src="logo.js"></script><!-- 导航栏链接 --><a href="#" onclick="showPage('home')">首页</a><a href="#" onclick="showPage('writeDown')">记下来</a><a href="#" onclick="showPage('webPage')">网页</a><a href="#" onclick="showPage('countdown')">倒计时</a><a href="#" onclick="showPage('about')">关于</a><!-- 添加白天模式切换链接 --><a href="#" class="toggle-day-mode" onclick="toggledayMode()">切换白天模式</a><button onclick="logout()"style="background-color: #f56c6c; border: none; border-radius: 5px; cursor: pointer; float: right;padding: 0 2px;">退出登录</button></nav><div id="home" class="content active"><h1>欢迎来到首页</h1><p>内容正在筹备中...</p></div><div id="writeDown" class="content"><h1>记下来</h1><p>1.自从有了手机，每天过着李世民的生活，有人献歌献舞，表演才艺，朕还要挨个批阅点评，盖红章，朕甚是劳累。</p><p>2.内容正在筹备中...</p></div><div id="webPage" class="content"><h1>网页</h1><p>内容正在筹备中... </p></div><div id="countdown" class="content"><h1>倒计时</h1><p>内容正在筹备中...</p></div><div id="about" class="content"><h1>关于</h1><p>项目初始创建时间:2024年10月09日 </p></div></div><!-- 登录后的内容#mask结束 -->
</body>
<!-- 登录界面滑动引入的js文件 src="http://code.jquery.com/jquery-latest.js"-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>let flag = true;const users = [{ username: "admin", password: "admin123" }, // 添加管理员账户{ username: "1", password: "1" } // 添加管理员测试账户]; // 存储用户信息的数组const mySwitch = () => {if (flag) {$(".welcome-box").css({"transform": "translateY(100%)","background-image": "url('file:///D:/img/下.png')", // 修改为背景图片"border-radius": "0 0 8px 8px" // 添加边框圆角});$("img").attr("src", "file:///D:/img/荧.png");$("img").css("transform", "scale(1.3)"); // 这个图片返回原大小,添加缩放效果} else {$(".welcome-box").css({"transform": "translateY(0%)","background-image": "url('file:///D:/img/上.png')", // 修改为背景图片"border-radius": "8px 8px 0 0" // 添加圆角效果});$("img").attr("src", "file:///D:/img/空.png");$("img").css("transform", "scale(1)"); // 这个图片返回原大小,添加缩放效果}flag = !flag;}const register = () => {const username = document.getElementById("reg-username").value;const password = document.getElementById("reg-password").value;const confirmPassword = document.getElementById("reg-confirm-password").value;// 检查账号和密码是否为空if (!username || !password) {alert("账号和密码不能为空！");return;}if (password !== confirmPassword) {alert("密码不匹配！");return;}// 检查用户名是否已存在const userExists = users.some(user => user.username === username);if (userExists) {alert("用户名已存在，请选择其他用户名！");return;}// 注册用户users.push({ username, password });alert("注册成功，请登录！");mySwitch(); // 切换到登录界面}const login = () => {const username = document.getElementById("login-username").value;const password = document.getElementById("login-password").value;// 验证用户信息const user = users.find(user => user.username === username && user.password === password);if (user) {alert("登录成功！");// 显示受保护的页面document.getElementById("mask").style.display = "block"; // 显示内容document.querySelector('.wrapper').style.display = "none"; // 隐藏注册和登录盒子} else {alert("用户名或密码错误！");}}const logout = () => {document.getElementById("mask").style.display = "none"; // 隐藏受保护的内容document.querySelector('.wrapper').style.display = "block"; // 显示注册和登录盒子document.getElementById("login-username").value = ""; // 清空登录用户名输入框document.getElementById("login-password").value = ""; // 清空登录密码输入框}// 导航页面切换函数function showPage(page) {// 隐藏所有内容并移除激活样式document.querySelectorAll('.content').forEach(content => content.classList.remove('active'));document.querySelectorAll('nav a').forEach(link => link.classList.remove('nav-active'));// 显示当前选择的内容const selectedContent = document.getElementById(page);selectedContent.classList.add('active');document.querySelector(`nav a[onclick="showPage('${page}')"]`).classList.add('nav-active');}// 在页面加载时显示首页并激活相应的样式document.addEventListener('DOMContentLoaded', function () {showPage('home');});// 切换白天模式函数function toggledayMode() {document.getElementById("mask").classList.toggle('day-mode');document.querySelector('nav').classList.toggle('day-mode');}
</script></html>logo.js
const styles = `figure.logo {width: 262px;height: 50px;transform: scale(0.5) translate(110px, 50px);border-radius: 50%;background: #f30303;box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),inset -4px -4px 5px rgba(0, 0, 0, 0.6);z-index: 99;}figure.logo figcaption {background: hsl(0, 0%, 0%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight: bold;box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);letter-spacing: -3px;line-height: 45px;border-radius: 50%;font-size: 40px;width: 152px;}figure.logo .my_name1 {text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);transform: translate(35%, 0%);-webkit-text-stroke: #fffbfb 1px;}figure.logo .my_name2 {text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);transform: translate(35%, -93%);-webkit-text-stroke: #ffffff 1px;}figure.logo .avatarYing,figure.logo .avatarKong {position: absolute;width: 60px;height: 35px;background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(243, 3, 3, 0.8));border-radius: 50%;margin-left: 204px;}figure.logo img {--s: 60px;--b: -5px;--f: 1;--bgOptions: content-box no-repeat center/ calc(100% / var(--f)) 100%;--shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b));padding-top: 15px;width: var(--s);height: var(--s);transform: scale(var(--f));transition: 0.5s;mask: linear-gradient(#000 0 0) no-repeat center calc(0px - var(--shrink)) / calc(100% / var(--f) - 2 * var(--b)) 50%,radial-gradient(circle closest-side, #fff 60%, transparent) var(--bgOptions);}figure.logo .avatarYing {margin-left: 0px;margin-top: -83px;}figure.logo .avatarKong {margin-left: 202px;margin-top: 8px;}figure.logo .kong {margin-top: -40px;}figure.logo .ying {margin-top: -44px;--f: 1.4;}
`;const styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);const logoHtml = `<figure class="logo"><div class="avatarKong"><a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" target="_blank"><img class="kong" src="file:///D:/img/空.png" alt="与妖为邻"></a></div><figcaption class="my_name1">与妖为邻</figcaption><figcaption class="my_name2">与妖为邻</figcaption><div class="avatarYing"><a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" title="首页" target="_blank"><img class="ying" src="file:///D:/img/荧.png" alt="与妖为邻"></a></div></figure>
`;
document.getElementById("logo").innerHTML = logoHtml; // 将内容插入到 #logo 中
![[论文阅读] DVQA: Understanding Data Visualizations via Question Answering](https://i-blog.csdnimg.cn/direct/65840da4a892402abcbad35fac3f137e.png)
![PostgreSQL的学习心得和知识总结（一百五十三）|[performance]将 OR 子句转换为 ANY 表达式](https://i-blog.csdnimg.cn/direct/35b7adf4e231446391dd0507ffb4b58e.png)