登录页面

下面展示登录页面 代码如下。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="loginHtml">
<head><meta charset="utf-8"><title></title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no"><!--<link rel="icon" href="/resources/favicon.ico">--><link rel="stylesheet" href="../../layui/css/layui.css" media="all"><link rel="stylesheet" href="../../css/public.css" media="all"></head>
<body class="loginBody">
<form class="layui-form"><div class="login_face"><img src="../../images/Wjlogo.png" height="60px" class="userAvatar"></div><div><div class="loginbox-title">登录</div><div class="loginbox-social"><div class="social-title">系统</div></div><div class="layui-form-item input-item"><label>用户名</label><input type="text" placeholder="请输入用户名" autocomplete="off" name="username" class="layui-input"lay-verify="required"></div><div class="layui-form-item input-item"><label>密码</label><input type="password" placeholder="请输入密码" autocomplete="off" name="password" class="layui-input"lay-verify="required"></div><div class="layui-form-item input-item" id="imgCode"><input type="text" placeholder="请输入验证码" name="code" autocomplete="off" id="code" class="layui-input"><img style="margin-right: 20px" width="100px" id="verify_code_img" height="32"src="/verifyCode/getImg" onclick="javascript:changeImg()"><br></div><div class="layui-form-item"><button class="layui-btn layui-block" lay-filter="login" lay-submit>登录</button></div><div class="layui-form-item"><a href="/register/toRegister">还未账户？点击注册</a><a style="text-decoration:underline  ;padding-left: 10px;color: #2badce" href="/">回首页</a><!--<input id="butt" type="button" value="注册" /><br><br><br>--></div>
</form>
</body><script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/cache.js"></script>
<script type="text/javascript" src="../../js/login.js"></script></html>

页面效果如图：

注册页面

下面展示注册页面 代码如下。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="../../layui/css/layui.css"/><link rel="stylesheet" href="../../css/public.css">
</head><body style="background-image: url('/images/bg2.jpg')"><div id="gb"><form class="layui-form" action=""><input type="hidden" id="us" th:value="${session.user}"><input type="hidden" id="imgs" th:if="${session.user!=null}" th:value="${session.user.avatarUrl}"><input type="hidden" name="id" th:if="${session.user!=null}" th:value="${session.user.id}"><div class="registerbox-title">用户注册中心</div><div class="layui-form-item"><label class="layui-form-label">用户账号</label><div class="layui-input-inline"><input type="text" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off"th:value="${session.user!=null?session.user.username:''}" 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="password" required lay-verify="pwd" placeholder="请输入密码" autocomplete="off"th:value="${session.user!=null?session.user.password:''}" class="layui-input" id="pass1"></div></div><div class="layui-form-item"><label class="layui-form-label">确认密码</label><div class="layui-input-inline"><input type="password" name="passwords" required lay-verify="pwd" placeholder="请再次输入密码"th:value="${session.user!=null?session.user.password:''}" autocomplete="off" class="layui-input" id="pass2"></div></div><div class="layui-form-item"><label class="layui-form-label">性别</label><div class="layui-input-block" th:if="${session.user!=null}"><input type="radio" class="layui-disabled" disabled="disabled" name="sex" value="0" checked="${session.user.sex==0?'checked':''}" title="男"><input type="radio" class="layui-disabled" disabled="disabled" name="sex" value="1" checked="${session.user.sex==1?'checked':''}" title="女"></div><div class="layui-input-block" th:if="${session.user==null}"><input type="radio" name="sex" value="0" title="男" checked><input type="radio" name="sex" value="1" title="女"></div></div><div class="layui-form-item"><label class="layui-form-label">真实姓名</label><div class="layui-input-inline"><input type="text" name="name" required lay-verify="name" placeholder="请输入您的姓名"th:value="${session.user!=null?session.user.name:''}" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-upload"><button type="button" class="layui-btn" id="test1">上传图片</button><div class="layui-upload-list"><!--<img class="layui-upload-img" th:src="${session.user!=null?session.user.avatarUrl:'/images/mr.png'}"--><img class="layui-upload-img"width="100px" height="100px" id="demo1"><p id="demoText"></p></div><!--上传返回的图片地址--><input type="hidden" name="avatarUrl" id="uploadImg" value=""></div></div><div class="layui-form-item"><div class="layui-input-block"><a style="text-decoration:underline   ;padding-right: 20px;color: #2badce" href="/">回首页</a><button class="layui-btn" lay-submit lay-filter="formDemo">注册</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></div>
</body><script type="text/javascript" src="../../js/jquery-min.js"></script>
<!--<script type="text/javascript" src="../../layui/layui.all.js"></script>-->
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/register.js"></script>
</html>

页面效果如下：

附加CSS，JS代码

JS代码

cache.js 实例代码如下

