EasyUI实现用户登录界面

EasyUI虽然表单功能强大，但很多人对EasyUI的传统样式难以忍受（包括我自己），所以最近一直在琢磨怎么利用EasyUI搭建一个还算现代化的登陆界面。搞了半天搞定了，登陆界面如下图所示，自认为还算看得过去~

下面说一下实现过程，首先下载EasyUI1.8.5及其样式扩展插件，这里我用到的主要是metro-blue样式。

然后就是写代码了，代码如下所示：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" /><title>用户登录</title><link href="lib/easyui/themes/metro-blue/easyui.css" rel="stylesheet" /><link href="lib/easyui/themes/icon.css" rel="stylesheet" /><script src="lib/easyui/jquery.min.js"></script><script src="lib/easyui/jquery.easyui.min.js"></script><script src="lib/easyui/locale/easyui-lang-zh_CN.js"></script><style>html, body{width: 100%;height: 100%;margin: 0;padding: 0;}h1{color: rgb(128, 128, 128);text-align: center;}a:link, a:hover, a:visited, a:active{color: rgb(128, 128, 128);text-decoration: none;}form{width: 400px;min-width: 400px;position: absolute;left: 40%;top: 15%;margin: 0;padding: 30px;background-color: white;border: 2px solid rgba(128, 128, 128, 0.2);border-radius: 10px;}form div{margin-bottom: 10px;}</style>
</head>
<body><form action="" method="post"><div><h1>用户登录</h1></div><div><input class="easyui-textbox" data-options="iconCls:'icon-man',iconWidth:30,iconAlign:'left',prompt:'用户名'" style="width:100%;height:35px;" /></div><div><input class="easyui-passwordbox" data-options="iconWidth:30,iconAlign:'left',prompt:'密码'" style="width:100%;height:35px;" /></div><div><input class="easyui-checkbox" label="记住密码" labelPosition="after" labelWidth="70" /></div><div><input class="easyui-linkbutton" type="submit" value="登陆" style="width:100%;height:35px;" /></div><div><div style="display:inline;"><a href="javascript:void(0)">还未注册？</a></div><div style="display:inline;margin-left:170px;"><a href="javascript:void(0)">忘记密码？</a></div></div></form>
</body>
</html>

这里也可以用其他的如metro-red等样式，其他样式结果如下图所示：

EasyUI实现用户登录界面相关推荐

Bootstrap4+MySQL前后端综合实训-Day06-AM【eclipse详细配置Tomcat、开发web项目、servlet、连接MySQL8.0数据库、用户登录界面的编写与验证、分页查询】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 eclipse重置视图 MySQL数据库--建数据库.建数据库 s ...
用户登录界面 - 记事本风格HTML代码
简介: 这是一个记事本风格的用户登录界面,非常逼真,HTML 代码已经改成了中文的,经过测试,兼容 IE6+.Firefox.Chrome 等浏览器. 优化了自适应问题. 喜欢的可以下载. 从dowe ...
php简单的登录界面,PHP实现简单用户登录界面
用PHP实现简单的用户登录界面,供大家参考,具体内容如下首先要实现用户登录界面需要一个html登录表单用户名: 密码: 重复密码: 然后开始按照流程图写PHP代码 if(trim($_POST[' ...
android studio 微信登录界面,如何使用Android Studio开发用户登录界面
满意答案 zhou9081 2016.05.21 采纳率:51% 等级:7 已帮助:411人如何使用Android Studio开发用户登录界面,具体解决方案如下: 解决方案1: <:t ...
用Java实现用户登录界面
基本步骤 1.创建一个窗体 2.给按钮加上监听 3.获取界面输入框中的值给监听 4.存储用户信息 5.实现登录注册逻辑 1.创建一个窗体 public void LE(){JFrame jf=new ...
[bat] cmd命令进入用户登录界面和屏幕保护程序
[bat] cmd命令进入用户登录界面和屏幕保护程序 cmd命令进入用户登录界面 rundll32.exe user32.dll,LockWorkStation cmd命令进入屏幕保护程序 C:\Wi ...
微信小程序用户登录界面，用户名无法切换输入法问题解决方法
[问题描述] iOS下,用户登录界面,两个相邻的input,第一个输入用户名,第二个输入密码(password),若用户手机中只有英文输入法和搜狗输入法的话,点击第一个用户名输入框,会发现出来的键盘是 ...
用户登录界面的测试用例
用户登录界面如何测试这个界面上有两个输入框,一个提交按钮. 在面试时经常会被问到这道题,考察点是面试者是否熟悉各种测试方法.首先,可以询问面试官用户的需求.例如这个登录界面应该是弹出窗口还是直接在网 ...
一个简单的用户登录界面
今天我们学习了如何实现一个简单的用户登陆界面,具体要用到两个jsp和一个servlet,具体操作如下: 首先创建一个用户登录界面,inputview.jsp,其源代码如下所示: <!DOCTYP ...
idea中创建maven依赖下的web工程(一)----用户登录界面
如果你对idea中创建maven依赖下的web工程不是很了解,请参见上一篇博客--idea中创建maven依赖下的第一个web工程各路大神对于idea的基本操作已经非常的熟悉了, 嗯,我还是一只入门 ...

EasyUI实现用户登录界面

EasyUI实现用户登录界面相关推荐

最新文章

热门文章