核心提示：由于本人刚开始接触easyui对它不是很了解，网上找的资料都不是很齐全，着实花费了不少时间去搞懂这玩意，首先是panel位置摆放的问题 用data-options= region:east,split...
由于本人刚开始接触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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://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> <p id="header" > <p class="logo" onclick="window.location.href='index.html'"> <strong信息系统</strong> </p> </p> <p id="picture" style="background:url(images/index.jpg) no-repeat; background-size: cover;"> <p data-options=" region:'east',split:true,style:{position:'absolute',right:50,top:150}" class="easyui-panel " title="用户登录" style="width:300px;text-align: center;"> <p 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> <p 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> </p> </p> </p> </p> <p id="bootom"> <p 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> </p> </p> </body> <script> function submitForm(){ $('#ff').form('submit',{ onSubmit:function(){ return $(this).form('enableValidation').form('validate'); } }); } function clearForm(){ $('#ff').form('clear'); } </script> </html>
