登陆页面

直接使用代码

图片素材

css代码

 <style>
.login-bg{
    background:url(http://www.bootfastui.cn/img/2021/0422/bg.png) no-repeat center;background-size:cover;overflow:hidden;width:100%;height:100%}
   .login{margin:120px auto 0 auto;min-height:420px;max-width:420px;padding:40px;background-color:#ffffff;margin-left:auto;margin-right:auto;border-radius:4px;
    box-sizing:border-box;}

   .login .message{margin:10px 0 0 -58px;padding:18px 10px 18px 60px;background:#189F92;position:relative;color:#fff;font-size:16px;}
   .login #darkbannerwrap{background:url(http://www.bootfastui.cn/img/2021/0422/aiwrap.png);width:18px;height:10px;margin:0 0 20px -58px;position:relative;}
   .login input[type=text],.login input[type=file],.login input[type=password],.login input[type=email],select{border:1px solid #DCDEE0;vertical-align:middle;border-radius:3px;height:50px;padding:0px 16px;font-size:14px;color:#555555;outline:none;width:100%;box-sizing:border-box;}
   .login input[type=text]:focus,.login input[type=file]:focus,.login input[type=password]:focus,.login input[type=email]:focus,select:focus{border:1px solid #27A9E3;}
   .login input[type=submit],.login input[type=button]{display:inline-block;vertical-align:middle;padding:12px 24px;margin:0px;font-size:18px;line-height:24px;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;color:#ffffff;background-color:#189F92;border-radius:3px;border:none;-webkit-appearance:none;outline:none;width:100%;}
   .login hr{background:#fff url() 0 0 no-repeat;}
   .login hr.hr15{height:15px;border:none;margin:0px;padding:0px;width:100%;}
   .login hr.hr20{height:20px;border:none;margin:0px;padding:0px;width:100%;}
   
</style>

HTML+JS代码

 
<body class="login-bg">

  <div class="login layui-anim layui-anim-up">
    <div class="message">用户登陆</div>
    <div id="darkbannerwrap"></div>

    <form method="post" class="layui-form">
      <input name="mobile" placeholder="请输入手机号" type="text" lay-verify="required" class="layui-input">
      <hr class="hr15">

      <input name="password" placeholder="请输入密码" type="password" lay-verify="required" class="layui-input">
      <hr class="hr15">

      <input value="提交" lay-submit lay-filter="login" style="width:100%;" type="submit">
      <hr class="hr20">
    </form>
   
  </div>

</body>