主页 / 网络编程 /

基于jQuery Easyui实现登陆框界面

网络编程 2021-07-04 18:32www.168986.cn编程入门
本文通过实例代码给大家分享了基于jQuery Easyui实现登陆框界面，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧

效果图

CSS

a{
  text-decoration:none;
}
body{
  margin:0px;
}
#header{
  width:100%;
  height:30px;
  background-color:#E0EFFF;
  padding-: 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-: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://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./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" rel="external nofollow" >  
  <link rel="stylesheet" type="text/css" href="themes/default/panel.css" rel="external nofollow" >  
  <link rel="stylesheet" type="text/css" href="themes/icon.css" rel="external nofollow" > 
  <link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" > 
  <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,
    :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,: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" />&nbsp;&nbsp;&nbsp;&nbsp;
              <img src="" alt="" width="56" height="32" align='absMiddle' /> </td>
            </tr>
          </table>
        </form>
        <div style="text-align:center;padding:5px; ">
          <a href="#" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" style="width:45%;height:32px">登录</a>&nbsp;&nbsp;&nbsp;&nbsp;
          <a href="#" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" style="width:45%;height:32px">注册</a>
        </div>
      </div>
    </div>
  </div>
  <div id="bootom">
    <div id="bootom_content">
      <p><strong>关于我们&nbsp;&nbsp;&nbsp;   法律声明 &nbsp;&nbsp;&nbsp;  服务条款 &nbsp;&nbsp;&nbsp; 联系我们</strong></p>
      <p> 
        地址江西省南昌市经济开发区天祥大道 &nbsp;&nbsp;&nbsp;邮箱330000 
        &nbsp;&nbsp;&nbsp;Copyright © 2017 - 2018 &nbsp;&nbsp;&nbsp;hacker_pangdaxing@qq. 版权所有
      </p>
      <p>
        建议使用IE8以上版本浏览器 &nbsp;&nbsp;&nbsp;E-mailhacker_pandaxing@qq.
      </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>

以上所述是长沙网络推广给大家介绍的基于jQuery Easyui实现登陆框界面，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！

上一篇：Node.js+Express+MySql实现用户登录注册功能 下一篇：Angular X中使用ngrx的方法详解（附源码）

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by