EASYUI 登陆框界面
由于本人刚开始接触easyui对它不是很了解,网上找的资料都不是很齐全,着实花费了不少时间去搞懂这玩意,首先是panel位置摆放的问题 用data-options=" region:'east',split:true,style:{position:'absolute',right:50,top:150}"这句解决,另外输入框的图标 还有位置放置问题。
推荐两个不错的学习网站:
菜鸟网
EASYUI中文网
效果图
CSS
a{text-decoration:none;
}
body{margin:0px;}#header{width:100%;height:30px;background-color:#E0EFFF;padding-top: 5px;padding-bottom: 10px;
}
#header .logo{margin-left: 50px;font-size: 24px;font-family: 微软雅黑;}
#picture{width:100%;height:750px;}
.panel-title {text-align: center;font-size: 16px;
}#bootom{padding-top:50px;width:100%;height:100px;background: #eaf2ff;
}
#bootom_content{margin-left:100px;width:80%;text-align: center;font-size:0.8em;
}
p{line-height:20px;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><!-- 引用的css --><link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/default/panel.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> <script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script><title>系统首页</title></head>
<script type="text/javascript">
console.info("==================")$('#p').panel('move',{left:100,top:100}); </script>
<body><div id="header" ><div class="logo" onclick="window.location.href='index.html'"><strong信息系统</strong></div></div><div id="picture" style="background:url(images/index.jpg) no-repeat; background-size: cover;"><div data-options=" region:'east',split:true,style:{position:'absolute',right:50,top:150}"class="easyui-panel " title="用户登录" style="width:300px;text-align: center;"><div style="padding:10px 60px 20px 60px"><form id="ff" class="easyui-form" method="post" data-options="novalidate:true"><table cellpadding="5"><tr><td><input class="easyui-textbox" data-options="prompt:'账号',validType:'name'" iconCls="icon-man" iconAlign=left style="width:100%;height:32px"/></td></tr><tr><td><input class="easyui-textbox" data-options="prompt:'密码',validType:'password'" iconCls="icon-lock" iconAlign=left style="width:100%;height:32px"></input></td></tr><tr><td><input class="easyui-textbox" data-options="prompt:'验证码',validType:'validate'" iconCls="icon-filter" iconAlign=left style="width:55%;height:32px" /> <img src="" alt="" width="56" height="32" align='absMiddle' /> </td></tr></table></form><div style="text-align:center;padding:5px; "><a href="#" class="easyui-linkbutton" style="width:45%;height:32px">登录</a> <a href="#" class="easyui-linkbutton" style="width:45%;height:32px">注册</a></div></div></div></div><div id="bootom"><div id="bootom_content"><p><strong>关于我们 法律声明 服务条款 联系我们</strong></p><p> 地址:江西省南昌市经济开发区天祥大道 邮箱:330000 Copyright © 2017 - 2018 hacker_pangdaxing@qq.com 版权所有</p><p>建议使用IE8以上版本浏览器 E-mail:hacker_pandaxing@qq.com</p></div></div>
</body>
<script>function submitForm(){$('#ff').form('submit',{onSubmit:function(){return $(this).form('enableValidation').form('validate');}});}function clearForm(){$('#ff').form('clear');}
</script>
</html>
EASYUI 登陆框界面相关推荐
- ftp服务器老是显示登录界面,登录ftp服务器总提示登陆框
登录ftp服务器总提示登陆框 内容精选 换一换 已成功登录Java性能分析.待安装分析辅助软件的服务器已开启sshd.Java性能分析优先选用非交互shell(non-interactive shel ...
- Easyui后台管理界面设计
1 Easyui 后台管理界面登陆设计 @{Layout = null; }<!DOCTYPE html><html> <head><meta name=&q ...
- tp管理界面找不到服务器,我的TP-LINK路由器无法登陆管理界面
摘 要 原标题:"为什么我的TP-LINK路由器无法登陆管理界面"关于路由器设置教程分享. - 来源:路由器之家 - 编辑:小元. 电脑上不了网了,于是想看看路由器,发现TP-LI ...
- 【移动安全技术】_第四站_登陆框UI设计
文章目录 任务 前言 控件的属性 常见控件 TextView文本 Button按钮 EditText编辑框 4种基本布局 LinearLayout线性布局 实验过程 实验代码 实验效果图 批评与自我批 ...
- 设计登陆窗口界面,当输入账号密码正确时,界面如图一所示,当输入账号密码有误时,界面如图二所示。 import java.awt.*; import java.awt.event.*; import
//设计登陆窗口界面,当输入账号密码正确时,界面如图一所示,当输入账号密码有误时,界面如图二所示. import java.awt.*; import java.awt.event.*; import ...
- Spring security/Shiro ---登陆成功后返回登陆前界面<页面重定向>
Spring security ---登陆成功后返回登陆前界面<页面重定向> 问题:在登陆/退出成功后,我们往往通过http.formLogin().successForwardUrl() ...
- html css实现登录注册页面,基于HTML5+css+JS_的精美登陆注册界面
[实例简介] 基于HTML5+css+JS的精美登陆注册界面------------------------------- [实例截图] [核心代码] login4 ├── index.html ├─ ...
- $HOME/$user/.权限导致用户无法登陆图形界面
在redhat linux下,用户登陆图形界面时将在$HOME/$user/.目中添加隐藏文件(以.开头的文件),如果在无意中将$HOME/$user/.的写权限去除,将会导致用户无法成功登陆gnom ...
- 一个很漂亮的jQuery动画隐藏登陆框,css很漂亮
别的不说,先看效果图吧 这是展开以后的效果图 这是收缩以后的效果图 用jQuery实现这个功能也就几个函数就搞定了,来看看关键的代码吧. 1<script type="text/jav ...
- 窗体案例:注册 登陆 主界面 c# 1613533126
窗体案例:注册 登陆 主界面 c# 1613533126 效果 启动界面 注册界面 参考代码 注册与登陆基本功能 code从政1230005 https://juejin.cn/post/691170 ...
最新文章
- Smarty的配置与高级缓存技术
- 【转】python包导入细节
- web开发过程中经常用到的一些公共方法及操作
- 151. Leetcode 剑指 Offer 14- I. 剪绳子 (贪心算法-基础题目)
- mysql mysqlhotcopy_MySQL备份工具之mysqlhotcopy
- BZOJ 3622 Luogu P4859 已经没有什么好害怕的了 (容斥原理、DP)
- 【动态规划】区间dp: P1063能量项链
- 管理感悟:公司内斗,肯定是闲着的斗干活的
- (转)海外基金销售新模式 机器人投顾与人工相结合
- DeFi中的关键——智能合约 | 白话区块链入门220
- python numpy逆_python-使用numpy的矩阵逆
- 数据分析方法-AARRR模型分析方法
- 湖北武汉施工员报考施工员安全意识的建立方法建筑七大员报考
- 单元格内容分列多行_『如何将excel单个表格里的多行数据分列』
- 2020年最新手机处理器对比(附手机CPU天梯图)
- iOS 微信支付和支付宝支付
- MongoDB分片实战
- serverlet快速入门
- 红米5 plus 位置服务器,红米5 Plus解锁system系统分区的教程_红米5Plus解系统分区...
- graphics.h图形库用法总结