html+css 实现华为登录界面
直接放代码,是阿腾阿!
效果图(同学们请不要完全copy)
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登录</title>
<link rel="stylesheet" href="../static/css1.css">
</head>
<body>
<div class="head">
<img src="https://uniportal.huawei.com/uniportal1/rest/hwidcenter/logon-logo" alt="我是logo">
</div>
<!-- 参考:https://www.bilibili.com/video/BV1s94y1S7f2?spm_id_from=333.337.search-card.all.click&vd_source=3bc1dd4a42012fa273cf171a6833d07b -->
<div class="container">
<h2>Uniportal帐号登录</h2>
<div class="input-container">
<input type="text" id="account" placeholder="账号名/邮箱/手机号/W3账号">
</div>
<div class="input-container">
<input type="password" id="password" placeholder="密码">
</div>
<div class="container_a1"></div>
<a href="#">短信验证码登录</a>
<div class="button-container">
<div>
<button>登录</button>
</div>
</div>
<div class="bottom">
<a href="#">立即注册</a>
<a href="#">忘记密码</a>
<a href="#">修改密码</a>
</div>
<div class="bottom2">
<img src="https://uniportal.huawei.com/uniportal1/images/pic/icon_bangzhu@2x.png
"
alt="我是logo">
<a href="#"> 点击获取更多帮助?</a>
</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: #eff1f5;
background-size: cover;
}
div.head{
height: 100px;
width: 100%;
position: absolute;
background: #ffffff;
display: block;
margin-top: -850px;
}
div.head>img{
width: 180px;
height: 40px;
margin-left: 12.5%;
padding-top: 30px;
object-fit: contain;
}
div.container {
backdrop-filter: blur(10px);
background: white;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 600px;
width: 600px;
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: black;
margin-bottom: 30px;
letter-spacing: 2px;
/* text-transform: uppercase; */
user-select: none;
font-size: 40px;
}
div.container > div.input-container {
/* border: 1px solid black; */
/* padding: 5px;
margin: 5px; */
margin-bottom: 20px;
display: flex;
flex-direction: column;
/* width: 260px;
height: 260px; */
justify-content: center;
align-items: start;
border: 1px solid black;
}
div.container > div.input-container > input {
box-sizing: border-box;
color:black;
font-size: 15px;
height: 50px;
width: 375px;
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: 375px;
height: 100px;
display: flex;
flex-direction: column;
/*align-items: start;*/
justify-content: center;
/*border: 1px solid black;*/
}
div.container>div.container_a1{
height: 15px;
width: 250px;
text-align: right;
}
div.container > div.container_a1 > a {
/* border: 1px solid red; */
width: 100%;
font-size: 15px;
text-decoration: none;
color: deepskyblue;
transition: 0.2s;
user-select: none;
text-align: right;
}
div.container > div.container_a1 >a:hover {
color: red;
}
div.container > div.button-container > div {
height: 70px;
width: 375px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: start;
margin-top: 0;
}
div.container > div.button-container > div > button {
width: 100%;
height: 100%;
background: #C7000B;
color: white;
border-radius: 4px;
cursor: pointer;
transition: 0.6s;
font-size: 30px;
}
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);
}
div.container>div.bottom>a{
color: deepskyblue;
}
div.container>div.bottom2{
margin-top: 20px;
}
div.container>div.bottom2>img{
width: 20px;
height: 20px;
}