最终成果


源码

关键技术点

程度垂直居中

首先把须要居中元素的容器设置高度，而后设置元素的top、left属性为50%，最初应用transform拉回元素的50%宽高，另外肯定要设置position属性为relative。

html, body, .container{  height: 100%;}.login-wrapper{  position: relative;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);}

文本框去掉轮廓线

未去掉轮廓线的文本框的成果如下图

去掉轮廓线的文本框的成果如下图

outline: none;

文本框禁止显示历史输出内容

<input type="text" autocomplete="off" />

源代码

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="css/style.css">  <title>Document</title></head><body>  <div class="container">    <div class="login-wrapper">      <div class="header">Login</div>      <div class="form-wrapper">        <input type="text" name="username" placeholder="username" class="input-item" autocomplete="off">        <input type="password" name="password" placeholder="password" class="input-item" autocomplete="off">        <div class="btn">Login</div>      </div>      <div class="msg">        Don't have account?<a href="#">Sign up</a>      </div>    </div>  </div></body></html>
* {  padding: 0;  margin: 0;  font-family: 'Open Sans Light';  letter-spacing: 0.05em;}html,body {  height: 100%;}.container {  height: 100%;  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);}.login-wrapper {  background-color: #fff;  width: 250px;  height: 500px;  border-radius: 15px;  padding: 0 50px;  position: relative;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);}.login-wrapper .header {  font-size: 30px;  font-weight: bold;  text-align: center;  line-height: 200px;}.login-wrapper .form-wrapper .input-item {  display: block;  width: 100%;  margin-bottom: 20px;  border: 0;  padding: 10px;  border-bottom: 1px solid rgb(128, 125, 125);  font-size: 15px;  outline: none;}.login-wrapper .form-wrapper .input-item::placeholder {  text-transform: uppercase;}.login-wrapper .form-wrapper .btn {  text-align: center;  padding: 10px;  width: 100%;  margin-top: 40px;  background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);  color: #fff;}.login-wrapper .msg {  text-align: center;  line-height: 80px;}.login-wrapper .msg a {  text-decoration-line: none;  color: #a6c1ee;}

参考资源

bilibili
520设计网