首页web班级网站登陆界面设置代码

web班级网站登陆界面设置代码

时间: 2023-12-23 15:00:20 浏览: 84

班级网站登陆界面设置代码如下： ```html <!DOCTYPE html> <html> <head> <title>班级网站登陆</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <form action="login.php" method="post"> <div class="container"> <label for="username"><b>用户名</b></label> <input type="text" placeholder="请输入用户名" name="username" required> <label for="password"><b>密码</b></label> <input type="password" placeholder="请输入密码" name="password" required> <button type="submit">登陆</button> </div> <div class="container" style="background-color:#f1f1f1"> <button type="button" class="cancelbtn">取消</button> </div> </form> </body> </html> ``` ```CSS body { font-family: Arial, sans-serif; } input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } .cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; } ``` 这段代码是一个简单的HTML页面，包括班级网站登陆的表单和相应的CSS样式。在登陆界面，用户需要输入用户名和密码，然后点击登陆按钮进行登陆操作。当用户填写完用户名和密码后点击登陆按钮，表单会将数据提交到login.php文件进行处理。整个界面的样式和布局都是使用CSS进行设置的。

阅读全文