学习使用html+css+js编写一个登陆页面

使用html+css3+JavaScript编写一个渐变的登陆页面

内容

html

html中写了一个表单,一共两个三个div,分别包含了账号、密码和最下面的返回首页,不过登陆按钮在css中也被设置成了block块元素。

<body>
    <form action="" class="login-form">
        <h1>登陆</h1>
        <div class="txtb">
            <input type="text" />
            <span data-placeholder="账号"></span>
        </div>
        <div class="txtb">
            <input type="password" />
            <span data-placeholder="密码"></span>
        </div>
        <input type="submit" class="logbtn" value="登陆" />
        <div class="bottom-text">
            返回首页
        </div>
    </form>
</body>

css

css在本例中起到了很大的作用,after、before、attr等。对于我来说真的是有太多需要学习的地方了。

  • text-decoration: none; 这个属性可以去掉a标签下链接文字的下划线。
  • background-image: linear-gradient(120deg,#3498db,#8e44ad); 背景以及其他渐变都是通过这种方式实现的,其中120deg代表了线性渐变的角度,后面的就是渐变色了。
  • top: 50%;
    transform: translate(-50%,-50%);

可以通过这样的方法设置居中,学到了。

  • .txtb span::before{} 这里用到了伪元素,befor和after都是这样的,顾名思义,就是在元素的前面/后面加上某些内容,而内容就是content。
  • .logbtn:hover {} 当鼠标悬停在元素上时的样式,这里是实现了一个鼠标悬浮在按钮时渐变的动画效果。

css就不贴了,最下面会贴上完整的代码。

JavaScript

JavaScript在本例中的作用就是给获取/失去焦点的元素增加/移除class,使用了jquery这个js库。

$(document).ready(function() {
    $(".txtb input").focus(function() {
        $(this).addClass("focus")
    });
    $(".txtb input").blur(function() {
        if ($(this).val() == "")
            $(this).removeClass("focus")
    });
});

源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>

    <style>
        *{
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: monaco
}

body{
    min-height: 100vh;
    background-image: linear-gradient(120deg,#3498db,#8e44ad);
}

.login-form{
    width: 360px;
    background: #f1f1f1;
    height: 580px;
    padding: 80px 40px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.login-form h1{
    text-align: center;
    margin-bottom: 60px;
}
.txtb{
    border-bottom: 2px solid #adadad;
    position: relative;
    margin: 30px 0;
}
.txtb input{
    font-size: 15px;
    color: #333;
    border: none;
    width: 100%;
    background: none;
    padding:  0 5px;
    height: 40px;
}

.txtb span::before{
    content: attr(data-placeholder);
    position: absolute;
    top: 50%;
    left: 5px;
    color: #adadad;
    transform: translateY(-50%);
    z-index: -1;
    transition: .5s;
}
.txtb span::after{
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    background: linear-gradient(120deg,#3498db,#8e44ad);
    transition: .5s;
}

.focus + span::before{
    top: -12px;
}
.focus + span::after{
    width: 100%;
}

.logbtn{
    display: block;
    width: 100%;
    height: 50px;
    border: none;
    background: linear-gradient(120deg,#3498db,#8e44ad);
    background-size: 200%;
    color: #fff;
    outline: none;
    cursor: pointer;
    transition: .5s;
}
.logbtn:hover{
    background-position: right;
}

.bottom-text{
    margin-top: 60px;
    text-align: center;
    font-size: 13px;
}
    </style>
    <body>
        <form action="" class="login-form">
            <h1>登陆</h1>
            <div class="txtb">
                <input type="text" />
                <span data-placeholder="账号"></span>
            </div>
            <div class="txtb">
                <input type="password" />
                <span data-placeholder="密码"></span>
            </div>
            <input type="submit" class="logbtn" value="登陆" />
            <div class="bottom-text">
                返回首页
            </div>
        </form>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".txtb input").focus(function() {
                    $(this).addClass("focus")
                });
                $(".txtb input").blur(function() {
                    if ($(this).val() == "")
                        $(this).removeClass("focus")
                });
            });
        </script>
    </body>
</html>

本文链接:

http://www.tobewh.com/index.php/archives/7/