组装首页
<!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 中
扫一扫
5057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
