CSS+JS学习笔记

博主： CcDalao
发布时间：2020 年 03 月 24 日
777 次浏览
1 条评论
3759字数
分类： CSS笔记 javascript笔记

CSS+JS学习笔记
来源时间2018/8/5

展示地址：[在线demo][1]
展示图片：![静态图][2]
小熊猫图片来源网络侵删
代码展示：
<div class="tip inlineBlock share">

HTML代码
</div>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Login - 小茉莉设计</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    
    <body>
        <div class="login">
            <div class="login-cc">
                <img src="img/1.png" id="img-1">
                <img src="img/2.png" id="img-2">
                <img src="img/3.png" id="img-3">
                <hr>
                <h3>Login</h3>
                <div class="input">
                    <input type="text" value="" placeholder="请输入账号" id="do_login_1">
                    <input type="password" value="" placeholder="请输入密码" id="do_login_2">
                    <button data-v-6cb98ece="" class="btn">登录</button>
                <div style="height: 35px;" id="out"></div>
                </div>
            </div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
        <script src="js/main.js"></script>
    </body>
    </html>

CSS代码(main.css)
</div>

body {
        background-color: #f4f5f5
    }
    
    img {
        display: none;
        width: 150px;
        height: 130px;
        margin: 0 auto
    }
    
    .login {
        background-color: #fff;
        height: 500px;
        width: 300px;
        -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
        margin: 0 auto;
        margin-top: 100px
    }
    
    .login-cc {
        text-align: center
    }
    
    #img-1 {
        display: block
    }
    
    input {
        padding: 10px;
        width: 100%;
        border: 1px solid #e9e9e9;
        border-radius: 2px;
        outline: 0;
        box-sizing: border-box;
        margin-top: 10px
    }
    
    .input {
        margin: 40px
    }
    
    .input > button {
        border: none;
        padding: .5rem 1.3rem;
        transition: background-color .3s, color .3s;
        width: 100%;
        height: 2.334rem;
        color: #fff;
        background-color: #007fff;
        border-radius: 2px;
        outline: 0;
        box-sizing: border-box;
        cursor: pointer;
        margin-top: 15px
    }
    
    input:focus {
        border-color: #007fff
    }

javascript代码（main.js）
</div>

$("#do_login_1").click(function () {
        var isFocus = $("#do_login_1").is(":focus");
        if (true == isFocus) {
            $("#img-1").css('display', 'none')
            $("#img-2").css('display', 'block')
            $("#img-3").css('display', 'none')
        }
    });
    
    
    $("#do_login_2").click(function () {
        var isFocus = $("#do_login_2").is(":focus");
        if (true == isFocus) {
            $("#img-2").css('display', 'none')
            $("#img-3").css('display', 'block')
            $("#img-1").css('display', 'none')
        }
    });
    
    
    $("button").click(function () {
        var isFocus = $("#do_login_1").is(":focus");
        if (true != isFocus) {
            $("#img-2").css('display', 'none')
            $("#img-3").css('display', 'none')
            $("#img-1").css('display', 'block')
        }
        var isFocus = $("#do_login_2").is(":focus");
        if (true != isFocus) {
            $("#img-2").css('display', 'none');
            $("#img-3").css('display', 'none');
            $("#img-1").css('display', 'block');
    
        }
    
        layer.alert('登录成功了( ◕ x ◕ )！');
    
    });
    
    $("#out").click(function () {
        $("#img-2").css('display', 'none');
        $("#img-3").css('display', 'none');
        $("#img-1").css('display', 'block');
    })

小熊猫素材
</div>
三个图~
![1][3]
![2][4]
![3][5]
再送大家一个图，自己diy一下 嘿嘿 /斜眼笑 ♂♂♂
![4][6]

[1]: https://blog.ccdalao.cn/blog/demo/css/3/index.html
  [2]: https://blog.ccdalao.cn/usr/uploads/time/5e79de1635175.png
  [3]: https://blog.ccdalao.cn/blog/demo/css/3/img/1.png
  [4]: https://blog.ccdalao.cn/blog/demo/css/3/img/2.png
  [5]: https://blog.ccdalao.cn/blog/demo/css/3/img/3.png
  [6]: https://blog.ccdalao.cn/blog/demo/css/3/img/4.jpg

最后修改：2020 年 03 月 24 日