layui后台登录页面作业

原创 2019-01-29 15:00:34 435
摘要:<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>登录</title>    <link rel="stylesheet" type="

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>登录</title>

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

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

</head>


<body style="background: lightblue;">

  <div style="width: 440px; margin: 0 auto; margin-top: 150px;">

    <div style="background: pink; border-radius: 15px; box-shadow: 5px 5px 20px #444; color: #f60;">

      <form class="layui-form">

        <div class="layui-form-item" style="color: #888; margin-left: 30px; padding-top: 20px;">

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

        </div>

        <hr>

        <div class="layui-form-item" style="width: 400px;">

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

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

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

          </div>

        </div>

        <div class="layui-form-item" style="width: 400px;">

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

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

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

          </div>

        </div>

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

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

          <div class="layui-input-inline" style="width: 140px;">

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

          </div>

          <img src="../yz.png" alt="">

        </div>

        <div class="layui-form-item" style="padding-bottom: 20px;">

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

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

          </div>

        </div>

      </form>

    </div>

  </div>

</body>

</html>


layui是前端 UI 框架,方便使用者进行界面的快速开发。


批改老师:韦小宝批改时间:2019-01-30 09:22:56
老师总结:layui还是蛮好掌握的 只需要把文档多看看就可以 如果不理解layui的话写起来那就麻烦死了

发布手记

热门词条