一、iframe

  1. <style>
  2.         iframe{width: 400px;height: 400px;border: 1px solid #333}
  3.     </style>
  4. </head>
  5. <body>
  6.     <!-- ifrome的name值要和a标签的target的值是一样的 -->
  7.     <iframe src="html/index.html" name="frame"></iframe>
  8.     <a href="html/index.html" target="frame">index</a>
  9.     <a href="html/detail.html" target="frame">detail</a>
  10. </body>
  11. </html>

二、tab

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        *{margin: 0;padding: 0}
        .table{
            text-align: center;
            width: 400px;
            border: 1px solid #333;
        }
        .active{
            color: orangered;
        }
        input{
            width: 80%;
            height: 40px;
            margin-top: 20px;
        }
        li{
            list-style: none;
            display: inline-block;
            cursor: pointer;
            margin-right: 50px;
        }
        .content{
            position: relative;
            height: 400px;
        }
        .nav{
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #333;
        }
        /* cor*/
        .content>div{
            position: absolute;
            width: 100%;height: 100%;left: 0;top: 0;
        }
        .saoma{
            display: none;
        }
        img{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="table">
        <ul class="nav">
            <li class="active">账号登陆</li>
            <li>扫码登陆</li>
        </ul>
        <div class="content">
            <div class="account">
                <form>
                    <p><input type="text" placeholder="请输入用户名"</p>
                    <p><input type="text" placeholder="请输入密码"</p>
                    <p><input type="submit" value="登录"</p>
                </form>
            </div>
            <div class="saoma">
                <img src="images/erweima.png" alt="">
            </div>
        </div>
    </div>
    <script>
        $("li").click(function(){
            $(this).addClass("active").siblings().removeClass("active")
            $(".content>div").eq($(this).index()).show().siblings().hide()       })
    </script>
</body>
</html>

三、定位

<style>
        .parent{
            width: 200px;
            height: 200px;
            background: red;
            position: relative;
        }
        .one{
            width: 50px;
            height: 100px;
            background: blue;
            position: absolute;
            z-index: 100;
        }
        .two{
            width: 100px;
            height: 50px;
            background: green;
            position: absolute;
            z-index: 101;
        }
        /* z-index设置绝对定位元素的堆叠顺序*/
    </style>
</head>
<body>
    <div class="parent">
        <div class="one">

        </div>
        <div class="two">

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

四、jquery

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <p>hello world</p>
    <script>
    //jquery 支持所有的css选择器
    $("p").click(function){
        //this 指向执行事件的当前对象
        $(this).hide(300)
    })
    </script>
</body>
</html>

五、选择器

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>"
</head>
<body>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <button id="btn">btn</button>
    <script>
        $("p").hide(300)
    </script>
</body>
</html>

六、

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <button id="btn">消失</button>
    <script>
        $("#btn").click(function(){
            $("p").hide(1000)
        })
    </script>
</body>
</html>

七、

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <p>hello world</p>
    <p>hello workd</p>
    <p>hello workd</p>
    <p>hello workd</p>
    <p>hello workd</p>
    <script>
        $("p:first-child").css({color:"red",background:"pink",fontSize:"30px"})
        //mouseover 鼠标悬停在元素上
        //jquery 支持链式操作
        $("p:nth-child(2)").mouseover(function(){
            $(this).css({color:"green"})
        }).mouseout(function(){
            $(this).css({color:"#3333"})
        })
    </script>
</body>
</html>

八、

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        body{
            height: 2000px;
        }
    </style>
</head>
<body>
    <script>
        $(window).scroll(function(){
            console.log(1)
        })
        // resize
        $(window).resize(function(){
            console.log("窗口改变")
        })
    </script>0
</body>
</html>

九、

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        body{
            height: 2000px;
        }
        *{margin: 0;padding: 0}
        .nav{
            opacity: 0;
            height: 50px;
            width: 100%;
            line-height: 50px;
            text-align: center;
            background: #00bcd4;
            position: fixed
        }
    </style>
</head>
<body>
    <div class="nav">
        导航
    </div>
    <!-- 当我的窗口距离顶部达到200px，我就让nov完全显示-->
    <script>
        $(window).scroll(function(){
            //获取滚动条距离顶部的距离
            var scrollTop = $(window).scrollTop();
            //console.log(scrolltop)
            var opacity = scrollTop/300;
            if(opacity>1){
                opacity=1
            }
            $(".nav").css({opacity:opacity})
        })
    </script>
</body>
</html>