登陆界面设计

最新推荐文章于 2024-06-30 12:58:58 发布

多隆

最新推荐文章于 2024-06-30 12:58:58 发布

阅读量962

点赞数

分类专栏： # 前端

本文链接：https://blog.csdn.net/huayushuangfei/article/details/78552599

版权

前端专栏收录该内容

58 篇文章 1 订阅

订阅专栏

页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <style type="text/css">
        #wrapper {
            width:670px;height:420px;position:absolute;left:50%;margin-left:-335px;top:50%;margin-top:-210px;
            background: #FFF none repeat scroll 0% 0%;
        }

        #wrapper .title {
            height: 70px;
            line-height: 70px;
            padding: 0 40px;
            font-size:24px;
            border-bottom: 1px solid #e2e2e2;
        }

        #wrapper .content {
            height: 270px;padding: 40px;background: #FFF none repeat scroll 0% 0%;
        }

        #wrapper .content .left {
            float: left;width: 300px;padding-right:35px;border-right:1px dashed #ccc;
        }

        #wrapper .content .right {
            float: right;width: 220px;font-size:14px;
        }

        </style>
    </head>

    <body style="background: #3AABBD url('/image/log_bg.png') no-repeat scroll center 166px;">
        <div id="wrapper">
            <div class="title">用户登录</div>
            <div class="content">
                <div class="left">
                    <form action="/j_spring_security_check" method="post">
                        <div class="form-group">
                            <label class="sr-only" for="inputEmail">邮箱</label>
                            <input type="email" class="form-control" id="inputEmail" name="email" placeholder="邮箱" required>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="inputPassword">密码</label>
                            <input type="password" class="form-control" id="inputPassword" name="password" placeholder="密码" required>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="rememberMe"> 30天之内免登录
                            </label>
                            <a href="resetPassword" style="float:right;">忘记密码?</a>
                        </div>
                        <button type="submit" class="btn btn-primary" style="width:160px;">登录</button>
                        <c:if test="${not empty SPRING_SECURITY_LAST_EXCEPTION }">
                            <div class="text-danger">
                                <c:choose>
                                    <c:when test="${SPRING_SECURITY_LAST_EXCEPTION.message eq 'Bad credentials'}">
                                        用户名或密码错误
                                    </c:when>
                                    <c:when test="${SPRING_SECURITY_LAST_EXCEPTION.message eq 'User is disabled'}">
                                        账户已锁定
                                    </c:when>
                                    <c:otherwise>
                                        登录异常，请稍后再试${SPRING_SECURITY_LAST_EXCEPTION.message}
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </c:if>
                    </form>
                </div>
                <div class="right">
                    还没有账号? <a href="/register">立即注册</a>
                </div>
            </div>
        </div>
    </body>
</html>

使用到的图片资源

这里写图片描述

显示效果

这里写图片描述

多隆

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
登陆界面设计

页面<!DOCTYPE html><html lang="en"> <head> <style type="text/css"> #wrapper { width:670px;height:420px;position:absolute;left:50%;margin-left:-335px;top:50%;margin-top:-2
复制链接

扫一扫

专栏目录