Html设计页面之绿色简约登录页面
1. 效果展示
2.代码展示
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绿色简约登录页面</title>
<link rel="stylesheet" href="css/004.css">
</head>
<body>
<img src="./image/GreenLeaves.png">
<div class="container">
<div class="login">Login</div>
<div class="form-wrapper">
<input type="text" name="username" placeholder="请输入用户名" class="input-item">
<input type="password" name="password" placeholder="请输入密码" class="input-item">
</div>
<div class="prove">
<input type="text" name="password" placeholder="请输入验证码" class="input_prove">
<input type="button" value="获取验证码" class="button">
</div>
<div class="signIn">登录</div>
<div class="msg">
<a href="#">Sign up</a>
</div>
</div>
</body>
</html>
CSS代码:
* {
margin: 0;
padding: 0;
}
/* 居中对齐 */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 背景图片设计 */
img {
position: absolute;
width: 100%;
height: 100%;
}
.container {
position: relative;
width: 358px;
height: 588px;
border-radius: 15px;
/* 表单的内边距 */
padding: 0 50px;
/* 表单的背景颜色 */
background-color: white;
/* 设置立体效果 */
box-shadow: 5px 5px 5px rgb(166, 181, 146), -5px -5px 5px white;
}
.login {
/* 设计字体大小,粗细 */
font-size: 38px;
font-weight: bold;
line-height: 200px;
/* 字体居中 */
text-align: center;
/* 字体渐变 */
background-image: -webkit-linear-gradient(top,lightgreen 50%,LawnGreen 40%,green 60%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
/* 用户名和密码设计 */
.input-item {
display: block;
width: 100%;
margin-bottom: 20px;
border: 0;
padding: 10px;
border-bottom: 1px solid rgb(128,125,125);
font-size: 15px;
outline: none;
}
/* 验证码设计 */
.prove {
position: relative;
display: block;
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid rgb(128,125,125);
}
.input_prove {
border: 0;
font-size: 15px;
padding: 10px;
/* 不显示轮廓线 */
outline: none;
}
.button {
border: 0;
font-size: 15px;
outline: none;
float: right;
text-align: bottom;
background-color: white;
}
/* 提示字体颜色 */
input[value], .input_prove::placeholder, .input-item::placeholder {
color: rgb(112, 159, 112);
}
.signIn {
text-align: center;
padding: 10px;
width: 100%;
margin-top: 40px;
background-color: lightgreen;
color: #fff;
}
.msg {
text-align: center;
line-height: 88px;
}
a {
text-decoration-line: none;
color: LimeGreen;
}