前言
提示：以下是本篇文章正文内容，下面案例可供参考
一、layout.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>武汉城市学院</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header layui-bg-blue">
<div class="layui-logo layui-bg-blue">
<img src="wtc.jpg" alt="" class=layui-nav-img>武汉城市学院</div>
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item">
<a herf="#"><i class="layui-icon layui-icon-cellphone"></i>系统首页</a>
</li>
<li class="layui-nav-item">
<a herf="#"><i class="layui-icon layui-icon-cellphone"></i>系统管理</a>
</li>
<li class="layui-nav-item">
<a herf="#"><i class="layui-icon layui-icon-cellphone"></i>进入系统</a>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a herf="jacascript:;">
<img alt="" src="wtc.jpg" class="layui-nav-img">系统管理员</a>
<dl class="layui-nav-child">
<dd><a href="#" alt="">修改密码</a> </dd>
<dd><a href="#" alt="">个人信息</a> </dd>
<dd><a href="#" alt="">退出登录</a> </dd>
</dl>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree layui-bg-black">
<li class="layui-nav-item">
<a herf="jacascript:;">系统首页</a>
<dl class="layui-nav-child">
<dd><a href="layui_form.jsp" target="frame">layui表单</a></dd>
<dd><a href="layui_table.jsp" target="frame">layui表格</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<iframe name="frame" frameborder="0" width="100%" height="100%"></iframe>
</div>
<div class="layui-footer" style="text-align:center">
<!-- 底部固定区域 -->
版权所有 ©武汉城市学院
11111111@qq.com
</div>
</div>
<script type="text/javascript" src="layui/layui.js"></script>
</body>
</html>
二、layui_form
代码如下（示例）：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layui from表单</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
<h2>layui from表单</h2>
<hr>
</div>
<!--layui_table-->
<from class="layui-form" action="" method="post">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="title" placeholder="请输入" value="请输入" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="title1" placeholder="请输入" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layui-form-label">下拉列表</label>
<div class="layui-input-inline">
<select>
<option value="1">====请选择====</option>
<option value="2">19级软件1班</option>
<option value="3">19级软件2班</option>
<option value="4">19级软件3班</option>
<option value="5">19级软件4班</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选按钮</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选按钮</label>
<div class="layui-input-block">
<input type="checkbox" name="c" value="c" title="c" lay-skin="primary"checked>
<input type="checkbox" name="java" value="java" title="java" lay-skin="primary">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">个性签名</label>
<div class="layui-input-">
<textarea rows="10" cols="100" style="resize:none;">
1、每一个不曾起舞的日子，都是对生命的辜负。——尼采
2、我是你路上最后的一个过客，最后的一个春天，最后的一场雪，最后的一次求生的战争。——保尔·艾吕雅
3、凌晨四点钟，看到海棠花未眠。——川端康成
4、哪里会有人喜欢孤独，不过是不喜欢失望。——村上春树
5、你最可爱，我说时来不及思索，但思索之后，还是这样说。——普希金
6、为你，千千万万遍。——卡勒德·胡赛尼
7、我只是个戏子，在别人的故事里，流着自己的泪。——席慕蓉
8、不多不多，以后还可以少吃一点。——三毛
9、你记得也好，最好你忘掉，在这交会时互放的光亮。——徐志摩
</textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">日期</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test1">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn layui-btn-normal">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<input type="submit" value="提交" class="layui-btn layui-btn-warm">
<button type="reset" class="layui-btn layui-btn-priamry">
<i class="layui-icon layui-icon-refresh-3"></i>
重置
</button>
</div>
</div>
</from>
<script type="text/javascript" src="layui/layui.js"></script>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#test1' //指定元素
});
});
</script>
</body>
</html>
三、layui_table
代码如下（示例）：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Layui表格</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head>
<body>
<!--<table border="1" cellspacing="0" width="600" hight="600" style="text-align:center">
<thread>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table> -->
<div class="layui-container">
<h2>Layui表格</h2>
<hr>
<table class="layui-table">
<thread>
<tr>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
<th>性别</th>
<th>家庭地址</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="layui/layui.js"></script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
