zoukankan html css js c++ java

前端入门之——知识补充 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>

查看全文

相关阅读:
e621. Activating a Keystroke When Any Child Component Has Focus
e587. Filling Basic Shapes
e591. Drawing Simple Text
e595. Drawing an Image
e586. Drawing Simple Shapes
e636. Listening to All Key Events Before Delivery to Focused Component
在 PL/SQL 块的哪部分可以对初始变量赋予新值? (选择1项)
Oracle数据库中，在SQL语句中连接字符串的方法是哪个？(选择1项)
你判断下面语句，有什么作用？(单选)
Oracle数据库表空间与数据文件的关系描述正确的是( )

原文地址：https://www.cnblogs.com/Mengchangxin/p/9674051.html