首页web前端设计登录界面

web前端设计登录界面

时间: 2023-12-18 16:04:41 浏览: 24

抱歉，作为AI语言模型，我无法提供图形界面，但是我可以为您提供登录界面的HTML和CSS代码示例。 HTML代码： ``` <!DOCTYPE html> <html> <head> <title>Login Page</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login-page"> <div class="form"> <form class="login-form"> <input type="text" placeholder="Username"/> <input type="password" placeholder="Password"/> <button>login</button> </form> </div> </div> </body> </html> ``` CSS代码： ``` body { font-family: "Helvetica Neue", sans-serif; } .login-page { width: 360px; padding: 8% 0 0; margin: auto; } .form { position: relative; z-index: 1; background: #FFFFFF; max-width: 360px; margin: 0 auto 100px; padding: 45px; text-align: center; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } .login-form { margin-top: 50px; } .login-form input[type="text"], .login-form input[type="password"] { font-family: "Helvetica Neue", sans-serif; width: 100%; padding: 15px; margin: 10px 0 25px; border: none; border-radius: 5px; background: #f2f2f2; } .login-form button { font-family: "Helvetica Neue", sans-serif; text-transform: uppercase; width: 100%; padding: 15px; margin: 10px 0 25px; border: none; border-radius: 5px; background-color: #4CAF50; color: #FFFFFF; cursor: pointer; transition: all 0.3s ease 0s; } .login-form button:hover { background-color: #43A047; } ``` 该代码可生成一个简单的登录界面，界面中包含用户名和密码输入框以及登录按钮。您可以根据需要进行修改和美化。