526互联

使用js和定位排版创建内联广告

发布时间 2023-12-08 09:15:15作者: 耿集

HTML+JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/index.css">
    <title>使用js和定位排版创建内联广告</title>
</head>
<body>
    <div id="content">网页内容</div>
    <div id="ad1">广告内容
        <a href="#" onclick="ElementHidden(ad1)"><span>关闭广告 X</span></a>
    </div>
    <div id="ad2">广告内容
        <a href="#" onclick="ElementHidden(ad2)"><span>关闭广告 X</span>
        </a>
    </div>
</body>
<script>
    // 网页内容1
    var ad1 = document.getElementById("ad1");
    // 网页内容2
    var ad2 = document.getElementById("ad2");
    // 隐藏
    function ElementHidden(element){
        element.style.display = "none";
    }
</script>
</html>

CSS

#content{
    height: 1200px;
    width: 40%;
    margin: 0 auto;
    background-color: yellowgreen;
}
#ad1, #ad2{
    position: fixed;
    top: 20px;
    height: 200px;
    width: 200px;
    background-color: pink;
}
#ad1{
    left: 20px;
}
#ad2{
    right: 20px;
}
#ad1 a, #ad2 a{
    position: absolute;
    bottom: 5px;
    right: 5px;
}
a{
    text-decoration: none;
    background-color: #34343059
}