首页前端代码写一个登录的页面。用户名：输入框、密码：输入框居中对齐，布局合理。包括记住密码勾选框，登录按钮为浅色蓝色

前端代码写一个登录的页面。用户名：输入框、密码：输入框居中对齐，布局合理。包括记住密码勾选框，登录按钮为浅色蓝色

时间: 2023-06-12 07:08:25 浏览: 133

以下代码实现了你所需的登录页面布局，其中用户名和密码输入框都居中对齐，布局合理，记住密码勾选框和登录按钮颜色为浅色蓝色。 ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> <style type="text/css"> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } .container { width: 400px; margin: 0 auto; margin-top: 100px; border: 1px solid #ccc; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 5px #ccc; } h1 { text-align: center; margin-bottom: 30px; } label { display: block; margin-bottom: 10px; font-weight: bold; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; margin-bottom: 20px; font-size: 16px; text-align: center; } .remember-me { margin-bottom: 20px; } .btn-login { display: block; width: 100%; padding: 10px; background-color: #b3d9ff; color: #fff; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } .btn-login:hover { background-color: #99c2ff; } </style> </head> <body> <div class="container"> <h1>Login</h1> <form> <label for="username">Username:</label> <input type="text" id="username" name="username" placeholder="Enter your username"> <label for="password">Password:</label> <input type="password" id="password" name="password" placeholder="Enter your password"> <div class="remember-me"> <input type="checkbox" id="remember" name="remember"> <label for="remember">Remember me</label> </div> <button type="submit" class="btn-login">Login</button> </form> </div> </body> </html> ``` 你可以在浏览器中打开该文件，查看实际效果。

阅读全文