酷代码 AI
菜单
服务商
DeepSeek字节豆包讯飞星火
更多选项

手把手教你编写超简单的H5登录页面!附完整代码

当然可以!以下是一个简单的H5登录页面的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Login Page</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f7f9; margin: 0; padding: 0; } .container { max-width: 400px; margin: 120px auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 10px rgba(0, 0, 0, 0.1); } h2, p { text-align: center; } input[type="text"], input[type="password"] { width: 100%; height: 40px; padding: 5px; margin-bottom: 20px; border-radius: 5px; border: 1px solid #ccc; } input[type="submit"] { width: 100%; height: 40px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; } input[type="submit"]:hover { background-color: #0056b3; } </style> </head> <body> <div class="container"> <h2>Login</h2> <form action="login.php" method="POST"> <input type="text" name="username" placeholder="Username" required> <input type="password" name="password" placeholder="Password" required> <input type="submit" value="Login"> </form> </div> </body> </html> ``` 你可以将上述代码保存为一个HTML文件,例如`login.html`,然后在浏览器中打开该文件,即可看到一个简单的登录页面。此示例只提供基本的前端界面,你还需要编写服务器端代码来处理登录逻辑。 ######[AI写代码神器 | 1697点数解答 | 2024-01-23 10:17:23]

相关提问
本站限时免费提问中
实用工具查看更多
Linux在线手册 [开发类]
Jquery在线手册 [开发类]
今日油价 [生活类]
图片互转base64 [开发类]
时间转换器 [开发类]