var cacheStr = window.sessionStorage.getItem("cache"),oneLoginStr = window.sessionStorage.getItem("oneLogin");
layui.use(['form','jquery',"layer"],function() {var form = layui.form,$ = layui.jquery,layer = parent.layer === undefined ? layui.layer : top.layer;//判断是否web端打开if(!/http(s*):\/\//.test(location.href)){layer.alert("请先将项目部署到 localhost 下再进行访问【建议通过tomcat、webstorm、hb等方式运行，不建议通过iis方式运行】，否则部分数据将无法显示");}else{    //判断是否处于锁屏状态【如果关闭以后则未关闭浏览器之前不再显示】if(window.sessionStorage.getItem("lockcms") != "true" && window.sessionStorage.getItem("showNotice") != "true"){showNotice();}}//判断是否设置过头像，如果设置过则修改顶部、左侧和个人资料中的头像，否则使用默认头像if(window.sessionStorage.getItem('userFace') &&  $(".userAvatar").length > 0){$("#userFace").attr("src",window.sessionStorage.getItem('userFace'));$(".userAvatar").attr("src",$(".userAvatar").attr("src").split("images/")[0] + "images/" + window.sessionStorage.getItem('userFace').split("images/")[1]);}else{$("#userFace").attr("src","../../images/face.jpg");}//公告层function showNotice(){}function tipsShow(){window.sessionStorage.setItem("showNotice","true");if($(window).width() > 432){  //如果页面宽度不足以显示顶部“系统公告”按钮，则不提示layer.tips('系统公告躲在了这里', '#userInfo', {tips: 3,time : 1000});}}$(".showNotice").on("click",function(){showNotice();})//锁屏function lockPage(){layer.open({title : false,type : 1,content : '<div class="admin-header-lock" id="lock-box">'+'<div class="admin-header-lock-img"><img src="data:images/face.jpg" class="userAvatar"/></div>'+'<div class="admin-header-lock-name" id="lockUserName">驊驊龔頾</div>'+'<div class="input_btn">'+'<input type="password" class="admin-header-lock-input layui-input" autocomplete="off" placeholder="请输入密码解锁.." name="lockPwd" id="lockPwd" />'+'<button class="layui-btn" id="unlock">解锁</button>'+'</div>'+'<p>请输入“123456”，否则不会解锁成功哦！！！</p>'+'</div>',closeBtn : 0,shade : 0.9,success : function(){//判断是否设置过头像，如果设置过则修改顶部、左侧和个人资料中的头像，否则使用默认头像if(window.sessionStorage.getItem('userFace') &&  $(".userAvatar").length > 0){$(".userAvatar").attr("src",$(".userAvatar").attr("src").split("images/")[0] + "images/" + window.sessionStorage.getItem('userFace').split("images/")[1]);}}})$(".admin-header-lock-input").focus();}$(".lockcms").on("click",function(){window.sessionStorage.setItem("lockcms",true);lockPage();})// 判断是否显示锁屏if(window.sessionStorage.getItem("lockcms") == "true"){lockPage();}// 解锁$("body").on("click","#unlock",function(){if($(this).siblings(".admin-header-lock-input").val() == ''){layer.msg("请输入解锁密码！");$(this).siblings(".admin-header-lock-input").focus();}else{if($(this).siblings(".admin-header-lock-input").val() == "123456"){window.sessionStorage.setItem("lockcms",false);$(this).siblings(".admin-header-lock-input").val('');layer.closeAll("page");}else{layer.msg("密码错误，请重新输入！");$(this).siblings(".admin-header-lock-input").val('').focus();}}});$(document).on('keydown', function(event) {var event = event || window.event;if(event.keyCode == 13) {$("#unlock").click();}});//退出$(".signOut").click(function(){window.sessionStorage.removeItem("menu");menu = [];window.sessionStorage.removeItem("curmenu");})//功能设定$(".functionSetting").click(function(){layer.open({title: "功能设定",area: ["380px", "280px"],type: "1",content :  '<div class="functionSrtting_box">'+'<form class="layui-form">'+'<div class="layui-form-item">'+'<label class="layui-form-label">开启Tab缓存</label>'+'<div class="layui-input-block">'+'<input type="checkbox" name="cache" lay-skin="switch" lay-text="开|关">'+'<div class="layui-word-aux">开启后刷新页面不关闭打开的Tab页</div>'+'</div>'+'</div>'+'<div class="layui-form-item">'+'<label class="layui-form-label">Tab切换刷新</label>'+'<div class="layui-input-block">'+'<input type="checkbox" name="changeRefresh" lay-skin="switch" lay-text="开|关">'+'<div class="layui-word-aux">开启后切换窗口刷新当前页面</div>'+'</div>'+'</div>'+'<div class="layui-form-item">'+'<label class="layui-form-label">单一登陆</label>'+'<div class="layui-input-block">'+'<input type="checkbox" name="oneLogin" lay-filter="multipleLogin" lay-skin="switch" lay-text="是|否">'+'<div class="layui-word-aux">开启后不可同时多个地方登录</div>'+'</div>'+'</div>'+'<div class="layui-form-item skinBtn">'+'<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="settingSuccess">设定完成</a>'+'<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" lay-submit="" lay-filter="noSetting">朕再想想</a>'+'</div>'+'</form>'+'</div>',success : function(index, layero){//如果之前设置过，则设置它的值$(".functionSrtting_box input[name=cache]").prop("checked",cacheStr=="true" ? true : false);$(".functionSrtting_box input[name=changeRefresh]").prop("checked",changeRefreshStr=="true" ? true : false);$(".functionSrtting_box input[name=oneLogin]").prop("checked",oneLoginStr=="true" ? true : false);//设定form.on("submit(settingSuccess)",function(data){window.sessionStorage.setItem("cache",data.field.cache=="on" ? "true" : "false");window.sessionStorage.setItem("changeRefresh",data.field.changeRefresh=="on" ? "true" : "false");window.sessionStorage.setItem("oneLogin",data.field.oneLogin=="on" ? "true" : "false");window.sessionStorage.removeItem("menu");window.sessionStorage.removeItem("curmenu");location.reload();return false;});//取消设定form.on("submit(noSetting)",function(){layer.closeAll("page");});//单一登陆提示form.on('switch(multipleLogin)', function(data){layer.tips('温馨提示：此功能需要开发配合，所以没有功能演示，敬请谅解', data.othis,{tips: 1})});form.render();  //表单渲染}})})//判断是否修改过系统基本设置，去显示底部版权信息if(window.sessionStorage.getItem("systemParameter")){systemParameter = JSON.parse(window.sessionStorage.getItem("systemParameter"));$(".footer p span").text(systemParameter.powerby);}//更换皮肤function skins(){var skin = window.sessionStorage.getItem("skin");if(skin){  //如果更换过皮肤if(window.sessionStorage.getItem("skinValue") != "自定义"){$("body").addClass(window.sessionStorage.getItem("skin"));}else{$(".layui-layout-admin .layui-header").css("background-color",skin.split(',')[0]);$(".layui-bg-black").css("background-color",skin.split(',')[1]);$(".hideMenu").css("background-color",skin.split(',')[2]);}}}skins();$(".changeSkin").click(function(){layer.open({title : "更换皮肤",area : ["310px","280px"],type : "1",content : '<div class="skins_box">'+'<form class="layui-form">'+'<div class="layui-form-item">'+'<input type="radio" name="skin" value="默认" title="默认" lay-filter="default" checked="">'+'<input type="radio" name="skin" value="橙色" title="橙色" lay-filter="orange">'+'<input type="radio" name="skin" value="蓝色" title="蓝色" lay-filter="blue">'+'<input type="radio" name="skin" value="自定义" title="自定义" lay-filter="custom">'+'<div class="skinCustom">'+'<input type="text" class="layui-input topColor" name="topSkin" placeholder="顶部颜色" />'+'<input type="text" class="layui-input leftColor" name="leftSkin" placeholder="左侧颜色" />'+'<input type="text" class="layui-input menuColor" name="btnSkin" placeholder="顶部菜单按钮" />'+'</div>'+'</div>'+'<div class="layui-form-item skinBtn">'+'<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="changeSkin">确定更换</a>'+'<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" lay-submit="" lay-filter="noChangeSkin">朕再想想</a>'+'</div>'+'</form>'+'</div>',success : function(index, layero){var skin = window.sessionStorage.getItem("skin");if(window.sessionStorage.getItem("skinValue")){$(".skins_box input[value="+window.sessionStorage.getItem("skinValue")+"]").attr("checked","checked");};if($(".skins_box input[value=自定义]").attr("checked")){$(".skinCustom").css("visibility","inherit");$(".topColor").val(skin.split(',')[0]);$(".leftColor").val(skin.split(',')[1]);$(".menuColor").val(skin.split(',')[2]);};form.render();$(".skins_box").removeClass("layui-hide");$(".skins_box .layui-form-radio").on("click",function(){var skinColor;if($(this).find("div").text() == "橙色"){skinColor = "orange";}else if($(this).find("div").text() == "蓝色"){skinColor = "blue";}else if($(this).find("div").text() == "默认"){skinColor = "";}if($(this).find("div").text() != "自定义"){$(".topColor,.leftColor,.menuColor").val('');$("body").removeAttr("class").addClass("main_body "+skinColor+"");$(".skinCustom").removeAttr("style");$(".layui-bg-black,.hideMenu,.layui-layout-admin .layui-header").removeAttr("style");}else{$(".skinCustom").css("visibility","inherit");}})var skinStr,skinColor;$(".topColor").blur(function(){$(".layui-layout-admin .layui-header").css("background-color",$(this).val()+" !important");})$(".leftColor").blur(function(){$(".layui-bg-black").css("background-color",$(this).val()+" !important");})$(".menuColor").blur(function(){$(".hideMenu").css("background-color",$(this).val()+" !important");})form.on("submit(changeSkin)",function(data){if(data.field.skin != "自定义"){if(data.field.skin == "橙色"){skinColor = "orange";}else if(data.field.skin == "蓝色"){skinColor = "blue";}else if(data.field.skin == "默认"){skinColor = "";}window.sessionStorage.setItem("skin",skinColor);}else{skinStr = $(".topColor").val()+','+$(".leftColor").val()+','+$(".menuColor").val();window.sessionStorage.setItem("skin",skinStr);$("body").removeAttr("class").addClass("main_body");}window.sessionStorage.setItem("skinValue",data.field.skin);layer.closeAll("page");});form.on("submit(noChangeSkin)",function(){$("body").removeAttr("class").addClass("main_body "+window.sessionStorage.getItem("skin")+"");$(".layui-bg-black,.hideMenu,.layui-layout-admin .layui-header").removeAttr("style");skins();layer.closeAll("page");});},cancel : function(){$("body").removeAttr("class").addClass("main_body "+window.sessionStorage.getItem("skin")+"");$(".layui-bg-black,.hideMenu,.layui-layout-admin .layui-header").removeAttr("style");skins();}})})})

/*$().ready(function() {$("#login_form").validate({rules: {username: "required",password: {required: true,minlength: 5},},messages: {username: "请输入姓名",password: {required: "请输入密码",minlength: jQuery.format("密码不能小于{0}个字 符")},}});$("#register_form").validate({rules: {username: "required",password: {required: true,minlength: 5},rpassword: {equalTo: "#register_password"},email: {required: true,email: true}},messages: {username: "请输入姓名",password: {required: "请输入密码",minlength: jQuery.format("密码不能小于{0}个字 符")},rpassword: {equalTo: "两次密码不一样"},email: {required: "请输入邮箱",email: "请输入有效邮箱"}}});
});
$(function() {$("#register_btn").click(function() {$("#register_form").css("display", "block");$("#login_form").css("display", "none");});$("#back_btn").click(function() {$("#register_form").css("display", "none");$("#login_form").css("display", "block");});
});*/layui.use(['form', 'layer', 'jquery'], function () {var form = layui.form,layer = parent.layer === undefined ? layui.layer : top.layer$ = layui.jquery;//登录按钮form.on('submit(login)', function (result) {var btn = $(this);//设置登录按钮  为不可点击btn.text("登录中...").attr("disabled", "disabled").addClass("layui-disabled");$.ajax({url: '/login/login',contentType: "application/json",dataType: 'json',type:"post",data: JSON.stringify(result.field),success: function (res) {//失败，返回错误信息if (res.code!=200) {layer.msg(res.msg);//设置登录按钮  为不可点击btn.text("登录").attr("disabled", false).removeClass("layui-disabled");$(function () {changeImg();})} else {//成功，跳转到首页layer.msg(res.msg);location.href = "/";}}})});//表单输入效果$(".loginBody .input-item").click(function (e) {e.stopPropagation();$(this).addClass("layui-input-focus").find(".layui-input").focus();})$(".loginBody .layui-form-item .layui-input").focus(function () {$(this).parent().addClass("layui-input-focus");})$(".loginBody .layui-form-item .layui-input").blur(function () {$(this).parent().removeClass("layui-input-focus");if ($(this).val() != '') {$(this).parent().addClass("layui-input-active");} else {$(this).parent().removeClass("layui-input-active");}})
})/* 触发JS刷新  切换图片*/
function changeImg() {var img = document.getElementById("verify_code_img");img.src = "/verifyCode/getImg?date=" + new Date();}

layui.use(['layer', 'upload', 'element', 'form', 'layedit'], function () {var layer = layui.layer;var form = layui.form;var element = layui.element;var layedit = layui.layedit;var $ = layui.jquery, upload = layui.upload;$(function () {$("#butt").click(function () {layer.open({type: 1,title: "注册页面",area: ['600px', '700px'],offset: '20px',content: $("#gb"),cancel: function () {// 你点击右上角 X 取消后要做什么setTimeout('window.location.reload()', 1);},success: function () {form.on('submit(formDemo)', function (data) {});}})form.render();})//验证输入的密码是否相同；$("#pass2").blur(function () {var pass1 = $("#pass1").val();var pass2 = $("#pass2").val();if (pass1 != pass2) {layer.msg("两次输入的密码不一致", {"icon": 2,"time": 2000});$("#pass2").val("");return false;}return true;});});//创建一个编辑器var editIndex = layedit.build('LAY_demo_editor');//自定义验证规则form.verify({title: function (value) {if (value.length < 5) {return '标题至少得5个字符啊';}},pwd: [/^(\w){6,20}$/, '只能输入6-20个字母、数字、下划线'],emails: [/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, '请输入正确的邮箱格式：<br>如：xxx@qq.com<br>xxx@163.com等格式'],phones: [/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/, '您的输入有误，请重新输入(中国11位手机号)'],name: [/^[\u4e00-\u9fa5]{2,4}$/, '您的输入有误，请输入2-4位中文'],cardId: [/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, '请输入正确的身份证号'],content: function (value) {layedit.sync(editIndex);}});//判断是登录还是注册var img = document.getElementById("imgs");if (img!=null){$("#demo1").attr("src","/register/showImage?path="+img.defaultValue);}else{$("#demo1").attr("src",'/images/mr.png');}//注册form.on('submit(formDemo)', function (result) {debuggervar btn = $(this);//设置注册按钮不可点击，防止多次点击btn.text("提交中...").attr("disabled", "disabled").addClass("layui-disabled");$.ajax({url: "/register/addUser",data: JSON.stringify(result.field),type: "post",dataType: "json",contentType: "application/json;charsetset=UTF-8",//必须success: function (res) {btn.text("提交").attr("disabled", false).removeClass("layui-disabled");if (res.code != 200) {layer.msg(res.message);} else {//跳转到登录页面if (session!=null){location.href = "/";}else{location.href = "/login/toLogin";}}}});})//普通图片上传var uploadInst = upload.render({elem: '#test1', url: '/register/uploadFile' //改成您自己的上传接口, acceptMime: 'image/*', field: 'mf', method: "post"  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交, before: function (obj) {//预读本地文件示例，不支持ie8obj.preview(function (index, file, result) {$('#demo1').attr('src', result); //图片链接（base64）});}, done: function (res, index, upload) {$("#uploadImg").val(res.path);//如果上传失败if (res.code > 0) {return layer.msg('上传失败');}//上传成功}, error: function () {//演示失败状态，并实现重传var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');demoText.find('.demo-reload').on('click', function () {uploadInst.upload();});}});});

CSS代码

public.css 实例代码如下

/*公共样式*/
.childrenBody {padding: 10px;
}.layui-table-view {margin: 0 !important;
}.magb0 {margin-bottom: 0 !important;
}.magt0 {margin-top: 0 !important;
}.magt3 {margin-top: 3px !important;
}.magt10 {margin-top: 10px !important;
}.magb15 {margin-bottom: 15px !important;
}.magt30 {margin-top: 30px !important;
}.layui-left {text-align: left;
}.layui-block {width: 100% !important;
}.layui-center {text-align: center;
}.layui-right {text-align: right;
}.layui-elem-quote.title {padding: 10px 15px;margin-bottom: 0;
}.layui-bg-white {background-color: #fff !important;
}.border {border: 1px solid #e6e6e6 !important;padding: 10px;border-top: none;
}.main_btn .layui-btn {margin: 2px 5px 2px 0;
}.layui-timeline-axis {left: -4px;
}.layui-elem-quote {word-break: break-all;
}.icons li, .icons li:hover, .loginBody .seraph, .loginBody .seraph:hover, .loginBody .layui-form-item.layui-input-focus label, .loginBody .layui-form-item label, .loginBody .layui-form-item.layui-input-focus input, .loginBody .layui-form-item input {transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;
}.icons li:hover i, .icons li i {transition: font-size 0.3s ease-in-out;-webkit-transition: font-size 0.3s ease-in-out;
}.loginBody .layui-input-focus .layui-input::-webkit-input-placeholder {transition: color 0.2s linear 0.2s;-webkit-transition: color 0.2s linear 0.2s;
}.loginBody .layui-input-focus .layui-input::-moz-placeholder {transition: color 0.2s linear 0.2s;
}.loginBody .layui-input-focus .layui-input:-ms-input-placeholder {transition: color 0.2s linear 0.2s;
}.loginBody .layui-input-focus .layui-input::placeholder {transition: color 0.2s linear 0.2s;-webkit-transition: color 0.2s linear 0.2s;
}/*后台首页*/
.panel_box {margin-bottom: 5px;
}.panel {text-align: center;height: 90px;
}.panel_box a {display: block;border-radius: 5px;overflow: hidden;height: 80px;background-color: #f2f2f2 !important;
}.panel_icon {width: 40%;display: inline-block;line-height: 80px;float: left;position: relative;height: 100%;
}.panel_icon i {font-size: 40px !important;color: #fff;display: inline-block;
}.panel_word {width: 60%;display: inline-block;float: right;margin: 13px 0 14px;
}.panel_word span {font-size: 25px;display: block;height: 34px;
}.panel .loginTime {font-size: 15px;color: #1E9FFF;line-height: 17px;
}.panel em {font-style: normal;
}.history_box {min-height: 500px;height: 500px;overflow-y: scroll;padding: 10px !important;
}.history_box .layui-timeline .layui-timeline-item:last-child {padding-bottom: 0;
}@media screen and (max-width: 1200px) {.history_box {height: auto !important;overflow-y: inherit;}
}/*修改密码*/
.pwdTips {min-height: auto;margin: 40px 0 15px 110px;
}/*个人资料*/
form input.layui-input[disabled] {background: #f2f2f2;color: #595963 !important;
}.user_right {text-align: center;
}.user_right p {margin: 10px 0 25px;font-size: 12px;text-align: center;color: #FF5722;
}.user_right img#userFace {width: 200px;height: 200px;margin-top: 20px;cursor: pointer;box-shadow: 0 0 50px #44576b;
}.userAddress.layui-form-item .layui-input-inline {width: 23%;
}.userAddress.layui-form-item .layui-input-inline:last-child {margin-right: 0;
}/*下拉多选*/
.layui-form-item select[multiple] + .layui-form-select dd {padding: 0;
}.layui-form-item select[multiple] + .layui-form-select .layui-form-checkbox[lay-skin=primary] {margin: 0 !important;display: block;line-height: 36px !important;position: relative;padding-left: 26px;
}.layui-form-item select[multiple] + .layui-form-select .layui-form-checkbox[lay-skin=primary] span {line-height: 36px !important;float: none;
}.layui-form-item select[multiple] + .layui-form-select .layui-form-checkbox[lay-skin=primary] i {position: absolute;left: 10px;top: 0;margin-top: 9px;
}.multiSelect {line-height: normal;height: auto;padding: 4px 10px;overflow: hidden;min-height: 38px;margin-top: -38px;left: 0;z-index: 99;position: relative;background: none;
}.multiSelect a {padding: 2px 5px;background: #908e8e;border-radius: 2px;color: #fff;display: block;line-height: 20px;height: 20px;margin: 2px 5px 2px 0;float: left;
}.multiSelect a span {float: left;
}.multiSelect a i {float: left;display: block;margin: 2px 0 0 2px;border-radius: 2px;width: 8px;height: 8px;background: url(../images/close.png) no-repeat center;background-size: 65%;padding: 4px;
}.multiSelect a i:hover {background-color: #545556;
}/*404页面*/
.noFind {text-align: center;padding-top: 2%;
}.noFind i {line-height: 1em;font-size: 12em !important;color: #393D50;display: block;
}.ufo {text-align: center;height: 100%;position: relative;
}.noFind .page_icon, .noFind .ufo_icon {opacity: 1;position: absolute;left: 50%;transform: translateX(-50%);-ms-transform: translateX(-50%);-moz-transform: translateX(-50%);-webkit-transform: translateX(-50%);-o-transform: translateX(-50%);
}.noFind .page_icon {top: 300px;animation: pageGo 0.3s ease-in 0.3s forwards;-webkit-animation: pageGo 0.3s ease-in 0.3s forwards;-o-animation: pageGo 0.3s ease-in 0.3s forwards;-moz-animation: pageGo 0.3s ease-in 0.3s forwards;
}.noFind .ufo_icon {top: 100px;animation: ufo 1s ease-in 0.6s forwards;-webkit-animation: ufo 1s ease-in 0.6s forwards;-o-animation: ufo 1s ease-in 0.6s forwards;-moz-animation: ufo 1s ease-in 0.6s forwards;
}.page404 {margin-top: 10%;opacity: 0;font-size: 0;animation: page404 0.5s ease-in 1.7s forwards;-webkit-animation: page404 0.5s ease-in 1.7s forwards;-o-animation: page404 0.5s ease-in 1.7s forwards;-moz-animation: page404 0.5s ease-in 1.7s forwards;
}.page404 p {font-size: 20px;font-weight: 300;color: #999;
}/*页面被吸走*/
@keyframes pageGo {from {font-size: 12em;top: 300px;}to {font-size: 0;opacity: 0;top: 100px;}
}@-moz-keyframes pageGo {from {font-size: 12em;top: 300px;}to {font-size: 0;opacity: 0;top: 100px}
}@-webkit-keyframes pageGo {from {font-size: 12em;top: 300px;}to {font-size: 0;opacity: 0;top: 100px}
}@-o-keyframes pageGo {from {font-size: 12em;top: 300px;}to {font-size: 0;opacity: 0;top: 100px}
}/*ufo飞走*/
@keyframes ufo {0% {font-size: 14em;top: 100px;}20% {font-size: 12em;top: 50px;}100% {font-size: 0;opacity: 0;top: -100px;left: 80%;}
}@-moz-keyframes ufo {0% {font-size: 14em;top: 100px;}20% {font-size: 12em;top: 50px;}100% {font-size: 0;opacity: 0;top: -100px;left: 80%;}
}@-webkit-keyframes ufo {0% {font-size: 14em;top: 100px;}20% {font-size: 12em;top: 50px;}100% {font-size: 0;opacity: 0;top: -100px;left: 80%;}
}@-o-keyframes ufo {0% {font-size: 14em;top: 100px;}20% {font-size: 12em;top: 50px;}100% {font-size: 0;opacity: 0;top: -100px;left: 80%;}
}/*404显示*/
@keyframes page404 {from {opacity: 0;font-size: 2em;}to {opacity: 1;font-size: 2em;}
}@-moz-keyframes page404 {from {opacity: 0;font-size: 2em;}to {opacity: 1;font-size: 2em;}
}@-webkit-keyframes page404 {from {opacity: 0;font-size: 2em;}to {opacity: 1;font-size: 2em;}
}@-o-keyframes page404 {from {opacity: 0;font-size: 2em;}to {opacity: 1;font-size: 2em;}
}/*图标管理*/
.iconsLength {margin: 0 5px;
}.icons li {margin: 5px 0;text-align: center;height: 120px;cursor: pointer;
}.icons li i {display: block;font-size: 35px;margin: 10px 0;line-height: 60px;height: 60px;
}.icons li:hover {background: rgba(13, 10, 49, .9);border-radius: 5px;color: #fff;
}.icons li:hover i {font-size: 50px;
}#copyText {width: 0;height: 0;opacity: 0;position: absolute;left: -9999px;top: -9999px;
}/*开发文档*/
h2.method {font-size: 18px;line-height: 45px;padding-left: 5px;
}/*登录*/
.loginHtml, .loginBody {height: 100%;
}.loginBody {background: url("../images/bg1.jpg") no-repeat center center;
}.loginBody form.layui-form {padding: 0 20px;width: 300px;height: 379px;position: absolute;left: 50%;top: 45%;margin: -150px 0 0 -150px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;background: #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;box-shadow: 0 0 50px #009688;
}#gb {position: absolute;left: 40%;top: 20%;/*background: #fff;*//*box-shadow: 0 0 50px #009688;*/
}.login_face {margin: -55px auto 20px;height: auto !important;white-space: normal;width: 100px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;border: 5px solid #fff;overflow: hidden;box-shadow: 0 0 30px #009688;
}.login_face img {width: 100%;
}.loginBody .layui-form-item {position: relative;
}.loginBody .layui-form-item label {position: absolute;color: #757575;left: 10px;top: 9px;line-height: 20px;background: #fff;padding: 0 5px;font-size: 14px;cursor: text;
}.layui-form-label {color: #757575;right: 10px;top: 9px;line-height: 20px;background: #fff;padding: 0 5px;font-size: 14px;cursor: text;
}.loginBody .layui-form-item.layui-input-focus label {top: -10px;font-size: 12px;color: #ff6700;
}.loginBody .layui-form-item.layui-input-active label {top: -10px;font-size: 12px;
}.loginBody .layui-input::-webkit-input-placeholder {color: #fff;
}.loginBody .layui-input::-moz-placeholder {color: #fff;
}.loginBody .layui-input:-ms-input-placeholder {color: #fff;
}.loginBody .layui-input::placeholder {color: #fff;
}.loginBody .layui-form-item.layui-input-focus input {border-color: #ff6700 !important;
}.loginBody .layui-input-focus .layui-input::-webkit-input-placeholder {color: #757575;
}.loginBody .layui-input-focus .layui-input::-moz-placeholder {color: #757575;
}.loginBody .layui-input-focus .layui-input:-ms-input-placeholder {color: #757575;
}.loginBody .layui-input-focus .layui-input::placeholder {color: #757575;
}.loginBody .seraph {font-size: 30px;text-align: center;
}.loginBody .seraph.icon-qq:hover {color: #0288d1;
}.loginBody .seraph.icon-wechat:hover {color: #00d20d;
}.loginBody .seraph.icon-sina:hover {color: #d32f2f;
}.imgCode {position: relative;
}#imgCode img {position: absolute;top: 1px;right: 1px;cursor: pointer;
}/*用户等级*/
.layui-table-view .layui-table span.seraph {font-size: 25px !important;
}.vip1 {color: #994a2b;
}.vip2 {color: #899396;
}.vip3 {color: #bd6a08;
}.vip4 {color: #a3b8c4;
}.vip5 {color: #63c3ea;
}.vip6 {color: #b563ed;
}.vip7 {color: #ff9831;
}.vip8 {color: #A757A8;
}.vip9 {color: #0ff;
}.vip10 {color: #f00;
}/*新闻添加*/
.layui-elem-quote .layui-inline {margin: 3px 0;
}.category .layui-form-checkbox {margin: 5px 0;
}.border .layui-form-item {margin-bottom: 10px;
}.border .layui-form-label {width: 50px;
}.border .layui-form-label i {position: absolute;top: 10px;left: 3px;
}.border .layui-input-block {margin-left: 80px;
}.thumbBox {height: 151px;overflow: hidden;border: 1px solid #e6e6e6;border-radius: 2px;cursor: pointer;position: relative;text-align: center;line-height: 153px;
}.thumbImg {max-width: 100%;max-height: 100%;border: none;
}.thumbBox:after {position: absolute;width: 100%;height: 100%;line-height: 153px;z-index: -1;text-align: center;font-size: 20px;content: "缩略图";left: 0;top: 0;color: #9F9F9F;
}/*图片管理*/
#Images li {width: 19%;margin: 0.5% 0.5%;float: left;overflow: hidden;
}#Images li img {width: 100%;cursor: pointer;
}#Images li .operate {display: block;height: 40px;width: 100%;background: #f4f5f9;
}#Images li .operate .check {float: left;margin-left: 11px;height: 18px;padding: 11px 0;width: 74%;position: relative;
}#Images li .operate .check .layui-form-checkbox[lay-skin=primary] {width: 100%;
}#Images li .operate .check .layui-form-checkbox[lay-skin=primary] span {padding: 0 5px 0 25px;width: 100%;box-sizing: border-box;
}#Images li .operate .check .layui-form-checkbox[lay-skin=primary] i {position: absolute;left: 0;top: 0;
}#Images li .operate .img_del {float: right;margin: 9px 11px 0 0;font-size: 22px !important;cursor: pointer;
}#Images li .operate .img_del:hover {color: #f00;
}@media screen and (max-width: 1050px) {#Images li {width: 24%;}
}@media screen and (max-width: 750px) {#Images li {width: 49%;}
}@media screen and (max-width: 432px) {#Images li {width: 99%;}
}/*系统日志*/
.layui-btn-green {background-color: #5FB878 !important;
}/*友情链接*/
.linkLogo {width: 80px;height: 40px;overflow: hidden;border: 1px solid #e6e6e6;border-radius: 2px;cursor: pointer;margin: 0 auto;position: relative;text-align: center;line-height: 42px;
}.linkLogoImg {max-width: 90%;max-height: 90%;
}.linkLogo:after {position: absolute;width: 100%;height: 100%;line-height: 42px;z-index: -1;text-align: center;font-size: 12px;content: "上传LOGO";left: 0;top: 0;color: #9F9F9F;
}.linksAdd .layui-form-label {width: 60px;padding-left: 0;
}.linksAdd .layui-input-block {margin-left: 75px;
}.linksAdd .layui-input-block input {padding: 0 5px;
}/*响应式*/
@media screen and (max-width: 450px) {#userFaceBtn {height: 30px;line-height: 30px;padding: 0 10px;font-size: 12px;}.user_right img#userFace {width: 100px;height: 100px;margin-top: 0;}.layui-col-xs12 .layui-form-label {width: 60px;padding-left: 0;}.layui-col-xs12 .layui-input-block, .layui-col-xs12 .layui-input-inline {margin-left: 75px;}.layui-col-xs12 .layui-input-inline {left: 0 !important;width: auto !important;}.noFind {padding-top: 0;}*[pc] {display: none;}
}.loginbox-title {position: relative;text-align: center;width: 100%;height: 35px;padding-top: 10px;font-family: 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;font-size: 20px;font-weight: normal;color: #444
}.registerbox-title {text-align: center;width: 100%;height: 35px;padding-bottom: 20px;font-family: 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;font-size: 30px;font-weight: normal;color: #444
}.loginbox-social {padding: 0 10px 10px;text-align: center
}.social-title {font-size: 14px;font-weight: 500;color: #a9a9a9;margin-top: 10px
}

