HTML和CSS实现炫酷的登录页面

最新推荐文章于 2024-05-24 20:18:36 发布

Wanstin

最新推荐文章于 2024-05-24 20:18:36 发布

阅读量7.8k

点赞数 21

分类专栏： Web 文章标签： css html css3 js html5

本文链接：https://blog.csdn.net/qq_44204959/article/details/105408580

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：在这里插入图片描述

HTML

整个页面元素很简单就不细讲了，直接上代码吧：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Login</title>
  <link rel="stylesheet" href="../css/Login.css">
  <link rel="stylesheet" href="D:/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
  <div id="login-box">
    <form action="">
      <h1>Login</h1>
      <div class="form">
        <div class="item">
          <i class="fa fa-user-circle-o" aria-hidden="true"></i>
          <input type="text" placeholder="Username" required />
        </div>
        <div class="item">
          <i class="fa fa-key" aria-hidden="true"></i>
          <input type="password" placeholder="Password" required />
        </div>
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</body>
</html>

上面两个link一个是引用css文件，一个是引用一个图标库font-awesome，大家可以去百度搜一下，然后直接下载，在项目中引用就能用了。

CSS

我们要解决这几件事：

半透明框体
框体居中且里面的文字等元素也居中
背景图全屏铺满
输入框的边框只有下边框
按钮的圆角与渐变色

代码如下：

body{
  background: url('../img/img03.jpg');
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#login-box{
  width: 30%;
  height: auto;
  margin: 0 auto;
  margin-top: 15%;
  text-align: center;
  background: #00000090;
  padding: 20px 50px;
}

#login-box h1{
  color: #fff;
}

#login-box .form .item{
  margin-top: 15px;
}

#login-box .form .item i{
  font-size: 18px;
  color: #fff;
}

#login-box .form .item input{
  width: 180px;
  font-size: 18px;
  border: 0;
  border-bottom: 2px solid #fff;
  padding: 5px 10px;
  background: #ffffff00;
  color: #fff;
}
#login-box button{
  margin-top: 15px;
  width: 180px;
  height: 30px;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  border: 0;
  border-radius: 15px;
  /* background: #1abc9c; */
  /* background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%); */
  background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
}

渐变色是从网站webgradients.com直接复制的（你也可以自己手动改）

Wanstin

关注

21
点赞
踩
110

收藏

觉得还不错? 一键收藏
5
评论
HTML和CSS实现炫酷的登录页面

效果图：HTML 整个页面元素很简单就不细讲了，直接上代码吧：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
复制链接

扫一扫