CSS:注册页面的编写练习
最终效果图:
html文件:
<!-- * @Qusetion: * @Author: 一届书生 * @Date: 2020-04-07 08:17:36 * @LastEditTime: 2020-04-07 10:51:21 --> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="style.css" /> <title>login</title> </head> <body> <div class="login-container"> <div class="left-container"> <div class="title"><span>登录页面</span></div> <div class="input-container"> <input type="text" name="username" placeholder="用户名" /> <input type="password" name="password" placeholder="密码" /> </div> <div class="button-container"> <button>忘记密码</button> <!-- </div> --> <!-- <div class="button2-container"> --> <button>Login</button> </div> </div> <div class="right-container"> <div class="regist-container"> <span class="regist">注册</span> </div> </div> </div> </body> </html>
* { padding: 0; margin: 0; } body { /* background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%); */ /* background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%); */ background-image: linear-gradient( to left top, #a7cef6 0%, rgb(51 105 232) 100% ); } body .login-container { width: 450px; height: 300px; outline: 0; margin: 13% 35%; /* margin-top: 13%; */ /* background-color: #fff; */ border-radius: 10px; box-shadow: 0 1px 35px 0 #264f73; } body .login-container .left-container { width: 68%; height: 100%; display: inline-block; border-top-left-radius: 15px; border-bottom-left-radius: 15px; background-image: linear-gradient( to left top, #a7cef6 0%, rgb(51 105 232) 100% ); } body .login-container .left-container .title { color: white; font-size: 18px; font-weight: 700; margin: 7% 8%; } body .login-container .left-container .title span { border-bottom: 3px solid #fff; } body .login-container .left-container .input-container { margin: 20% 5%; /* padding: 10px 20px; */ } body .login-container .left-container .input-container input { width: 95%; margin-top: 10px; border: 0; transition: 0.2s; background: none; outline: 0; display: block; color: #fff; font-size: 15px; border: 2px solid #dfe6ec; border-width: 2px; border-radius: 3px; line-height: 30px; padding: 0 0 0 10px; } body .login-container .left-container .input-container input:hover { border: 2px solid #fff; } ::-webkit-input-placeholder { color: aliceblue; } body .login-container .left-container .button-container button { background: none; border: 0; outline: 0; background-color: #fff; border-radius: 3px; font-size: 15px; font-weight: 600; color: #3b6f9c; width: 80px; height: 30px; margin-left: 50px; transition: 0.2s; display: inline; } body .login-container .left-container .button-container button:hover { background-color: rgb(81, 139, 245); color: #fff; } body .login-container .right-container { display: inline-block; background-color: none; height: calc(100%-120px); width: 130px; vertical-align: top; padding: 60px 0; } body .login-container .right-container .regist-container { text-align: center; color: #fff; font-size: 16px; font-weight: 500; } body .login-container .right-container .regist-container span { border-bottom: 2px solid #fff; }