master

分支 (1)

管理

管理

master

web
/
20230328.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>广告实验</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            .web{
                width:1000px;
                height: 1000px;
                background-color: #cecece;
                border: #666666 1px solid;
                margin: 0 auto
            }
            .web1{
                width:1000px;
                height: 1000px;
                background-color: #183d23;
                border: #2c3187 1px solid;
                margin: 0 auto
            }
            .web2{
                width:1000px;
                height: 1000px;
                background-color: #1f1f21;
                border: #520f0f 1px solid;
                margin: 0 auto
            }
            #ad1,#ad2{
                    position: fixed;
                    top:0px;
                    width:100px;
                    height: 200px;
                    background-image: url(add/ad1.jpg);

                }

                #ad1{left: 0;}/*靠左*/
                #ad2{right:0 ;}
                #ad3{
                    position: fixed;
                    bottom:0px;/*右下*/
                    right:0px;
                    height:250px ;
                    width:300px ;
                    background-image: url(add/ad2.jpg);
                }
                #close,#close1{

                    width: 50px;
                    height:15px ;
                    object-fit: cover;
                    position: absolute;
                    bottom:0;
                    right:0;
                    background-image: url(add/close.png);
                    background-repeat:no-repeat;
                    background-size:cover;
                    background-position:center center;
                }
                 #close3{

                    width: 50px;
                    height:15px ;
                    object-fit: cover;
                    position: absolute;
                    top:0;
                    right:0;
                    background-image: url(add/close.png);
                    background-repeat:no-repeat;
                    background-size:cover;
                    background-position:center center;
                }
            </style>
    <body>
        <div id=ad1>
            <div id="close" ></div>
        </div>
        <div class="web"></div>
        <div class="web1"></div>
        <div class="web2"></div>


        <div id=ad2>
            <div id="close1" ></div>
        </div>
        <div id="ad3" style="display:none;"><div id="close3"></div></div>
    </body>
    <script type="text/javascript">
        var close=document.querySelector("#close");
        var close1=document.querySelector("#close1");
        var close3=document.querySelector("#close3");
        var ad1=document.getElementById('ad1');
        var ad2=document.getElementById('ad2');
        close.onclick=function(){
        ad1.style.display="none";
        ad2.style.display="none";

        }


        close1.onclick=function(){
        ad1.style.display="none";
        ad2.style.display="none";

        }


        close3.onclick=function(){
        var ad3=document.getElementById('ad3');
        ad3.style.display="none";


        }

        window.onload=function(){//页面加载事件
        var ad3=setTimeout(function(){
        var ad3=document.getElementById('ad3');
        ad3.style.display="inline"
    },3000)
        }

</script>
</html>