thymeleaf 登录页面

Ocean@上源码

已于 2023-10-17 09:32:48 修改

阅读量2.3k

点赞数 3

分类专栏： Java 文章标签： java

于 2022-04-18 13:56:10 首次发布

本文链接：https://blog.csdn.net/qq_34253002/article/details/124197951

版权

Java 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

1.源码 login.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>登录</title>
    
        <style type="text/css">
        body {
            background-image: linear-gradient(to left, #1f1f21, rgb(112, 142, 201));
        }

        .login-control {
            width: 100%;
            height: 97vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-control-outer {
            width: 400px;
            height: 240px;
            background-image: linear-gradient(to left, rgb(18, 99, 222), rgba(68, 196, 196, 0.92));
            box-shadow: 2px 2px 2px 2px rgba(102, 71, 71, 0.2);
            border-radius: 20px;
        }

        input.user, input.pass {
            width: 200px;
            height: 25px;
            border: none;
            outline: none;
            margin-top: 20px;
            border-radius: 20px;
        }

        .login-control-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #login {
            text-decoration: none;
            margin-top: 20px;
            border: 1px rgba(192, 253, 255, 0.36) solid;
            width: 90px;
            height: 30px;
            background-image: linear-gradient(to left, rgba(0, 64, 255, 0.2), rgba(30, 23, 31, 0.42));
            text-align: center;
            border-radius: 15px;
            line-height: 30px;
            color: rgba(0, 0, 0, 0.651);
        }

        #login:hover {
            background-color: #1f1c1c;
            transition-duration: 1s;
        }
    </style>
</head>
<body>
<div class="login-control">
    <div class="login-control-outer">
        <div class="login-control-inner">
            <p style="color: pink; font-size: 20px;">控制台</p>
            <input class="user" id="phone" placeholder="手机号" type="text"/>
            <input class="pass" id="password" placeholder="密码" type="password"/>
            <input id="login" onclick="login()" type="submit" value="登录"/>
        </div>
    </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>