给这段代码配一个google风格的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 19:05:14 浏览: 95
jogo-da-memoria-DIO:在这个项目中,挑战将是仅使用HTML,CSS和Javascript创建一个记忆游戏
以下是给这段代码配一个google风格的css样式的代码:
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #4285f4;
}
form {
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px #ccc;
padding: 20px;
margin: 0 auto;
max-width: 400px;
}
label {
display: block;
margin-bottom: 10px;
color: #555;
}
input[type="text"], input[type="password"], input[type="checkbox"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4285f4;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3367d6;
}
</style>
</head>
<body>
<h1>用户登录</h1>
<form action="登录.HTML" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<label for="remember">记住我:</label>
<input type="checkbox" id="remember" name="remember">
<input type="submit" value="登录">
</form>
</body>
</html>
阅读全文