爱站程序员基地效果如图
html文件代码如下
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title></head><style>*{padding:0;margin:0;font-family: \'Open Sans Light\';letter-spacing: .05em;}html {height: 100%;}body {height: 100%;}.container {height: 100%;background-image: linear-gradient(to right, #d9afd9,#97d9e1);}.login-wrapper {background-color: #fff;width: 300px;height: 500px;border-radius: 15px;position: relative;left: 50%;top: 50%;transform: translate(-50%,-50%);padding: 30px;}.login-wrapper .header {font-size: 30px;font-size: bold;text-align: center;line-height: 200px;}.login-wrapper .form-wrapper .input-item {display: block;box-sizing: border-box;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;box-sizing: border-box;padding: 10px;width: 100%;margin-top: 40px;background-image: linear-gradient(to right,#97d9e1,#feada6);color: #fff;}.login-wrapper .msg{text-align: center;line-height: 80px;}.login-wrapper .msg a{text-decoration: none;color: #fbc2eb;}</style><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\"><input type=\"password\" name=\"password\" placeholder=\"password\" class=\"input-item\"><div class=\"btn\">Login</div></div><div class=\"msg\">Don\'t have acount?<a href=\"#\">Sign up</a></div></div></div></body><script></script></html>
