首页写一个html5 的登录页面代码

写一个html5 的登录页面代码

时间: 2023-12-01 21:52:14 浏览: 82

好的，下面是一个简单的HTML5登录页面代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Login Page</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } form { background-color: #fff; max-width: 400px; padding: 20px; margin: 50px auto; box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 5px; } input[type="text"], input[type="password"] { padding: 10px; display: block; width: 100%; border-radius: 5px; border: none; margin-bottom: 20px; } input[type="submit"] { background-color: #008CBA; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; } input[type="submit"]:hover { background-color: #006B9F; } </style> </head> <body> <form> <h1>Login</h1> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <input type="submit" value="Login"> </form> </body> </html> ``` 以上代码中包含一个简单的登录表单，有一个用户名输入框、一个密码输入框和一个登录按钮。此外还添加了一些CSS样式，使页面看起来更美观。

阅读全文