使用layui搭建一个后台登录页面

原创 2019-04-04 13:14:35 577
摘要:用layui 不用自己写很多样式,直接调用.真的很方便 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet

用layui 不用自己写很多样式,直接调用.真的很方便 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

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

<script src="static/layui/layui.js"></script>

<style>

body {

background-color: #1e9fff;

}

.container {

width: 500px;

margin: 270px auto 0px;

}

.login {

background: #fff;

border-radius: 4px;

box-shadow: 5px 5px 20px #4444;

padding: 20px;

}



</style>

</head>

<body>

<div class="container">

<div class="login">

<form class="layui-form">

<div class="layui-form-item" style="color: gray">

<h2>现代软件工作室--后台管理系统</h2>

</div>

<hr>

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

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

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

<input type="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="text" placeholder="请输入密码" 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="static/images/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>

</div>

</body>

</html>


批改老师:天蓬老师批改时间:2019-04-04 14:24:59
老师总结:框架是方便, 但也要掌握原生的写法, 不然时间一长会影响到你的提高, 因为很多个性化的东西, 还是要依赖原生的

发布手记

热门词条