HTML 和amp; CSS - 的登录页面
一个简单的登录页面
效果:
项目结构:
HTML 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登录</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 参考:https://www.bilibili.com/video/BV1s94y1S7f2?spm_id_from=333.337.search-card.all.click&vd_source=3bc1dd4a42012fa273cf171a6833d07b -->
<div class="container">
<h2>Login</h2>
<div class="input-container">
<label for="account">账号</label>
<input type="text" id="account">
</div>
<div class="input-container">
<label for="password">密码</label>
<input type="password" id="password" value="123">
</div>
<div class="button-container">
<a href="#">忘记密码?</a>
<div>
<button>登录</button>
<button>注册</button>
</div>
</div>
</div>
</body>
</html>
CSS 代码:
@charset "utf-8";
* {
margin: 0;
padding: 0;
/* font-family: 'Courier New', Courier, monospace; */
/* letter-spacing: 1px; */
}
body {
/* border: 2px solid red; */
display: flex;
/* flex-direction: column; */
align-items: center;
justify-content: center;
height: 100vh;
background: url("../img/fox.jpg") no-repeat;
background-size: cover;
}
div.container {
backdrop-filter: blur(10px);
background: rgba(50, 50, 50, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
width: 300px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-right: 1px solid rgba(255, 255, 255, 0.2);
letter-spacing: 1px;
}
div.container > h2 {
/* border: 1px solid red; */
color: rgba(255, 255, 255, 0.8);
margin-bottom: 5px;
letter-spacing: 2px;
/* text-transform: uppercase; */
user-select: none;
}
div.container > div.input-container {
/* border: 1px solid black; */
/* padding: 5px;
margin: 5px; */
margin-bottom: 5px;
display: flex;
flex-direction: column;
/* width: 260px;
height: 260px; */
justify-content: center;
align-items: start;
}
div.container > div.input-container > label {
margin-bottom: 5px;
color: rgba(255, 255, 255, 0.8);
font-size: 15px;
cursor: pointer;
user-select: none;
}
div.container > div.input-container > input {
box-sizing: border-box;
color: rgba(255, 255, 255, 0.8);
font-size: 15px;
height: 35px;
width: 250px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);
/* border: none; */
padding: 10px;
border-radius: 5px;
transition: 0.5s;
outline: none;
letter-spacing: 1px;
}
div.container > div.input-container > input:focus {
border: 1px solid rgba(255, 255, 255, 1);
}
div.container > div.button-container {
/* border: 1px solid black; */
width: 250px;
/* height: 100px; */
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
}
div.container > div.button-container > a {
/* border: 1px solid red; */
width: 100%;
font-size: 15px;
text-decoration: none;
color: rgba(255, 255, 255, 0.6);
transition: 0.2s;
user-select: none;
text-align: end;
}
div.container > div.button-container >a:hover {
color: rgba(255, 255, 255, 1);
}
div.container > div.button-container > div {
display: flex;
flex-direction: row;
justify-content: center;
align-items: start;
margin-top: 10px;
}
div.container > div.button-container > div > button {
width: 120px;
height: 35px;
border: 1px solid rgba(255, 255, 255, 0.6);
background: rgba(46, 66, 94, 0.4);
color: rgba(255, 255, 255, 0.8);
border-radius: 5px;
cursor: pointer;
transition: 0.6s;
}
div.container > div.button-container > div > button:nth-of-type(2) {
margin-left: 10px;
}
div.container > div.button-container > div > button:hover {
border: 1px solid rgba(255, 255, 255, 1);
background: rgba(46, 66, 94, 0.8);
}
参考
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhhfhiea
系列文章
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22