手把手教你用 HTML、CSS 和 JavaScript 编写自适应登录页面

要编写一个自适应的登录页面，你可以使用HTML、CSS和JavaScript来实现。下面是一个简单的示例： HTML部分： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录页面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <form id="login-form"> <h2>登录</h2> <input type="text" placeholder="用户名" id="username"> <input type="password" placeholder="密码" id="password"> <button type="button" onclick="login()">登录</button> </form> </div> <script src="script.js"></script> </body> </html> ``` CSS部分（style.css）： ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; } #login-form { border: 1px solid #ccc; padding: 20px; border-radius: 5px; } input, button { margin-bottom: 10px; width: 100%; } button { background-color: #4CAF50; color: white; padding: 10px; border: none; border-radius: 3px; cursor: pointer; } button:hover { background-color: #45a049; } ``` JavaScript部分（script.js）： ```javascript function login() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 在这里编写登录验证的代码 if (username === "admin" && password === "password") { alert("登录成功"); } else { alert("登录失败"); } } ``` 上述代码将创建一个居中显示的登录表单，该表单包含一个用户名输入框、一个密码输入框和一个登录按钮。当用户点击登录按钮时，JavaScript函数`login()`将获取输入框中的值并进行验证。你可以根据自己的需求修改和扩展这个示例。 ######[AI写代码神器 | 1504点数解答 | 2024-01-23 10:20:40]

服务商

更多选项

快捷项

自定义