Html设计页面之绿色简约登录页面

最新推荐文章于 2024-04-28 15:34:18 发布

回忆彡美好

最新推荐文章于 2024-04-28 15:34:18 发布

阅读量1k

点赞数 22

分类专栏： Html设计文章标签： html css 开发语言 css3 前端

本文链接：https://blog.csdn.net/weixin_66448747/article/details/136274067

版权

Html设计专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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;
}