首页帮我制作一个网页登陆界面

帮我制作一个网页登陆界面

时间: 2023-07-04 20:05:11 浏览: 101

好的，下面是一个简单的网页登陆界面的HTML和CSS代码，你可以根据自己的需求进行修改和完善。 HTML代码： ``` <!DOCTYPE html> <html> <head> <title>登陆界面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login-box"> <h2>用户登陆</h2> <form> <label for="username">用户名:</label> <input type="text" name="username" id="username" placeholder="请输入用户名"> <label for="password">密码:</label> <input type="password" name="password" id="password" placeholder="请输入密码"> <input type="submit" name="submit" value="登陆"> </form> </div> </body> </html> ``` CSS代码： ``` body { background-color: #f2f2f2; font-family: Arial, sans-serif; } .login-box { background-color: #fff; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); margin: 100px auto; padding: 20px; width: 400px; } h2 { color: #666; margin-bottom: 20px; text-align: center; } form label { display: block; font-size: 14px; margin-bottom: 5px; } form input[type="text"], form input[type="password"] { border: none; border-radius: 3px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); display: block; font-size: 16px; margin-bottom: 20px; padding: 10px; width: 100%; } form input[type="submit"] { background-color: #4CAF50; border: none; border-radius: 3px; color: #fff; cursor: pointer; font-size: 16px; padding: 10px; width: 100%; } form input[type="submit"]:hover { background-color: #3e8e41; } ``` 你可以将这些代码复制到一个文本编辑器中，然后将文件保存为.html和.css文件，再在浏览器中打开.html文件，即可看到效果。

阅读全文