layui 布局后台登录页面
发现有个问题:老师布局的时候本来就已经设置好了外层 div,然后又写一个 div,这是有必要的还是多写了?
还有一个问题是:layui 可以远程引入吗?就像 jq 那样直接写个链接就能引入.
总结:
layui 使用方法:
在 head 内引入 css 文件和 js 文件:
<link rel="stylesheet" href="layui-v2.4.5/layui/css/layui.css"> <script src="layui-v2.4.5/layui/layui.js"></script>
css的原理比较简单,就是 layui 将需要用到的元素样式都设置好了,布局基本不需要重新设置 元素css样式,如果想自定义元素样式,也可以在标签内书写自定义的 css 代码.js 应该复杂点,但用法跟 css 文件的用法差不多,只需专心写代码就行了,布局是 layui 的默认样式.
实现效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="layui-v2.4.5/layui/css/layui.css">
<script src="layui-v2.4.5/layui/layui.js"></script>
<style>
.box {
background: white;
margin: 300px auto 0px;
width: 500px;
border-radius: 4px;
box-shadow: 10px 10px 10px grey;
padding: 20px;
}
</style>
</head>
<body style="background:#1e9fff">
<div class="box">
<form class="layui-form">
<div class="layui-form-item" style="color:grey">
<h2>后台管理系统</h2>
</div>
<hr>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密 码</label>
<div class="layui-input-block">
<input type="text" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证码</label>
<div class="layui-input-inline">
<input type="text" class="layui-input">
</div>
<img src="yz.png">
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
</div>
</div>
</form>
</div>
</body>
</html>
