EASYUI 登陆框界面

由于本人刚开始接触easyui对它不是很了解,网上找的资料都不是很齐全,着实花费了不少时间去搞懂这玩意,首先是panel位置摆放的问题 用data-options=" region:'east',split:true,style:{position:'absolute',right:50,top:150}"这句解决,另外输入框的图标 还有位置放置问题。
推荐两个不错的学习网站:

菜鸟网
EASYUI中文网

效果图

EASYUI 登陆框界面_第1张图片

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


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    
    <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    [email protected] 版权所有
            p>
            <p>
                建议使用IE8以上版本浏览器     E-mail:[email protected]
            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>

你可能感兴趣的:(项目开发过程)