layui模仿后台登录页面

Original 2019-07-05 09:39:11 412
abstract:<!DOCTYPE html><html><head>    <meta  charset="utf-8" />     <title>后台</title>    <link rel="stylesheet&qu

<!DOCTYPE html>

<html>

<head>

    <meta  charset="utf-8" /> 

    <title>后台</title>

    <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">

    <script type="text/javascript" src="static/layui/layui.js"></script>

</head>

<body style='background:#1E9FFF'>

    <div style="width: 500px;margin: 270px auto 0px;">

        <div style="background: #fff; border-radius: 4px;box-shadow: 5px 5px 20px #4444; padding: 20px;">

            <form class="layui-form">

                <div class="layui-form-item" style="color:gray">

                    <h2>后台管理系统</h2>

                </div>

                <hr>

              <div class="layui-form-item">

                <label class="layui-form-label">用户名</label>

                <div class="layui-input-block">

                    <input type="text" name="username" placeholder="请输入用户名" class="layui-input">

                </div>

            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">密码</label>

                <div class="layui-input-block">

                    <input type="password" name="username" placeholder="请输入密码" class="layui-input">

                </div>

            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">验证码</label>

                    <div class="layui-input-inline">

                        <input type="text"class="layui-input">

                    </div>

                    <<img src="" alt="">

             </div>       

              <div class="layui-form-item">

                <div class="layui-input-block">

                  <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>

                </div>

              </div>

            </form>

        </div>

    </div>

</body>

<script>

    layui.use(['layer', 'form'], function(){

      var layer = layui.layer

      ,form = layui.form;

      

      //layer.msg('Hello World');

    });

    //遵循原生吗哪来及用 组件丰富 体积小 加速布局 可以快速完成界面布局

</script>

</html>


Correcting teacher:天蓬老师Correction time:2019-07-05 14:43:05
Teacher's summary:使用框架的初衷就是不要再重复的造轮了, 造成的后果就是千人一面, 很多项目看上去, 外观都差不多, 就像手机, iphone没有出现之前, 啥样的都有, 折叠的, 方的, 圆的,苹果出了手机, 最后大家的手机又全部长得一样了, 这就是框架的作用.

Release Notes

Popular Entries