登录界面模板

最新推荐文章于 2023-07-11 09:19:19 发布

m0_54088351

最新推荐文章于 2023-07-11 09:19:19 发布

阅读量252

点赞数

本文链接：https://blog.csdn.net/m0_54088351/article/details/119545777

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link rel="stylesheet" href="layui/css/layui.css" media="all">

       <script src="layui/layui.js"></script>
       <style type="text/css">

           body{
               margin: 0;
               padding: 0;
               background-color: #2b4b6b;
           }
           .head{
               width:450px ;
               height: 300px;
               //background-color: #fff;
               background: #2b4b6b;
               border-radius: 5px;
               position: absolute;
               top: 50%;
               left: 50%;
               transform: translate(-50%,-50%);
               box-shadow:0 0 10px aliceblue;
           }
           .avatar_box{
               height: 130px;
               width: 130px;
               border-radius: 50%;
               border: 1px solid #eee;
               padding: 10px;
               background-color:#2b4b6b ;
               position: absolute;
               left: 50%;
               transform: translate(-50%,-50%);
           }
           img{
               height: 130px;
               width: 130px;
               border-radius: 50%;
               background-color: #eee;
           }
           .layui-form{
               width: 100%;
               position: absolute;
               bottom: 50px;

                   padding:0 20px;
                   box-sizing: border-box;
           }
           .btns{
               display: flex;
               justify-content: flex-end;
           }
           .inputdiv{
           display:flex;
                                   border: 1px solid #D2D2D2!important;
                                   background-color: #fff;
                                   //height: 38px;
                                   line-height: 38px;
                                   padding: 0px 19px;
           border-radius: 20px;
           }
           .layui-input {
           border-style: none;
           }

       </style>
   </head>
   <body >
       <div class="head">
           <div class="avatar_box">
           <img src="./img/name.jpg" class=" layui-anim layui-anim-scalesmall-spring">
       </div>
       <form class="layui-form" >
       <div class="layui-form-item">
       <div class="inputdiv">
       <i class="layui-icon layui-icon-username"></i>
       <input type="text" name="username" lay-verify="title" class="layui-input" >
       </div>
       </div>
           <div class="layui-form-item">
           <div class="inputdiv">
           <i class="layui-icon layui-icon-password"></i>
           <input type="text" name="username" lay-verify="title" autocomplete="off" class="layui-input" >
           </div>
           </div>
           <div class="btns">
               <button type="button"    class="layui-btn layui-btn-normal">登录</button>
               <button type="button"    class="layui-btn layui-btn-normal">重置</button>
           </div>
           </form>
       </div>

       <script>
       //Demo
       layui.use('form', function(){
       var form = layui.form;
       });
       </script>
   </body>
</html>

m0_54088351

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登录界面模板

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> <script src="layui/layui.js"&...
复制链接

扫一扫