layui-登陆

最新推荐文章于 2025-06-01 09:01:01 发布
原创 最新推荐文章于 2025-06-01 09:01:01 发布 · 2.2w 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

layui-登陆

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登陆</title>
        <link rel="stylesheet" href="layui/css/layui.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="icon" href="img/6.jpg">
    </head>
    <body>
        <div class="login-main">
    <header class="layui-elip">后台登录</header>
    <form class="layui-form">
        <div class="layui-input-inline">
            <input type="text" name="account" required  lay-verify="required" placeholder="邮箱" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <input type="password" name="password" required  lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline login-btn">
            <button type="submit" class="layui-btn">登录</button>
        </div>
        <hr/>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-primary">QQ登录</button>
        </div>
        <!--<div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-normal">微信登录</button>
        </div>-->
        <p><a href="javascript:;" class="fl">立即注册</a><a href="javascript:;" class="fr">忘记密码？</a></p>
    </form>
</div>
<script src="layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form'], function () {
        var form = layui.form(), $ = layui.jquery;
    });
</script>
    </body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登陆</title>
        <link rel="stylesheet" href="layui/css/layui.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="icon" href="img/favicon.png">
    </head>
    <body class="login-body body">

<div class="login-box">
    <form class="layui-form layui-form-pane" method="get" action="">
        <div class="layui-form-item">
            <h3>xx后台登录系统</h3>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账号：</label>

            <div class="layui-input-inline">
                <input type="text" name="account" class="layui-input" lay-verify="account" placeholder="账号" autocomplete="on" maxlength="20"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>

            <div class="layui-input-inline">
                <input type="password" name="password" class="layui-input" lay-verify="password" placeholder="密码" maxlength="20"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码：</label>

            <div class="layui-input-inline">
                <input type="number" name="code" class="layui-input" lay-verify="code" placeholder="验证码" maxlength="4"/><img src="img/v.png" onclick="getImage()" title="单击刷新验证码" id="img_rand_code" alt="">
            </div>
        </div>
        <div class="layui-form-item">
            <button type="reset" class="layui-btn layui-btn-danger btn-reset">重置</button>
            <button type="button" class="layui-btn btn-submit" lay-submit="" lay-filter="sub">立即登录</button>
        </div>
    </form>
</div>  
<script src="layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layer'], function () {
        var $ = layui.jquery,form = layui.form(),layer = layui.layer;
        // 验证
        form.verify({
            account: function (value) {
                if (value == "") {
                    return "请输入用户名";
                }
            },
            password: function (value) {
                if (value == "") {
                    return "请输入密码";
                }
            },
            code: function (value) {
                if (value == "") {
                    return "请输入验证码";
                }
            }
        });
        // 提交监听
        form.on('submit(sub)', function (data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });
            return false;
        })
    })

//刷新验证码
function getImage() {
//  $("#img_rand_code").attr("src", "" + Date());
    alert("123");
}


</script>
    </body>
</html>

这里写图片描述

