首页写一段前端代码实现一个好看的登录界面

写一段前端代码实现一个好看的登录界面

时间: 2023-12-20 11:59:38 浏览: 31

```html <!DOCTYPE html> <html> <head> <title>登录界面</title> <style> /*设置背景颜色*/ body { background-color: #f1f1f1; } /*设置登录框样式*/ .login-box { width: 400px; height: 300px; background-color: white; margin: 100px auto; padding: 20px; box-shadow: 0 0 10px #333; } /*设置表单样式*/ .login-box form { margin-top: 30px; } .login-box form label { font-size: 18px; font-weight: bold; margin-bottom: 10px; display: block; } .login-box form input[type="text"], .login-box form input[type="password"] { width: 100%; padding: 12px 20px; margin-bottom: 20px; box-sizing: border-box; border-radius: 4px; border: 1px solid #ccc; font-size: 16px; } /*设置按钮样式*/ .login-box form input[type="submit"] { width: 100%; padding: 12px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 18px; } /*设置按钮 hover 效果*/ .login-box form input[type="submit"]:hover { background-color: #45a049; } </style> </head> <body> <div class="login-box"> <form> <label>用户名</label> <input type="text" placeholder="请输入用户名"> <label>密码</label> <input type="password" placeholder="请输入密码"> <input type="submit" value="登录"> </form> </div> </body> </html> ``` 这是一个简单的登录界面前端代码。可以根据需要自行修改样式和增加功能。