给这段代码配一个现代风格的css样式。 <!DOCTYPE html> <html> <head> <title>用户登录</title> <link rel="stylesheet" type="text/css" href="login.css"> </head> <body> <h1>用户登录</h1> <form action="登录.HTML" method="post"> <label style="display: inline-block;" for="username">用户名:</label> <input style="display: inline;"type="text" id="username" name="username"><br><br> <label style="display: inline-block;" for="password">密 码:</label> <input style="display: inline;"type="password" id="password" name="password"><br><br> <label style="display: inline-block;" for="remember">记住我:</label> <input style="display: inline;"type="checkbox" id="remember" name="remember"><br><br> <input type="submit" value="登录"> </form> </body> </html>
时间: 2023-05-19 13:05:11 浏览: 92
jogo-da-memoria-DIO:在这个项目中,挑战将是仅使用HTML,CSS和Javascript创建一个记忆游戏
很高兴为您提供帮助!以下是一个现代风格的css样式:
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: #333;
}
form {
width: 400px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
label {
display: block;
margin-bottom: 10px;
color: #333;
}
input[type="text"],
input[type="password"] {
display: block;
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
input[type="checkbox"] {
display: inline-block;
margin-right: 10px;
}
input[type="submit"] {
display: block;
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #333;
color: #fff;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #555;
}
请注意,这只是一个示例样式,您可以根据需要进行修改和调整。
阅读全文