标签：web name layui 冲刺 食堂 col value btn method
当时也就一个星期我做了注册登录页面和我们web的主界面，给大家展示一下
Login.jsp
<%@page import="java.util.*"%>
<%@page import="bean.*"%>
<%@page import="dao.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from www.zi-han.net/theme/hplus/login_v2.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:49 GMT -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>H+ 后台主题UI框架 - 登录</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
<link href="hplus/css/bootstrap.min.css" rel="stylesheet">
<link href="hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="hplus/css/animate.min.css" rel="stylesheet">
<link href="hplus/css/style.min.css" rel="stylesheet">
<link href="hplus/css/login.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html" />
<![endif]-->
<script>
if(window.top!==window.self){window.top.location=window.location};
</script>
</head>
<body class="signin">
<div class="signinpanel">
<div class="row">
<div class="col-sm-7">
<div class="signin-info">
<div class="logopanel m-b">
<h1>[ H+ ]</h1>
</div>
<div class="m-b"></div>
<h4>欢迎使用 <strong>超级食堂</strong></h4>
<ul class="m-b">
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势一</li>
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势二</li>
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势三</li>
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势四</li>
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势五</li>
</ul>
<strong>还没有账号？ <a href="zhuce.jsp">立即注册»</a></strong>
</div>
</div>
<div class="col-sm-5">
<form action="/shiwu/r2?method=denglu" method="post">
<h4 class="no-margins">登录：</h4>
<p class="m-t-md">登录到超级食堂</p>
<input type="text" class="form-control uname" placeholder="用户名" name="username" required="required" />
<input type="password" class="form-control pword m-b" placeholder="密码" name="password" required="required" />
<a href="zhuce.jsp">忘记密码了？</a>
<button class="btn btn-success btn-block">登录</button>
</form>
</div>
</div>
<div class="signup-footer">
<div class="pull-left">
<%
SimpleDateFormat sim=new SimpleDateFormat("yyyy年MM月dd日 a hh点mm分ss秒");
String newTime = sim.format(new Date());
%>
© 当前时间：<%=newTime %>
</div>
</div>
</div>
<script>
var w=<%= (String)request.getAttribute("message") %>
if(w!=null)
{
alert(q);
location.reload();
}
</script>
</body>
</html>
Zhuce.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" charset="utf-8"></script>
</head>
<body>
<form action="/shiwu/r2?method=zhuce" method="post" class="layui-form">
<div class="layui-container">
<br>
<h1 style=" text-color:"> 注 册</h1>
<br>
<br>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">账号框</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入账号" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">手机</label>
<div class="layui-input-inline">
<input type="tel" name="number" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="required/email" autocomplete="off" class="layui-input">
</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="男" checked>
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">年龄</label>
<div class="layui-input-inline">
<input type="text" name="age" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">体重</label>
<div class="layui-input-inline">
<input type="text" name="weight" lay-verify="required/email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md2">
</div>
<div class="layui-col-md2">
<button type="submit" class="layui-btn layui-btn-radius layui-btn-normal" style="text-align:center;">提交</button>
</div>
<div class="layui-col-md3">
<button type="reset" class="layui-btn layui-btn-radius layui-btn-normal" style="text-align:center;">刷新</button>
</div>
</div>
</div>
</div>
</form>
<script>
//创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor');
//自定义验证规则
form.verify({
title: function(value){
if(value.length < 5){
return '标题至少得5个字符啊';
}
}
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
,content: function(value){
layedit.sync(editIndex);
}
});
//监听指定开关
form.on('switch(switchTest)', function(data){
layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
});
});
var age=document.getelementById("age");
if(age>80||age<10)
{
alter("请输入正确年龄");
location.reload();
}
</script>
</body>
</html>
Daohang.jsp
<%@page import="com.mysql.cj.protocol.Message"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="all">
<script src="bootstrap/js/jquery-3.4.1.js" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
<style type="text/css">
body{
}
.center-in-center{
margin:0 auto;
padding:0;
display:block;
}
.ww{
margin:20px;
}
#w{
text-decoration:none;
color:black;
font-size:15px;
font-weight:bold;
}
hr{
height:2px;
background-color:#FFFF00;
}
.search-btn{
margin-top:25px;
float:left;
border:2px solid #ffc900;
width:90px;
height:50px;
background-color:#ffc900;
text-align:center;
line-height:50px;
}
.search-input{
margin-top:25px;
float:left;
border:2px solid #ffc900;
width:500px;
height:50px;
padding-left:5px;
}
.center{
margin-top:10px;
text-align:centern;
}
</style>
</head>
<body>
<script type="text/javascript">
if(<%= request.getAttribute("message")!=null %>){
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('点赞成功');
});
//alert("点赞成功");
}
</script>
<div class="layui-carousel center-in-center" id="test1">
<div carousel-item >
<div > <img src="img/1.gif" style="width:100%;height:100%;"> </div>
<div><img src="img/2.jpg" style="width:100%;height:100%;"></div>
<div><img src="img/3.jpg" style="width:100%;height:100%;"></div>
<div><img src="img/6.jpg" style="width:100%;height:100%;"></div>
<div><img src="img/5.jpg" style="width:100%;height:100%;"></div>
<div><img src="img/7.jpg" style="width:100%;height:100%;" ></div>
</div>
</div>
<div class="container-fluid ww">
<div class="row">
<div class="col-md-3" >
<img alt="石家庄铁道大学" src="img/石家庄铁道大学校标.png" height="100px" class="img-circle">
</div>
<div class="col-md-5">
<form action="/shiwu/r2?method=sousuo" method="post">
<input class="search-input" type="text" placeholder="请输入食物名称" name="name">
<input type="submit" class="search-btn" value="查询">
</form>
</div>
<div class="col-md-4"></div>
</div>
</div>
<div class="container">
<div class="row center ">
<div class="col-sm-3 col-md-3 col-xs-3 center">
<a href="/shiwu/r2?method=xiaochi"><img alt="小吃" src="img/小吃图标.png" id="lb66" width="100px" height="100px"></a>
<!-- <input name="小吃" value="小吃" type="hidden">-->
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb2" >
<a href="/shiwu/r2?method=mifan"><img alt="米饭" src="img/米饭图标.png" width="100px" height="100px"></a>
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb3" >
<a href="/shiwu/r2?method=miandian"><img alt="面点" src="img/面点图标.png" width="100px" height="100px"></a>
</div>
<div class="col-sm-3 col-md-43 col-xs-3 center" id="lb4" >
<a href="/shiwu/r2?method=mianshi"><img alt="面食" src="img/面食图标.png" width="100px" height="100px"></a>
</div>
</div>
<div class="row ">
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb1" >
小吃
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb2" >
米饭
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb3" >
面点
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb4" >
面食
</div>
</div>
<div class="row ">
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb5">
<a href="/shiwu/r2?method=mianshipeicai"><img alt="面食配菜" src="img/面食配菜配菜.png" width="100px" height="100px"></a>
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb6" >
<a href="/shiwu/r2?method=zhongshijiancan"><img alt="中式简餐" src="img/中式简餐.png" width="100px" height="100px"></a>
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb7" >
<a href="/shiwu/r2?method=yinpin"><img alt="饮品" src="img/饮品.png" width="100px" height="100px"></a>
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb8" >
<a href="/shiwu/r2?method=tang"><img alt="汤" src="img/汤.png" width="100px" height="100px"></a>
</div>
</div>
<div class="row ">
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb5" >
面食配菜
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb6" >
中式简餐
</div><div class="col-sm-3 col-md-3 col-xs-3 center" id="lb7" >
饮品
</div><div class="col-sm-3 col-md-3 col-xs-3 center" id="lb8" >
汤
</div>
</div>
</div>
<div class="ww">
<div class="container">
<div >
<img alt="" src="img/图标.png" >
<a href="" id="w">学一特色美食</a>
<hr noshade="noshade">
</div>
<div class="row">
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/天下好面.jpg" alt="天下好面" >
<div class="caption">
<h3>天下好面</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="天下好面" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"> </p>
</form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/正新鸡排.jpg" alt="正新鸡排" >
<div class="caption">
<h3>正新鸡排</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="正新鸡排" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/黄焖鸡米饭.jpg" alt="黄焖鸡米饭">
<div class="caption">
<h3>黄焖鸡米饭</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="黄焖鸡" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/铁板厨房.jpg" alt="铁板厨房" >
<div class="caption">
<h3>铁板厨房</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="铁板厨房" name="name">
<p><input type="submit" value="点赞"class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/闲闷湖茶饮.jpg" alt="闲闷湖茶饮" >
<div class="caption">
<h3>闲闷湖茶饮-研究所</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="天下好面" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/淮南牛肉汤.jpg" alt="淮南牛肉汤">
<div class="caption">
<h3>淮南牛肉汤</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="淮南牛肉饭" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
</div>
<div >
<img alt="" src="img/图标.png" >
<a href="" id="w">学二特色美食</a>
<hr noshade="noshade">
</div>
<div class="row">
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/猪脚饭.jpg" alt="猪脚饭" >
<div class="caption">
<h3>猪脚饭</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="特色猪脚饭" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"> </p>
</form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/烤鱼饭.jpg" alt="烤鱼饭" >
<div class="caption">
<h3>无骨烤鱼饭</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="无骨烤鱼饭" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/熏肉大饼.jpg" alt="熏肉大饼">
<div class="caption">
<h3>熏肉大饼</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="水饺馄饨" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/特色水饺.jpg" alt="特色水饺" >
<div class="caption">
<h3>特色水饺</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="手工水饺" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/麻辣烫.jpg" alt="麻辣烫" >
<div class="caption">
<h3>骨汤麻辣烫</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="骨汤麻辣烫" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/炸鸡汉堡.jpg" alt="炸鸡汉堡">
<div class="caption">
<h3>美味炸鸡汉堡</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="美味炸鸡汉堡" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
</div>
<div >
<img alt="" src="img/图标.png" >
<a href="" id="w">综餐特色美食</a>
<hr noshade="noshade">
</div>
<div class="row">
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/螺霸王螺蛳粉.jpg" alt="螺王王螺蛳粉" >
<div class="caption">
<h3>螺王王螺蛳粉</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="螺王王螺蛳粉" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"> </p>
</form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/自选餐.jpg" alt="自选餐" >
<div class="caption">
<h3>自选餐</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="自选餐" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/麦田密语烘焙房.jpg" alt="麦田密语烘焙房">
<div class="caption">
<h3>麦田密语烘焙房</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="麦田密语.烘焙" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/汇巢鲜茶.jpg" alt="汇巢鲜茶" >
<div class="caption">
<h3>汇巢鲜茶</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="汇巢鲜茶" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/鸭血粉丝汤.jpg" alt="鸭血粉丝汤" >
<div class="caption">
<h3>鸭血粉丝汤</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="鸭血粉丝" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/拉面.jpg" alt="拉面">
<div class="caption">
<h3>拉面</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="米饭套餐.拉面" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
</div>
</div>
</div>
<hr style=" height:1px; ">
<div style=" text-align:center;">
石家庄铁道大学 铁道游击队制作 如有疑惑 请+Q：3011766738 <br>
<br><br>
</div>
<script>
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,arrow: 'hover' //始终显示箭头
,anim: 'fade'
,indicator: 'none'
,height: '500px'
//,anim: 'updown' //切换动画方式
});
});
</script>
</body>
</html>
挺多的就不给大家进行一一的展示了
标签：web,name,layui,冲刺,食堂,col,value,btn,method 来源： https://www.cnblogs.com/1774323810com/p/16375149.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。