abstrak：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登錄界面</title>
<link rel="stylesheet" href="layui-v2.4.5/layui/css/layui.css">
<script src="layui-v2.4.5/layui/layui.js"></script>
<style>
body{
background-color:#0491FF;
}
.login_bigbox{
width:500px;
margin:200px auto 0px;
background-color:white;
}
.login_twobox{
padding:20px;
border-radius: 5px;
box-shadow: 5px 5px 20px #444444;
}
.layui-form-item> h2{
color:gray;
}
</style>
</head>
<body>
<div class="login_bigbox">
<div class="login_twobox">
<form action="#" method="post" class="layui-form">
<div class="layui-form-item">
<h2>
后臺(tái)管理系統(tǒng)
</h2>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用戶(hù)名</label>
<div class="layui-input-block">
<input type="text" required lay-verify="required" placeholder="請(qǐng)輸入用戶(hù)名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密碼</label>
<div class="layui-input-block">
<input type="password" required lay-verify="required" placeholder="請(qǐng)輸入密碼" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">驗(yàn)證碼</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="請(qǐng)輸入驗(yàn)證碼" autocomplete="off" class="layui-input">
</div>
<img src="yz.png" alt="驗(yàn)證碼">
</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>
Guru membetulkan：韋小寶Masa pembetulan：2019-02-20 09:06:54
Rumusan guru：使用layui來(lái)進(jìn)行登錄頁(yè)面的搭建還是很簡(jiǎn)單的 使用layui中原有的頁(yè)面元素搭建起來(lái)很快捷 并且樣式也不丑