html,js实现对联广告

html

<div id="container">
            <div id="content">
                <p>网页内容</p>
                <p>网页内容</p>
                <p>网页内容</p>
                <p>网页内容</p>
                <p>网页内容</p>
                <p>网页内容</p>
            </div>
            <div id="ad1">
                <a href="javascript:closeWindos('ad1')">
                    <div id="cs">关闭广告</div>
                </a>
            </div>
            
            <div id="ad2">
                <a href="javascript:closeWindos('ad2')">
                    <div id="cs">关闭广告</div>
                </a>
            </div>
        </div>

css

<style>
            *{
                margin: 0;
                padding: 0;
            }
            
            #content{
                width: 600px;
                height: 750px;
                margin: 0 auto;
                background:#cff;
                padding: 50px;
            }
            
            
            /*对联广告样式设置*/
            #ad1,#ad2{
                position:fixed;
                /*对对联广告进固定定位*/
                top:50px;
                width: 120px;
                height: 150px;
                background: #9cf;
            }
            #ad1{
                left: 0;
            }
            #ad2{
                right: 0;
            }
            
            
            #cs{
                margin-top: 140px;
                height: 25px;
                line-height: 25px;
                text-align: center;
                font-size: 14px;
                background-color: #999;
            }
            p{
                text-align: center;
            }
        </style>

js

<script>
            function closeWindos(idname){
                var window = document.getElementById(idname)
                window.style.display = "none"//点击链接后,隐藏当前广告窗口
            }
        </script>

 

posted @ 2022-05-09 19:38  ZosMa~  阅读(222)  评论(0编辑  收藏  举报