简易大气好看后台登录页面纯静态HTML源码分享

小谷的PHP全栈日记

已于 2023-12-21 20:44:40 修改

阅读量1.2k

点赞数 16

文章标签： html 前端 css

于 2023-12-21 19:46:33 首次发布

本文链接：https://blog.csdn.net/2301_81534443/article/details/135138698

版权

给大家分享一个简易、大气、好看的后台登录界面纯静态HTML源码，适合后台管理系统登录界面快速开发，二次开发。

话不多说，先上效果：

特点：突出一个简单实用，整个页面只有一个css文件和一张背景图片，css我还特意写在了内联样式中，没有用过多的库，适合后台管理系统登录界面快速开发，二次开发。配合各种后端语言或者js能快速出业务。

不适合：前台登录界面，原因：界面太简单，没有加入验证码，响应式，js验证，手机号验证，注册等功能。

使用：直接复制代码即可！css样式中body背景图片改成你自己的就可以啦！

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录界面</title>

  <style>
    html,
    body {
      /*并集选择器*/
      height: 100%;
    }

    body {
      background: url(./img/bg.jpg) 50% 50% no-repeat;
      background-size: cover;
      /*扩展以覆盖窗口*/
    }

    .login {
      width: 500px;
      height: 600px;
      background: white;
      box-shadow: 0px 0px 50px #333;
      /*这里实现元素的居中有多种实现方法*/
      position: absolute;
      /*绝对定位*/
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      padding: 90px 40px;
      box-sizing: border-box;
    }

    .login h3 {
      /*后代选择器*/
      font-size: 24px;
      margin-bottom: 50px;
    }

    .login form .inputBox {
      /*后代选择器*/
      position: relative;
      height: 40px;
      display: flex;
      /*弹性盒子 中心对齐*/
      align-items: center;
      margin-bottom: 20px;
    }

    .login form .inputBox input {
      /*后代选择器*/
      height: 30px;
      border: 0px;
      border-bottom: 1px solid #ccc;
      flex-grow: 1;
      /*扩展占据弹性容器剩余空间*/
      margin: 10px;
      padding-left: 5px;
      /*当焦点落到输入框上时，默认会有轮廓标识其状态，为美观将它删除*/
      outline: none;
    }

    .login form .inputBox input:focus {
      /*后代+伪类*/
      border: 1px solid dodgerblue;
    }

    .login form .inputBox label {
      /*后代选择器*/
      position: absolute;
      /*相对于弹性盒子绝对定位*/
      padding: 0 3px;
      left: 40px;
      top: 20px;
      /*父元素高为20*/
      color: dodgerblue;
      font-size: 14px;
      background: #fff;
      opacity: 0;
      /*不透明度*/
      transition: 0.5s;
      /*过渡用时*/
    }

    .login form .inputBox input:focus+label {
      /*后代+兄弟*/
      opacity: 1;
      /*不透明度*/
      top: -8px;
    }

    .submitButton {
      display: flex;
      /*弹性盒子 中心对齐*/
      align-items: center;
    }

    .submitButton input {
      /*后代选择器*/
      margin: 10% 10%;
      flex-grow: 1;
      cursor: pointer;
      /*更改光标*/
      height: 40px;
      line-height: 40px;
      background: dodgerblue;
      color: #fff;
      border: none;
      border-radius: 5px;
      /*按钮圆角*/
      outline: none;
    }

    .submitButton input:hover {
      /*后代+伪类*/
      box-shadow: 2px 2px 10px #555;
      transition: 0.3s;
    }

    .submitButton input:active {
      /*后代+伪类*/
      box-shadow: none;
      cursor: wait;
      /*更改光标*/
      outline: none;
    }
  </style>
</head>

<body>
  <div class="login">
    <h3>管理员登录</h3>
    <form action="#" method="POST">
      <div class="inputBox">

        <input type="text" class="name" name="name" autocomplete="off" placeholder="请输入用户名">

      </div>
      <div class="inputBox">

        <input type="password" class="inputPassword" autocomplete="off" placeholder="请输入密码" name="password">

      </div>

      <div class="submitButton">
        <input type="submit" value="点击登录">
      </div>
    </form>
  </div>
</body>


</html>