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等样式，其他样式结果如下图所示：
在这里插入图片描述

HerryDong

发布了99 篇原创文章 · 获赞 16 · 访问量 3万+

私信关注

EasyUI实现用户登录界面

猜你喜欢