登录表单

最新推荐文章于 2024-09-14 17:59:56 发布

LP_1874

最新推荐文章于 2024-09-14 17:59:56 发布

阅读量506

点赞数

分类专栏： css web前端表单文章标签： css web前端

本文链接：https://blog.csdn.net/oXiaoHe12345/article/details/47401569

版权

web前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

表单

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>登录表单</title>
    <style>
        body{
            background-color: #eeeeee;
        }
        .form{
            width: 400px;
            height: 220px;
            box-shadow: 1px 1px 3px #ccc;
            margin:0 auto;
            padding:20px 0;
            background-color: #fff;
        }
        #formA{
            margin:0 auto;
            width: 260px;
        }
        input{
            display: block;
            margin: 0;
            padding: 0;
            background: none;
            border:none;
        }
        label{
            /*display: inline-block;*/
            font-size: 12px;
            color:#ccc;
            text-align: left;
            height:17px;
            line-height: 17px;
        }
        .text-box{
            height: 40px;
            width: 250px;
            border:1px solid #ddd;
            margin:5px 0;
        }
        .checkbox{
            display:inline-block;
            margin-right: 10px;
        }
        .btn{
            height: 35px;
            width: 100px;
            margin-top: 10px;
            cursor: pointer;
        }
        .reg-btn{
            background-color: #E74c3c;
            color:#fff;
            float:left;
        }
        .login-btn{
            background-color: #46ade7;
            color:#fff;
            float:left;
            margin-left: 52px;
        }

        .box-style{
            border:1px solid #46ade7;
            box-shadow: 0px 0px 2px #46ade7;
        }

    </style>
    <script src="js/jquery-1.11.2.min.js"></script>

</head>
<body>
    <div class="a">
        <div class="b">
            jkahkld hk;ahkdjhahdha; ;ahauohf;klah;lk jh;lh;l
        </div>
        <div class="c">
            xxxxxxxxxx
        </div>
    </div>

    <div class="form">
        <form id="formA" action="">
            <label>用户名/手机号/邮箱</label>
            <label for="" >
                <input type="text" class="text-box" id="text"/>
            </label>

            <label>密码</label>
            <label for="" >
                <input type="password" class="text-box" id="password"/>
            </label>
            <label>
                <input type="checkbox" class="checkbox"/>记住密码
            </label><br/>
            <label for="" >
                <input type="button" class="btn reg-btn" value="注册"/>
            </label>
            <label for="" >
                <input type="button" class="btn login-btn" value="登录"/>
            </label>
        </form>
    </div>


    <script>
        $("#text,#password").focus(function(){
            $(this).addClass("box-style");
        }).blur(function(){
            $(this).removeClass("box-style");
        });

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