首页写一个登陆界面的代码

写一个登陆界面的代码

时间: 2024-11-09 16:19:17 浏览: 17

易语言-易语言程序的登陆界面(仿制)

易语言程序的登陆界面(仿制)

设计一个基本的登录界面通常涉及HTML、CSS和JavaScript。下面是一个简单的静态页面示例，你可以把它放在一个名为login.html的文件里： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>登录界面</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f2f2f2; } form { width: 300px; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; } input, button { margin-bottom: 10px; padding: 10px; border: none; outline: none; border-bottom: 1px solid #ccc; } input[type="password"] { text-align: right; } button { cursor: pointer; background-color: dodgerblue; color: white; } </style> </head> <body> <form id="loginForm"> <h2>登录</h2> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <label for="password">密码:</label> <input type="password" id="password" name="password" required placeholder="请输入密码"> <button type="submit">登录</button> </form> <script> document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); // 阻止表单默认提交 console.log('正在处理登录请求...'); // 可在此添加实际的登录逻辑 }); </script> </body> </html> ``` 在这个例子中，我们有一个包含用户名和密码输入字段以及登录按钮的简单表格。当用户点击登录时，JavaScript阻止了表单的默认提交行为，并打印一条消息表示正在处理登录请求。这只是一个基础的模板，实际应用中需要连接到服务器验证用户凭据。

阅读全文