1.界面展示
图1 登录界面
图2 注册界面
2.界面实现
2.1登录界面
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录界面1</title> <link rel="stylesheet" href="./login.css"></link> </head> <body> <div class="login-box"> <form action="" id="form"> <h1>登录</h1> <label>用户名:</label><br> <input type="text" class="username"></input> <br> <label>密码:</label><br> <input type="password" class="password"></input> <br><br> <button>登录</button> <div class="reg"> <p>没有账号?去<b><a href="./registry.html">注册</a></b></p> </div> </form> </div> </body> </html>
复制
login.css
*{ margin: 0; padding: 0; } body{ width: 100vw; height: 100vh; position: relative; background-image: url('./背景2.png'); background-repeat: no-repeat; background-attachment: fixeed; background-size: cover; display: flex; align-items: center; /* text-align: center; */ justify-content: center; } .login-box{ background: inherit; width: 500px; height: 450px; position: absolute; overflow: hidden; border-radius: 10px; } .login-box:before{ content:""; background: inherit; position: absolute; left: 0; right: 0; top: 0; bottom: 0; box-shadow: inset 0 0 0 3000px rgba(229, 204, 204, 0.3); filter: blur(10px); } #form{ color: black; width: 300px; margin: 40px auto; position: relative; } h1{ margin-top: 70px; margin-bottom: 30px; color:rgb(211, 58, 58); text-align: center; } label{ color: rgb(197, 30, 58); font-weight: 550; } input{ width: 200px; height: 25px; border: none; margin-top: 3px; margin-left: 50px; } button{ width: 100px; height: 25px; margin-left: 100px; border: none; background-color: pink; } .reg{ margin-top: 111px; margin-left: -30px; color: rgb(197, 30, 58); } .reg a{ color: rgb(230, 59, 44); text-decoration: none; }
复制
2.2注册界面
registry.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注册页面</title> <link rel="stylesheet" href="./registry.css"></link> </head> <body> <div class="reg-box"> <form action="" id="form"> <h1>注册</h1> <label>用户名:</label><br> <input type="text" class="username"></input> <br> <label>密码:</label><br> <input type="password" class="password"></input> <br> <label>确认密码:</label><br> <input type="password" class="repassword"></input> <br> <label>手机号</label><br> <input type="text" class="phone"></input> <br> <br> <button>注册</button> <div class="reg"> <p>已有账号?去<b><a href="./login.html">登录</a></b></p> </div> </form> </div> </body> </html>
复制
registry.css
* { margin: 0; padding: 0; } body { width: 100vw; height: 100vh; position: relative; background-image: url('./背景2.png'); background-repeat: no-repeat; background-attachment: fixeed; background-size: cover; display: flex; align-items: center; /* text-align: center; */ justify-content: center; } .reg-box { background: inherit; width: 500px; height: 450px; position: absolute; overflow: hidden; border-radius: 10px; } .reg-box:before { content: ""; background: inherit; position: absolute; left: 0; right: 0; top: 0; bottom: 0; box-shadow: inset 0 0 0 3000px rgba(229, 204, 204, 0.3); filter: blur(10px); } #form { color: black; width: 300px; margin: 40px auto; position: relative; } h1 { margin-top: 70px; margin-bottom: 30px; color: rgb(211, 58, 58); text-align: center; } label { color: rgb(197, 30, 58); font-weight: 550; } input { width: 200px; height: 25px; border: none; margin-top: 3px; margin-left: 50px; } button { width: 100px; height: 25px; margin-left: 100px; border: none; background-color: pink; } .reg { margin-top: 15px; margin-left: -30px; color: rgb(197, 30, 58); } .reg a { color: rgb(230, 59, 44); text-decoration: none; }
复制