layui登录页面_PHP中文网手记

摘要：基本思路：首先要引入layui的核心样式文件和基础核心库两个部分。之后借助layui工具在设计的网页中依次加入后台管理系统以及通过表单栏添加的用户名、密码、以及登录和验证码部分，最后完成相关布局。全部代码：<!DOCTYPE html> <html> <head> <title>登录<

基本思路：

首先要引入layui的核心样式文件和基础核心库两个部分。之后借助layui工具在设计的网页中依次加入后台管理系统以及通过表单栏添加的用户名、密码、以及登录和验证码部分，最后完成相关布局。

全部代码：

<!DOCTYPE html>
<html>
<head>
	<title>登录</title>
	<link rel="stylesheet" type="text/css" href="../static/plugins/layui/css/layui.css">
	<script type="text/javascript" src="../static/plugins/layui/layui.js"></script>
</head>
<body style="background:#1E9FFF">
	<div style="width: 500px;margin:270px auto 0px; ">
		<div style="background: #fff; border-radius: 4px;box-shadow: 5px 5px 20px #4444;padding: 20px;">
			<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="password"  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="../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>

小结:

layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式。外在很简单但是其中设计的部分样式很精美，体积轻盈，组件也十分丰富，非常适合界面的快速开发。在编写前端程序的时候可能会在一些地方需要样式精美的设计，而layui所提供的部分可以有效解决，可以在自身编写的同时借鉴layui进行编写，从而使网页观看和使用起来更为方便且美观。

批改老师：天蓬老师批改时间：2019-03-22 09:02:13
老师总结：layUI是近年来在国内比较流行的前端框架, 但是有越来越商业化的趋势, 建议多了解几个, 以备用

layui登录页面

热门词条