Coldin04/atlas-study
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

完成新任务：登录界面模仿

Browse source
This commit is contained in:
Coldin04 2026-01-24 18:06:58 +08:00
parent 359dc1a7da
commit 79791c80ab
4 changed files with 64 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
grid-study/styles.css
View file

@ -8,8 +8,6 @@ body {
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* 顶栏样式 */

19
login-page/index.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login_page">
<h2>Journey US</h2>
<form action="/login" method="post">
<input type="text" id="username" name="username" placeholder="用户名" required><br><br>
<input type="password" id="password" name="password" placeholder="密码" required><br><br>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>

BIN
login-page/src/login_background.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 96 KiB

45
login-page/style.css Normal file
View file

@ -0,0 +1,45 @@
body {
margin: 0;
font-family: Arial, sans-serif;
background-image: url('src/login_background.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.login_page {
display: flex;
margin-left: auto;
margin-right: 0;
justify-content: center;
flex-direction: column;
align-items: flex-start;
height: 100vh;
padding: 0 40px;
max-width: 400px;
background-color: rgba(249, 189, 211, 0.98);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 20px;
color: #ff8cb1;
}
.login_page h2 {
font-size: 45px;
font-weight: 700;
}
.login_page form{
width: 100%;
}
.login_page input{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 0px;
background-color: #ffeef4;
color: #ff8cb1;
border-radius: 12px;
}