html加jq制作的登录界面

最新推荐文章于 2023-10-25 15:53:28 发布

原创最新推荐文章于 2023-10-25 15:53:28 发布 · 448 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

本文介绍了一个简单的登录界面的设计与实现过程，包括HTML结构布局、CSS样式美化及使用jQuery进行基本交互效果的添加。该登录界面能够响应窗口大小变化并调整位置。

登录界面

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="login.css">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>

<body class="body1">
    <div class="box">
        <p class="p1">请输入账号信息</p>
        <form>
            <p class="p2">输入账号</p>
            <input type="text">
            <p class="p3">输入密码</p>
            <input type="password"><br>
            <input type="button" class="bt1" value="提交">
        </form>
    </div>
</body>

</html>

css

* {
    margin: 0;
    padding: 0;
    transition: all 1s;
}

.body1 {
    background: url(login_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
}

.box {
    width: 400px;
    min-width: 300px;
    margin: auto;
    margin-top: 200px;
    text-align: center;
    background-color: rgb(192, 194, 197);
    opacity: 0.9;
    padding-bottom: 20px;
}

.p1 {
    width: 100%;
    height: 30px;
    background: linear-gradient(to right, rgba(56, 1, 1, 0.726), rgba(1, 1, 58, 0.637));
    text-align: center;
    padding-top: 10px;
    color: white;
}

.p2 {
    margin-top: 15px;
    margin-bottom: 8px;
    color: rgb(18, 18, 19);
}

.p3 {
    margin-top: 5px;
    margin-bottom: 8px;
    color: rgb(18, 18, 19);
}

.box input {
    width: 80%;
    height: 23px;
    outline: none;
}

.bt1 {
    margin-top: 30px;
    width: 200px;
    background: linear-gradient(to left, rgba(56, 1, 1, 0.726), rgba(1, 1, 58, 0.637));
    color: white;
    font-size: 12px;
}

.box input:focus {
    background-color: wheat;
}

.bt1:hover {
    transform: scale(1.1, 1.1);
}

javascript

  //让主体在垂直方向
        var y = $(window).height();
        var x = $(".box").height();
        var marginTop = (y - x) / 2;
        $(".box").css("margin-top", marginTop);
        //监听
        $(window).on("resize", function() {
            var y = $(window).height();
            var x = $(".box").height();
            var marginTop = (y - x) / 2;
            $(".box").css("margin-top", marginTop);
        })