html，js实现对联广告

最新推荐文章于 2022-11-16 18:31:21 发布

紫微右恒

最新推荐文章于 2022-11-16 18:31:21 发布

阅读量542

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_45712645/article/details/124695162

版权

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>

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