渐变色登录页面

最新推荐文章于 2023-04-14 21:01:03 发布

大名湖畔的金刚葫芦娃

最新推荐文章于 2023-04-14 21:01:03 发布

阅读量781

点赞数 3

分类专栏：登录页面 html css 文章标签： html css

本文链接：https://blog.csdn.net/A2735856944/article/details/103686050

版权

html 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

登录页面

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/style.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
    <body>
    <script src="../layui/layui.js"></script>
        <div class="text">
            <div class="sign-up-form">
                <h1>Login</h1>
                    <input type="account" id="account" class="input-box" placeholder="请输入账号">
                    <input type="password" id="password" class="input-box" placeholder="请输入密码">
                    <input type="submit" id="login-btn" class="signup-btn" value="登录" >
            </div>
        </div>


<script>

    $("#login-btn").click(function(){
        var account=$("#account").val();
        var pwd=$("#password").val();
        $.ajax({
            url:"./login",  //要请求服务器的url
            data:{
                serverNum:account,
                password:pwd,
            },   //这是一个对象，表示请求参数val=xx, 服务器端可以使用request.getParameter()来获取
            async:true, //是否为异步请求
            cache:false,    //是否缓存结果
            type:"POST",    //请求方式
            dataType:"json",    //服务器返回的数据是什么类型
            success:function(d){//这个函数在服务器执行成功时会被调用，参数result就是服务器返回的值


                if(d.code==200){
                    localStorage.setItem("account",account);
                    window.location.href = "index";
                }else{
                    layui.use(['layer', 'form'], function(){
                        var layer = layui.layer
                            ,form = layui.form;

                        layer.msg(d.message);
                    });

                }
            }
        });
    })
</script>
    </body>
</html>


@charset "UTF-8";
body{
    margin: 0;
    padding: 0;
    font-family: "montserrat";
    background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
    background-size: 400%;
    animation: bganimation 15s infinite;
}
.text{
    color: black;
    text-align: center;
    text-transform: uppercase;
    margin: 200px 0;
    font-size: 10px;
}

.sign-up-form{
    width: 300px;
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
    background: #fff;
    padding: 20px;
    margin: 8% auto 0;
    text-align: center;
}
.sign-up-form h1{
    color: #1c8adb;
    margin-bottom: 30px;
}
.input-box{
    border-radius: 20px;
    padding: 10px;
    margin: 10px 0;
    width: 90%;
    border: 1px solid #999;
    outline: none;
}
.signup-btn{
    color: #fff;
    width: 100%;
    padding: 10px;
    border-radius: 20px;
    font-size: 15px;
    margin: 10px 0;
    border: none;
    outline: none;
    cursor: pointer;
}
.signup-btn{
    background-color: #1c8adb ;
}

@keyframes bganimation {
    0%{
        background-position: 0% 50% ;

    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }

}

大名湖畔的金刚葫芦娃

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
渐变色登录页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/style.css"> <scrip...
复制链接

扫一扫

专栏目录