第一次周测试

最新推荐文章于 2022-07-17 22:44:28 发布
-好喜欢你
最新推荐文章于 2022-07-17 22:44:28 发布
阅读量193
点赞数
本文链接：https://blog.csdn.net/qq_42049884/article/details/100696119
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>周测一</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body{padding: 0;margin: 0;background: #F7FAFC;}
        a{text-decoration: none;}
        .index-box{width:300px;height: auto;margin:0 auto;margin-top: 40px;}
        .logo{background: url(tab.png) no-repeat;;width: 185px;height: 90px;margin:0 auto}
        .title{font-size: 18px;text-align: center;color: #707171;font-weight: bold;margin: 30px auto;}
        .index-body{text-align: center;}
        .nav-sliders{position: relative;display: inline-block;margin-bottom: 25px;}
        .nav-sliders>a{font-size: 20px;display: inline-block;width:150px ;font-family: "微软雅黑";color: #999;cursor: pointer;float:left;}
        .nav-sliders>a.active{color: #eb000c;}
        .nav-sliders>span{position: absolute;height: 2px;background: #eb000c;display:block;;left:0px;width: 150px;bottom:-8px;}

        .login-box{width: 300px;display: none;}
        .wrap{border:1px solid #d5d5d5;border-radius: 5px;background: #fff;}
        .wrap>div{position: relative;overflow: hidden;}
        .wrap>div>input{width: 95%;border:none;padding:17px 2.5%;border-radius: 5px;}
        .wrap>div>label.error{position: absolute;color: #c33;top: 0;line-height: 50px;transform: translate(25px,0);transition: all 0.5s ease-out;-webkit-transform: translate(25px,0);-moz-transform: translate(25px,0);opacity: 0;visibility:hidden;cursor: text;}
        .wrap>div>label.move{transform: translate(0,0);transition: all 0.5s ease-out;-webkit-transform: translate(0,0);-moz-transform: translate(0,0);opacity: 1;visibility: visible;}
        .password{border-top: solid 1px #d5d5d5 ;}
        .code{right:115px ;}
        .button{height: 40px;background:red;text-align: center;line-height: 40px;border-radius: 5px;margin-top: 25px;color: #fff;font-family: "微软雅黑";cursor: pointer;}
        .remember{text-align: left;margin-top: 20px;font-family: "微软雅黑";color: #00a2ff;}
        .remember>a{float:right;cursor: pointer;color: #00a2ff;}
        .rememberf {text-align: left;margin-top: 20px;font-family: "微软雅黑";color: rgb(0, 0, 0);}
        .rememberf >a{float:right;cursor: pointer;color: #000000;}
        .other{text-align: left;margin-top: 20px;font-family: "微软雅黑";color: #666666;overflow: hidden;}
        .other>span{font-size: 14px;float: left;margin-top: 2px;cursor: pointer;}
        .other>div{float: left; transition: all 1s ease-in;-webkit-transition: all 0.3s ease-in;opacity: 0;transform: translateX(-20px);-webkit-transform: translateX(-18px);-moz-transform: translateX(-18px);visibility: hidden;}
        .other>div>a{margin-left: 20px;color: #666666;font-size: 15px;}
        .other>.hidden{ transition: all 1s ease-in;display: block;-webkit-transition: all 0.3s ease-in;opacity: 1;transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);visibility: visible;}
        .download{border:solid 1px #0f88eb;height: 40px;line-height: 40px;border-radius: 5px;color:#0f88eb ;font-family: "微软雅黑";margin-top: 50px;cursor: pointer;position: relative;}
        .download>.close{display: none;}
        .download .pic{display:none;position: absolute;background: #fff;bottom: 78px;width: 310px;left: -10px;z-index: 5;padding: 40px 0;border-radius: 8px;box-shadow: 0 0 8px 0 rgba(0,0,0,.15);}
        .registered-box{width: 300px;}
        .text{font-size: 14px;margin-top: 20px;font-family: "微软雅黑";color: #666666;}
        .text>a{color: #0f88eb;}
        .verification-code{position: absolute;right:22px;top: 14px;font-family: "微软雅黑";font-size: 18px;cursor: pointer;}
        #register:hover{opacity: 0.7;}
        #login:hover{opacity: 0.7;}
    </style>
</head>
<body>
<div class="index-box">
    <div class="index-header">
        <h2 class="title"></h2>
    </div>
    <div class="index-body">
        <div class="nav-sliders">
            <a class="registered active">账号登录</a>
            <a class="login">手机登录</a>
            <span class="on"></span>
        </div>
        <div class="change">
            <div class="registered-box">
                <div class="wrap">
                    <div class="phone">
                        <input type="text" name="" value="" id="name" placeholder="请输入邮箱或手机号">
                        <label class="error name">请输入邮箱或手机号</label>
                    </div>
                    <div class="password">
                        <input type="text"  id="phone" value="" placeholder="请输入您的密码">
                        <label class="error phone restet">请输入您的密码</label>
                    </div>

                    <div class="password">
                    </div>
                </div>
                <div class="rememberf">
                    <label><input type="checkbox">七天内自动登录</label>
                    <a>忘记密码</a>
                    <div class="button" id="register">登录</div>
                    <div class="remember">
                        <label>登录即代表同意《飞扬会员规则》</label>
                        <a >注册</a>
                    </div>
                    <div class="text"><a href="/terms" target="_blank"></a></div>
                </div>
                <div class="login-box">
                    <div class="wrap">
                        <div class="phone">
                            <input type="text" name="" id="login-phone" value="" placeholder="请输入邮箱或手机号">
                            <label class="error phone restet">请输入邮箱或手机号</label>
                        </div>
                        <div class="password">
                            <input type="password" name=""  id="login-password" placeholder="请输入您的密码" maxlength="6">
                            <label class="error phone">请输入您的密码</label>
                        </div>
                    </div>
                    <div class="button" id="login">登录</div>

                    <div class="other">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function(){
            jcPublic.Tab();
        })
        var jcPublic = {
            Tab:function(){
                $(".nav-sliders>a").on("click",function(){
                    $(this).addClass('active').siblings().removeClass('active');
                    var $width = $(this).width();
                    var $index = $(this).index();
                    $(".on").stop(true,true).animate({"left":$width*$index+5+"px"},300);
                    $(this).parents(".index-body").children('.change').children().eq($index).stop(true,false).show().siblings().hide();
                })
            }
        }
    </script>
</body>
</html>
-好喜欢你
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一次周测试

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>周测一</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jque...
复制链接

扫一扫