thymeleaf 登录页面

旧城等待， 2023-09-29 10:24 8阅读 0赞

<!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>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAT2NlYW5A5LiK5rqQ56CB_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAT2NlYW5A5LiK5rqQ56CB_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/cda79053977748949a28551b92ecdc54.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAT2NlYW5A5LiK5rqQ56CB,size_20,color_FFFFFF,t_70,g_se,x_16