layui后台登陆界面

原创 2018-12-30 19:35:06 184
摘要:<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <link rel="stylesheet" href="layui/css/layui.css">  <script type=&quo

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

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

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

  <title>登陆</title>

</head>

<body style="background:#00cccc">

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

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

       <form>

         <div style="color:gray">

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

           </div>

           <hr>

           <div>

              <label>用户名</label>

              <div>

                 <input type="text" name="title" required lay-verify="required" placeholder="请输入用户名" autocomplete="off">

              </div>

           </div>

           <div>

               <label>密码</label>

               <div>

                  <input type="text" name="title" required lay-verify="required" placeholder="请输入密码" autocomplete="off">

               </div>

           </div>

           <div>

               <label>验证码</label>

               <div>

                  <input type="text" name="title" required lay-verify="required" autocomplete="off">

               </div>

               <img src="images/yzm.jpg" style="width:125px">

           </div>

           <div>

              <div>

                 <button lay-submit lay-filter="formDemo">登陆</button>

              </div>

           </div>

       </form>

   </div>

</div>


</body>

</html>


批改老师:天蓬老师批改时间:2018-12-30 20:50:26
老师总结:layui中有很多实用的类样式, 案例中并没有全部用到,更多的可以到layui官网上去看,不过得先注册才可以

发布手记

热门词条