前端入门之——知识补充 day11

清除浮动

.clearfix:after{
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .container{
            background-color: #cc3399;
        }
        .container .item{
            width:180px;
            height: 150px;
            background-color: #1b6d85;
            border: 1px solid red;
        }
        .clearfix:after{
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
    </style>
</head>
<body>

<div class="container clearfix">
    <div class="item left"></div>
    <div class="item left"></div>
    <div class="item left"></div>
    <!--<div style="clear: both"></div>-->
    <div class="item left"></div>
    <div class="item left"></div>
    <div class="item left"></div>
    <div class="item left"></div>
    <div class="item left"></div>
    <div class="item left"></div>
    <div class="item left"></div>
    <div class="item left"></div>
    <div class="item left"></div>

    <!--<div style="clear: both"></div>-->

</div>


</body>
</html>

View Code

把图片换成位子的处理效果

        .container .item:hover{
            border: 1px solid green;
        }
        .container .item .text{
            display: none;
        }
        .container .item:hover .text{
            display: block;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .container{
            background-color: #cc3399;
        }
        .container .item{
            width:180px;
            height: 150px;
            background-color: #1b6d85;
            border: 1px solid red;
            position: relative;
        }
        .clearfix:after{
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        .container .item:hover{
            border: 1px solid green;
        }
        .container .item .text{
            display: none;
        }
        .container .item:hover .text{
            display: block;
        }
    </style>
</head>
<body>

<div class="container clearfix">
    <div class="item left">
        <div class="bg">
            <img style="height: 150px; 180px" src="1.jpg">
        </div>
        <div class="text">
            <div style="z-index:9;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: black;opacity: 0.6"></div>
            <div style="z-index: 10;position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #fff;">adddd</div>
        </div>
    </div>
    <div class="item left">
        <div class="bg">
            <img style="height: 150px; 180px" src="1.jpg">
        </div>
        <div class="text">
            <div style="z-index:9;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: black;opacity: 0.6"></div>
            <div style="z-index: 10;position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #fff;">adddd</div>
        </div>
    </div>
    <div class="item left">
        <div class="bg">
            <img style="height: 150px; 180px" src="1.jpg">
        </div>
        <div class="text">
            <div style="z-index:9;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: black;opacity: 0.6"></div>
            <div style="z-index: 10;position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #fff;">adddd</div>
        </div>
    </div>
    <div class="item left">
        <div class="bg">
            <img style="height: 150px; 180px" src="1.jpg">
        </div>
        <div class="text">
            <div style="z-index:9;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: black;opacity: 0.6"></div>
            <div style="z-index: 10;position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #fff;">adddd</div>
        </div>
    </div>
    <div class="item left">
        <div class="bg">
            <img style="height: 150px; 180px" src="1.jpg">
        </div>
        <div class="text">
            <div style="z-index:9;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: black;opacity: 0.6"></div>
            <div style="z-index: 10;position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #fff;">adddd</div>
        </div>
    </div>
    <div class="item left">
        <div class="bg">
            <img style="height: 150px; 180px" src="1.jpg">
        </div>
        <div class="text">
            <div style="z-index:9;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: black;opacity: 0.6"></div>
            <div style="z-index: 10;position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #fff;">adddd</div>
        </div>
    </div>
    <div class="item left">
        <div class="bg">
            <img style="height: 150px; 180px" src="1.jpg">
        </div>
        <div class="text">
            <div style="z-index:9;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: black;opacity: 0.6"></div>
            <div style="z-index: 10;position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #fff;">adddd</div>
        </div>
    </div>


    <!--<div style="clear: both"></div>-->

</div>


</body>
</html>

View Code

后天管理，当鼠标放到头像上，会有一个下拉菜单。实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .right{
            float: right;
        }
        .left{
            float: left;
        }
        .pg_header{
            height: 48px;
            line-height: 48px;
            background-color: #3c3c3c;
            color:white;
        }
        .pg_header .logo{

            width: 200px;
            /*line-height: 48px;*/
            text-align: center;
        }
        .pg_header .user{
            padding: 0 20px;
            height: 48px;
            position: relative
        }
        .pg_header .user:hover{
            background-color: #425a66;
        }
        .pg_header .user .a img{
            width: 40px;
            height: 40px;
            margin-top: 4px;
            border-radius: 50%;
        }
        .pg_header .user .more{
            position: absolute;
            top: 48px;
            right: 0px;
            width: 200px;
            border: 1px solid green;
            right:20px;
            background-color: #c0c0c0;
            display: none;
        }
        .pg_header .user:hover .more{
            display: block;
        }
         .pg_header .user .more a{
             display: block;
         }
        .pg_body .body_menu{
            position: absolute;
            top: 50px;
            bottom: 0;
            left: 0;
            width: 200px;
            border: 1px solid #cc3399;
        }
        .pg_body .body_content{
            position: absolute;
            top: 50px;
            bottom: 0;
            left: 210px;
            right:0;
            border: 1px solid green;
            overflow: auto;
        }

    </style>
</head>
<body>
<div class="pg_header">
    <div class="logo left">Python学习班</div>
    <div class="user right">
        <a class="a">
            <img src="1.jpg">
        </a>
        <div class="more" >
            <a>我的信息</a>
            <a>注销</a>
        </div>
    </div>
</div>
<div class="pg_body">
    <div class="body_menu"></div>
    <div class="body_content">
<p>12312321321321</p>
        <p>12312321321321</p>
        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>

        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>
        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>
        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>

<p>12312321321321</p>
        <p>12312321321321</p>
        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>

        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>
        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>
        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>

    </div>
</div>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .right{
            float: right;
        }
        .left{
            float: left;
        }
        .pg_header{
            height: 48px;
            line-height: 48px;
            background-color: #3c3c3c;
            color:white;
        }
        .pg_header .logo{

            width: 200px;
            /*line-height: 48px;*/
            text-align: center;
        }
        .pg_header .user{
            padding: 0 20px;
            height: 48px;
            position: relative
        }
        .pg_header .user:hover{
            background-color: #425a66;
        }
        .pg_header .user .a img{
            width: 40px;
            height: 40px;
            margin-top: 4px;
            border-radius: 50%;
        }
        .pg_header .user .more{
            position: absolute;
            top: 48px;
            right: 0px;
            width: 200px;
            border: 1px solid green;
            right:20px;
            background-color: #c0c0c0;
            display: none;
            z-index: 999;/*添加一个*/
        }
        .pg_header .user:hover .more{
            display: block;
        }
         .pg_header .user .more a{
             display: block;
         }
        .pg_body .body_menu{
            position: absolute;
            top: 50px;
            bottom: 0;
            left: 0;
            width: 200px;
            border: 1px solid #cc3399;
        }
        .pg_body .body_content{
            position: absolute;
            top: 50px;
            bottom: 0;
            left: 210px;
            right:0;
            border: 1px solid green;
            overflow: auto;
            z-index: 10;/*添加一个*/
        }

    </style>
</head>
<body>
<div class="pg_header">
    <div class="logo left">Python学习班</div>
    <div class="user right">
        <a class="a">
            <img src="1.jpg">
        </a>
        <div class="more" >
            <a>我的信息</a>
            <a>注销</a>
        </div>
    </div>
</div>
<div class="pg_body">
    <div class="body_menu"></div>
    <div class="body_content">
<p>12312321321321</p>
        <p>12312321321321</p>
        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>

        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>
        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>
        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>

<p>12312321321321</p>
        <p>12312321321321</p>
        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>

        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>
        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>
        <p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p><p>12312321321321</p>

    </div>
</div>
</body>
</html>

修复一个小bug

js解释器

1、声明提前

2、无块级作用域

3、函数作用域，外部不能访问

4、作用域链编译时已经创建

文章：https://www.cnblogs.com/wupeiqi/p/5649402.html

jq扩展

<body>

<script src="jquery-3.3.1.js"></script>
<script>
    //自己写了一个扩展，自己写的方法
    jQuery.extend({
        getmax:function (a,b) {
            return a>b?a:b
        }
    })
    
    alert($.getmax(4,9))
</script>
</body>

    //自己写了一个扩展，自己写的方法
    jQuery.extend({
        getmax:function (a,b) {
            return a>b?a:b
        }
    })

    // alert($.getmax(4,9))

    //第二种扩展，需要有个标签对象来调用这个方法
    $.fn.extend({
        print:function () {
            console.log($(this).html());

        }

    })
    $("p").print();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello</p>
<script src="jquery-3.3.1.js"></script>
<script>
    //自己写了一个扩展，自己写的方法
    // jQuery.extend({
    //     getmax:function (a,b) {
    //         return a>b?a:b
    //     }
    // })

    // alert($.getmax(4,9))

    //第二种扩展，需要有个标签对象来调用这个方法
    // $.fn.extend({
    //     print:function () {
    //         console.log($(this).html());
    //
    //     }
    //
    // })
    // $("p").print();
//匿名函数
//     f=function () {
//         alert(456456456)
//     }
    // f()
//自执行的匿名函数
//     (function () {
//         alert("自执行的匿名函数")
//     })()
//     (function () {alert(456)})();

//自定义扩展放入自执行函数里面，视为建立一个保护域，保护函数内部的变量不受外部的干扰
    (function ($) {
        $.fn.extend({
            print:function () {
                console.log($(this).html())
            }
        })
    })(jQuery);
    $("p").print();




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