使用HTML,CSS,实现一个带有渐变背景色的登录页面
时间: 2023-02-21 21:22:29 浏览: 51
可以使用以下代码实现一个带有渐变背景色的登录页面:
HTML代码:
```
<body>
<div class="container">
<form>
<h1>登录</h1>
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="submit" value="登录">
</form>
</div>
</body>
```
CSS代码:
```
body {
background: linear-gradient(to right, #ffb347, #ffcc33);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
text-align: center;
}
form {
display: inline-block;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
}
input[type="submit"] {
background-color: #ffb347;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}
```
这段代码实现了一个带有从左到右的渐变背景色的登录页面,并且包含了用户名和密码输入框以及登录按钮。