LayUi做登录注册相关推荐

做登录/注册页面需考虑哪些问题？
[文章摘要]现在人手一部手机的前提下,手机号登录/注册的方式无疑是最简单直接的方式.而且现在很多其他注册方式,到后面还是会引导用户去绑定手机. 这几天在做登录/注册页面.做之前看了很多其他公司的登录/ ...
基于Layui的登录注册页面模板
在layui 版本2.8+中,提供了好看的登录注册模板. 目录 1.登录模板 (1)效果预览 (2)完整代码 2.注册模板 (1)效果预览 (2)完整代码 1.登录模板 (1)效果预览官网地址:表 ...
带你玩转JavaWeb开发之四 -如何用JS做登录注册页面校验
今日内容使用JQuery完成页面定时弹出广告使用JQuery完成表格的隔行换色使用JQuery完成复选框的全选效果使用JQuery完成省市联动效果使用JQuery完成下列列表左右选择使用J ...
tkinter和mysql做登录注册_tkinter 创建登陆注册界面
import tkinter as tk from tkinter import messagebox #设置窗口居中 def window_info(): ws = window.winfo_scr ...
如何做WP的登录/注册功能
2019独角兽企业重金招聘Python工程师标准>>> 首先我要做的效果如下思路一:page 在WP里Page是最基本的东西,你第一想法肯定是用Page来做登录注册.但是登录注册其 ...
基于Springboot框架的登录注册页面
今天正式开始第一篇文章创作,很高兴大家能够见证我的成长,也祝愿大家早日升职加薪哈. 首先声明,本人是技术小白,我只做我自己学习的总结.如果有技术上的错误,误导了大家,希望大家能及时做出补充指正. 下面 ...
如何设计登录注册模块
大家好,我是来自IT修真院的一枚PM~~今天和大家来分享一下如何设计登录注册模块~ 一.为什么要做登录注册? 二.核心要素三.业务闭环四.将业务嵌入使用场景五.用户体验需要打磨六.更多功能七 ...
用layui做一个简易的登录注册页面
用layui做一个简易的登录注册页面 1.首先在主页绑定一个点击事件,点击登录按钮就可以弹出一个弹出窗,一般商场登录页面不会跳转一个新页面,因为如果进入一个新页面,登录后需要跳转会原来的页面,这样会导 ...
python做一个登录注册界面_Python 实现简单的登录注册界面
Python 实现简单的登录注册界面注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...

LayUi做登录注册

LayUi登录注册页面附代码

登录页面

注册页面

附加CSS，JS代码

JS代码

CSS代码

LayUi做登录注册相关推荐

最新文章

热门文章