Share a login page (front-end framework layui) -20200318

Renderings

 

 

The summary page: 

1, the front end of the frame layui

layui official website: https://www.layui.com/ , after download, you can use a simple configuration

2, layui using the reference module

 

 

<script>
    layui.use(['form'], function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>

Use 3 icon, the icon style class selector is a layui-icon layui-icon-username, if you want to customize the icon style referenced, follow it with your own style class selector like

<!--            账号-->
            <div class="layui-form-item">
                <i class="layui-icon layui-icon-username myIcon" style="top: 80px;"></i>
                <input class="layui-input myInput" type="text" name="title" required  lay-verify="required" placeholder="账号" autocomplete="off">
            </div>

 

 

 

4div centering horizontal and vertical, using the positioning manner, automatically calculates Transform div width and height of, respectively, up, left 50% of the height and width of the movement itself, this can in div without knowing the width and height, to achieve horizontal and vertical centered.

        / * Log provided div * / 
        .myLogin { 
            width : 400px ;
             / * absolute positioning mode * / 
            position : Absolute ;
             / * positioning the location registration div * / 
            left : 50% ; 
            Top : 50% ; 
            Transform : Translate ( -50%, -50%) ; 
            / * padding * / 
            padding-Top : 20px ; 
            padding-left : 10px ;
            padding-right: 10px;
        }

5, recommended background image URL

https://www.toptal.com/designers/subtlepatterns/

There are many simple, concise background for us to choose, it is worth a try, it is free Oh.

===END===

Need the source code of friends, left micro-channel public concern number, reply Sign in 20,200,318, you can get

There are small series would like to explore and learn, small micro-channel can be added under: liu1275271818