利用layui框架做登陆页面

Original 2019-03-26 13:16:16 281
abstract:<!doctype html><html lang="en"><head>    <title>登陆页面</title>    <link rel="stylesheet"  type="text/css" href=&qu

<!doctype html>
<html lang="en">
<head>
   <title>登陆页面</title>
   <link rel="stylesheet"  type="text/css" href="/layui/css/layui.css">
   <script type="javascript" src="/layui/layui.js"></script>
   <style>
body{background:#007457;}
       .header{box-shadow:0 0  20px  #333;height:110px;}
       h1{color:#fff;display: inline-block; margin-left: 20px;line-height: 110px; }
       .connet{width:600px;height:300px; margin:180px  auto 0px;background: #f2f2f2; box-shadow:5px 5px  20px #333333;}
       .connet_nav{padding:20px 30px; color:#009688;}
       .layui-form{margin-top:20px;}
       .layui-form-item{margin-bottom:20px;}
       .layui-btn{margin-left:150px;}
   </style>
</head>
<body>
   <div class="header">
       <img style="height:100px " src="/images/gonghui.png">
       <h1>西藏烟草行业“五一”劳动知识竞赛题库抽取系统</h1>
   </div>
   <div class="connet">
       <div class="connet_nav">
           <h2>登陆系统</h2>
           <hr>
           <form class="layui-form" action="">
               <div class="layui-form-item">
                   <label class="layui-form-label">登陆名:</label>
                   <div class="layui-input-block">
                       <input type="text" name="text"  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="password" placeholder="请输入您的密码"  class="layui-input">
                   </div>
               </div>
               <div class="layui-form-item">
                   <div class="layui-input-block">
                       <button class="layui-btn" lay-submit lay-filter="formDemo">登陆</button>
                   </div>
           </form>
       </div>
   </div>
</body>
</html>
<script>
$(function () {

   })
</script>


//总结:一直没太高董layui,学了一点后发现,其实简单,就是再官网上看一些效果,然后class复制过来就可以,但是有个缺点就是用久了可能要忘记原生布局了。

Correcting teacher:灭绝师太Correction time:2019-03-26 16:49:31
Teacher's summary:layui只是简单的补丁是框架,实际项目中用的不多,不要顾此失彼哦!

Release Notes

Popular Entries