layui-简单的登录注册界面
weixin_30482181的博客
04-02 6435
register.html 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Co...
layui php登陆,TP6+Layui+x-admin管理员登录页面
weixin_31589363的博客
03-10 1039
1、管理员页面—页面传值(1)创建一个Login控制器D:\phpstudy_pro\WWW\yifeng>php think make:controller admin@Login --plainimage.png(2)admin\view\login\login.html 创建目录和文件把x-admin中的的login.html过来，模版部分不用修改，修改js部分image.png(3)...
Layui登录界面
04-15
Layui登录界面+主页面；登录界面粒子特效；ajax传值到后台验证用户名密码；设备管理主页面
Layui框架入门指南：从零开始构建Web界面
gitblog_00082的博客
06-01 403
Layui框架入门指南：从零开始构建Web界面 什么是Layui？ Layui（谐音"类UI"）是一款轻量级的前端UI框架，专为Web界面开发而设计。它采用经典的HTML/CSS/JavaScript开发模式，无需复杂的构建工具即可快速上手。Layui以其简约的设计风格和丰富的内置组件著称，特别适合中小型项目的快速开发。 核心特点 轻量级模块化：采用自身模块化规范，按需加载 ...
LayUI登录页面
qq_42375391的博客
04-29 1万+
使用LayUI对你所做系统进行前端的美化和交互完善设计，使得系统的操作和交互更加符合人机交互理念（以其中一个页面，如登录，注册，后台主页面为例，将截图上传即可，截图包括界面设计、数据交互过程、数据库数据变化，注意不必把所有页面的设计美化进行上传，只需要一个功能的即可！！！！！！） <!DOCTYPE html> <html lang="en"> <head&g...
layui 实现登录
weixin_45833112的博客
05-29 7205
layui 实现登录效果
layui下的登录页首页
04-28
使用layui框架，登录页，菜单页和首页，自动生成菜单（三级），首页自动生成echart图（饼状图，柱状图和折线出），自动弹出公告框
layui-用户登录界面响应式动画模板
06-08
layui是一款在中国广受欢迎的前端UI框架，以其简洁、优雅的样式和强大的功能深受开发者喜爱。在本项目中，“layui-用户登录界面响应式动画模板”是利用layui的组件和样式，构建了一个适应不同设备分辨率的登录界面，...
@using HengJiuGamesManage.Models; @{ Layout = null; } @{ Users users = new Users(); if(ViewBag.UserModel != null) { users = ViewBag.UserModel; } } <!DOCTYPE html> <html> <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"> <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" /> <script src="~/Scripts/jquery-3.4.1.js"></script> <style> .layui-footer { display: flex; justify-content: center; } </style> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo layui-hide-xs layui-bg-black">恒久游戏管理系统</div> <!-- 头部区域（可配合layui 已有的水平导航） --> <ul class="layui-nav layui-layout-left"> <!-- 移动端显示 --> @*<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"> <i class="layui-icon layui-icon-spread-left"></i> </li> <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li> <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li> <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li> <li class="layui-nav-item"> <a href="javascript:;">nav groups</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">menu 11</a></dd> <dd><a href="javascript:;">menu 22</a></dd> <dd><a href="javascript:;">menu 33</a></dd> </dl> </li>*@ </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item layui-hide layui-show-sm-inline-block"> <a href="javascript:;"> <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img"> @users.UserName </a> <dl class="layui-nav-child"> <dd><a href="javascript:;" onclick="ModifyInfo()">个人资料</a></dd> @*<dd><a href="javascript:;">注销账号</a></dd>*@ <dd><a href="javascript:;" onclick="Exit()">退出登录</a></dd> </dl> </li> <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;"> <i class="layui-icon layui-icon-more-vertical"></i> </a> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">游戏大类</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">王者荣耀</a></dd> <dd><a href="javascript:;">永劫无间</a></dd> <dd><a href="javascript:;">三角洲行动</a></dd> <dd><a href="javascript:;">解限机</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">权限管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">普通用户</a></dd> <dd><a href="javascript:;">管理员</a></dd> <dd><a href="javascript:;">超级管理员</a></dd> </dl> </li> <li class="layui-nav-item"><a href="javascript:;">帮助</a></li> </ul> </div> </div> <div class="layui-body"> <!-- 内容主体区域 --> <div style="padding: 15px;"> <blockquote class="layui-elem-quote layui-text"> Layui 框体布局内容主体区域 </blockquote> <div class="layui-card layui-panel"> <div class="layui-card-header"> 下面是充数内容，为的是出现滚动条 </div> <div class="layui-card-body"> </div> </div> <br><br> </div> </div> <div class="layui-footer" style="justify-content: center;"> <!-- 底部固定区域 --> Copyright © 2025 Layui MIT Licensed 免责声明开源协议 在线测试 广告赞助 静态主题 </div> </div> <script src="~/Scripts/layui/layui.js"></script> <script> //JS layui.use(['element', 'layer', 'util'], function () { var element = layui.element; var layer = layui.layer; var util = layui.util; var $ = layui.$; //头部事件 util.event('lay-header-event', { menuLeft: function (othis) { // 左侧菜单事件 layer.msg('展开左侧菜单的操作', { icon: 0 }); }, menuRight: function () { // 右侧菜单事件 layer.open({ type: 1, title: '公告', content: '<div style="padding: 15px;">公告1</div>', area: ['260px', '100%'], offset: 'rt', // 右上角 anim: 'slideLeft', // 从右侧抽屉滑出 shadeClose: true, scrollbar: false }); } }); }); //退出 function Exit() { $.ajax({ url:"/Home/ExitSession", type: "post", success: function (res) { if (res.code == 0) { layer.msg(res.msg, { icon: 6, time: 2000 }, function () { window.location.href = "/Login/Index"; }) } else { layer.msg(res.msg, { icon: 5, time: 2000 }); } } }) } function ModifyInfo() { layer.open({ type: 2, // page 层类型 area: ['669px', '638px'], title: '资料修改', shade: 0.5, // 遮罩透明度 shadeClose: false, // 点击遮罩区域，关闭弹层 maxmin: false, // 允许全屏最小化 anim: 0, // 0-6 的动画形式，-1 不开启 content: '/Home/ModifyBaseInfo' }); } </script> </body> </html>这个页面是管理系统登陆后的主页面，上面的是一个点击后出现下拉列表，目标是可以进行修改资料，修改密码，以及退出登录，但现在我的代码中下拉中缺少修改密码，以及把修改密码写在修改个人资料里面 ，请你进行优化
最新发布
07-08
<li class="layui-nav-item layui-hide layui-show-sm-inline-block"> ;"> <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img"> @users.UserName <dl class="layui-nav-...
深入探索layui-v2.5.5前端模板及其插件应用实例
layui前端模板还包含了大量的页面模板，这些模板可以帮助开发者快速构建出各种类型的页面，如登陆页面、注册页面、表单页面、信息列表页面等。这些模板都是经过精心设计的，既满足美观又兼顾实用性。 layui前端模板...
Layui实现登录
wqww_1的博客
05-26 1213
前端 导入所有前端依赖 <link rel="icon" href="${ctx}/images/favicon.ico"> <link rel="stylesheet" href="${ctx}/lib/layui-v2.5.5/css/layui.css" media="all"> <link rel="stylesheet" href="${ctx}/css/layuimini.css" media="all"> <link rel="stylesheet"
layui实现登录页面
热门推荐
lv970814的博客
09-29 5万+
首先给看下效果图吧！ html、js <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <script src="./js/res_js/jquery-3.4.1.min.js"></sc...
Layui实现之登陆页面&&实现扩展模块
Bugxiu_fu的博客
07-26 3469
Layui实现扩展模块案例与登陆页面
layui实现登录
weixin_30673611的博客
03-29 2687
一、layui简介 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发. 获得layui 你可以在LayUI官网首页下载到 layui 的最新版，它经过了自动化...
layui登录（生成验证码、记住密码、登录、退出）学习笔记
宁
01-15 5074
页面 <html 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
使用layui编写登录功能。
AWildCat的博客
06-13 3563
目录一、使用layui编写登录功能。二、使用步骤2.1.新建项目加依赖2.2.使用mybatics-plus自动生成代码 2.2.1配置pom.xml 2.2.2加入自动生成的代码 3.配置yml文件4.编写Service层5.编写controller层6.配置启动类（必须指定mapper）7.导入前端所需js&css文件&md5.js(js.文件私聊提供)​编辑8.编写ftl9.测试总结layui 是一套开源的 Web UI 解决方案,其内部采用的是自身经典的模块化规范,并遵循
一个简单的layui登陆界面
silentkunden的博客
01-26 3万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" href="layui/css/layui.css"&gt; &am
【Layui】入门必看：登录注册界面搭建与功能开发解析
无法自律的人的博客
07-11 4055
Layui是一款面向前端开发者的轻量级JavaScript库，旨在简化网页开发过程。它提供了丰富的基础UI组件和常用的工具函数，使开发者可以更快速地构建出优秀的网页界面。Layui具备以下特点和功能：简洁易用：Layui的设计理念是简洁而易用，它提供了直观的API和简单的配置，使开发者可以更快速地上手并快速构建界面。模块化加载：Layui采用模块化的加载方式，每个功能都是以独立的模块形式存在，开发者可以根据自己的需求按需加载所需的模块，避免了不必要的资源浪费。基础UI组件。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值