layui后台登录上

Original 2019-01-27 23:38:01 266
abstract:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/layui.css" /> <script type="text/javascript&

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

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

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

<title></title>

<style>

input {

margin-top: 3px;

}

</style>

</head>


<body style="background: #1E9FFF;">

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

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

<form class="layui-form" style="color: #aaa;">

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

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

</div>

<hr />

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

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

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

</div>

<label class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>

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

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

</div>

<label class="layui-form-label">密码框</label>

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


<input type="password" name="password" required lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input">

<img src="" />


</div>

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

<button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>


</div>


</form>

</div>


</div>

</body>


</html>

<!--引入框架css与js添加相应的属性名进行控制模块 从而快速搭建节省时间-->

Correcting teacher:天蓬老师Correction time:2019-01-28 09:12:24
Teacher's summary:layUI做为现在国内比较流行的一个前端框架, 其主要功能用在后台的搭建上, 内置了非常多的样式可以用, 并且 还提供了一个后台模板的成品, 可以直接套用的.

Release Notes

Popular Entries