首页制作简易登陆界面代码

制作简易登陆界面代码

时间: 2024-10-21 09:18:01 浏览: 16

自制简易qq登陆界面

5星 · 资源好评率100%

自制简易qq登陆界面,第一次制作页面，写的有很多不足的地方，适合初学者看

制作一个简单的登录界面代码通常涉及到前端HTML、CSS和JavaScript的配合。这里是一个基本的静态HTML示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简单登录页面</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; font-family: Arial, sans-serif; } .login-form { width: 300px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } input[type=text], input[type=password] { width: 100%; margin-bottom: 10px; padding: 12px 20px; box-sizing: border-box; } button { background-color: #4CAF50; color: white; padding: 14px 20px; border: none; cursor: pointer; border-radius: 4px; } </style> </head> <body> <div class="login-form"> <h2>登录</h2> <form id="loginForm"> <input type="text" id="username" placeholder="用户名" required> <input type="password" id="password" placeholder="密码" required> <button onclick="login()">登录</button> </form> <p id="errorMessage" style="color: red;"></p> </div> <script> function login() { var username = document.getElementById('username').value; var password = document.getElementById('password').value; // 这里只是一个简单的验证示例，实际应用需要后端交互 if (username === 'admin' && password === 'password') { document.getElementById('errorMessage').innerHTML = ''; } else { document.getElementById('errorMessage').innerHTML = '用户名或密码错误'; } } </script> </body> </html> ``` 这个代码创建了一个包含用户名输入框、密码输入框以及登录按钮的基本登录表单。当用户点击登录时，会检查输入的用户名和密码是否匹配预设值，如果不匹配则显示错误消息。

阅读全文