效果如下：
很简单的一个静态页面展示，我将css放在html文件里面，集合成一体
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录页面</title> <style> body, html { height: 100%; margin: 0; font-family: Arial, sans-serif; } .container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-image: url('更换你的图片地址'); background-size: cover; background-position: center; } .form-box { width: 25%; margin: 10px; padding: 20px; background: rgba(255, 255, 255, 0.8); border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .form-group { margin-bottom: 15px; width: 90%; } .form-group label { display: block; margin-bottom: 5px; } .form-group input[type="text"], .form-group input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; } .form-group button { width: 100%; padding: 10px; background-color: #007BFF; color: white; border: none; border-radius: 4px; cursor: pointer; } .form-group button:hover { background-color: #0056b3; } a { color: #007BFF; text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <div class="container"> <div class="form-box"> <form class="form-login"> <h2>登录</h2> <div class="form-group"> <label for="login-username">用户名：</label> <input type="text" id="login-username" required> </div> <div class="form-group"> <label for="login-password">密码：</label> <input type="password" id="login-password" required> </div> <div class="form-group"> <button type="button" onclick="getVerificationCode()">获取验证码</button> </div> <div class="form-group"> <button type="submit">登录</button> </div> <div class="form-group"> <a href="#">忘记密码?</a> | <a href="register.html">新用户注册</a> </div> </form> </div> </div> <script> function getVerificationCode() { alert("验证码已发送到您的邮箱"); } </script> </body> </html>
将上述代码复制下来在VSC里面运行，更换代码第20行文件地址即可运行出来效果图片
以下是注册页面的代码，可以根据实际情况调整CSS样式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注册</title> <style> body, html { height: 100%; margin: 0; font-family: Arial, sans-serif; } .container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-image: url('background.jpg'); background-size: cover; background-position: center; } .form-box { margin: 10px; padding: 20px; background: rgba(255, 255, 255, 0.8); border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; } .form-group input[type="text"], .form-group input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; } .form-group button { width: 100%; padding: 10px; background-color: #007BFF; color: white; border: none; border-radius: 4px; cursor: pointer; } .form-group button:hover { background-color: #0056b3; } </style> </head> <body> <div class="container"> <div class="form-box"> <form class="form-register"> <h2>注册新用户</h2> <div class="form-group"> <label for="register-nickname">昵称：</label> <input type="text" id="register-nickname" required> </div> <div class="form-group"> <label for="register-username">用户名：</label> <input type="text" id="register-username" required> </div> <div class="form-group"> <label for="register-password">密码：</label> <input type="password" id="register-password" required> </div> <div class="form-group"> <label for="register-confirm-password">确认密码：</label> <input type="password" id="register-confirm-password" required> </div> <div class="form-group"> <button type="submit">确定</button> </div> </form> </div> </div> </body> </html>
