首页写一个登陆页面】

写一个登陆页面】

时间: 2023-10-20 13:07:15 浏览: 35

一个登陆页面

就是自己仿照学长学姐开发的一个小界面。主要还是一个登陆页面，还没有链接数据库。

好的，下面是一个简单的登录页面的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-box"> <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"> <input type="submit" value="Login"> </form> </div> </body> </html> ``` CSS代码： ``` body { margin: 0; padding: 0; background: #f2f2f2; font-family: sans-serif; } .login-box { width: 320px; height: 420px; background: #fff; color: #000; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; padding: 70px 30px; } h1 { margin: 0; padding: 0 0 20px; text-align: center; font-size: 30px; } label { margin: 0; padding: 0; font-weight: bold; display: block; } input[type="text"], input[type="password"] { width: 100%; margin-bottom: 20px; padding: 4px; border: none; border-radius: 5px; border-bottom: 1px solid #000; background: transparent; outline: none; } input[type="submit"] { width: 100%; background: #000; color: #fff; border: none; border-radius: 5px; padding: 10px; font-size: 20px; cursor: pointer; outline: none; } input[type="submit"]:hover { background: #fff; color: #000; } ``` 您可以将代码复制到文本编辑器中，保存为.html和.css文件，然后在浏览器中打开.html文件以查看效果。

阅读全文