返回 完成用layu...... 登陆

完成用layui网站后台登录页面

҈果҈果҈果҈ ҈ ҈ 2018-12-24 21:49:41 323
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<script type="text/javascript" src ="static/layui/layui.js" ></script>
<style>
*{margin:0px;padding: 0px}
.login{width: 500px;margin: 100px auto;}
.logininfo{background:#fff;padding: 20px;border-radius: 5px;box-shadow: 5px 5px 20px #757575;}
</style>
</head>
<body style="background:#1E9FFF">
<div>
<div>
<form> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
    <div style="color: gray">
  <h2>后台管理系统</h2>   
   </div>
   <hr>
    <div>
  <label>用户名</label>
  <div>
      <input type="text"  placeholder="请输入用户名">
  </div>
</div>

<div>
  <label>密码</label>
  <div>
      <input type="text"  placeholder="请输入密码">
  </div>
</div>

<div>
    <div>
      <label>验证码</label>
       <div>
         <input >
       </div>
       <img src="static/layui/yz.png" alt="">
       </div>
       </div>

        <div>
    <div>
    <button>立即提交</button>
       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>

    </div>
</form>
</div>
</div>

<script src="layui.js"></script>
<script>
layui.use('form', function(){
  var form = layui.form;
  
  //各种基于事件的操作,下面会有进一步介绍
});
</script>
</body>

</html>

20181224213957.png

layui提供的风格使前端工作更多元化,也会自带些多余的属性。得经过风格需求对自带属性适当调整才能使页面装饰得更加精美。



最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网