关闭广告的小实例

最新推荐文章于 2023-09-08 19:30:10 发布

ikun不解释

最新推荐文章于 2023-09-08 19:30:10 发布

阅读量297

点赞数

CC 4.0 BY-SA版权

分类专栏： css javascript 文章标签：关闭广告

本文链接：https://blog.youkuaiyun.com/qq_42309685/article/details/95105869

javascript 同时被 2 个专栏收录

134 篇文章

订阅专栏

css

55 篇文章

订阅专栏

本文介绍了一种使用CSS设计广告关闭按钮的方法，并通过JavaScript实现了点击关闭广告的功能。包括了具体的样式设置和脚本逻辑，适用于网页设计中对广告模块的控制。

关闭广告

css部分

body {
		margin: 0px;
		padding: 0px;
}
.banner-wrap {
	background-color: #000;
	height: 75px;
}
.banner {
	position: relative;
	margin: 0 auto;
	width: 1210px;
	height: 75px;
	background: #f00;
}
.banner_close {
	position: absolute;
	top: 5px;
	right: 5px;
	height: 20px;
	width: 20px;
	font: 700 14px/20px "simsum";
	text-align: center;
	background-color: #000;
	
}
.banner_close a {
	text-decoration: none;
	cursor: pointer;
	color: #fff;
}
.baner_close a:hover{
		color: #fff;
}
</style>

body部分

<div class="banner-wrap">
	<div class="banner" id="adv">
		<div class="banner_close" id="adv_close">
			<a href="#">×</a>
		</div>
	</div>
</div>
<script>
var adv = document.getElementById("adv");
var adv_close = document.getElementById("adv_close");
adv_close.onclick = function(){
		banner.style.display = "none";
}