html+css 实现华为登录界面
直接放代码，是阿腾阿！htmlcss直接放代码，是阿腾阿！
效果图(同学们请不要完全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="/uniportal1/rest/hwidcenter/logon-logo" alt="我是logo"></div><!-- 参考：/video/BV1s94y1S7f2?spm_id_from=333.337.search-card.all.click&vd_source=3bc1dd4a4fa273cf171a6833d07b --><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="/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;}
