后台登陆页面形成

原创 2018-12-29 09:08:17 284
摘要:使用layui做后台登陆页面<!DOCTYPE html><html><head> <title>后台登录</title> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"> <s

使用layui做后台登陆页面

<!DOCTYPE html>

<html>

<head>

<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: #1E9FFF">


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



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


<form class="layui-form" action="">

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

<h2>后台管理</h2>

<hr> <!-- 底部横线 -->

</div>

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

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

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

      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">

    </div>

  </div>

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

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

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

      <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">

    </div>

  </div>

  

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

    <div class="layui-inline">

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

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

        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">

      </div>

    </div>

      

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

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

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

      <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">

       

    </div>

    <img src="../mI/static/images/ghs.png">

  </div>

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

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

      <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>

      <button type="reset" class="layui-btn layui-btn-primary">重置</button>

    </div>

  </div>

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

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

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

        <input type="text" name="" lay-verify="" autocomplete="off" class="layui-input">

        <img src="../mI/static/images/footericon1.png">

      </div>

    </div> -->

  </div>

</form>

</div>


</div>


</body>

</html>


批改老师:天蓬老师批改时间:2018-12-29 09:22:19
老师总结:密码输入框的type不是text,是password,页面写完后,最好测试一下,看看是否符合你的预期

发布手记

热门词条