CSS固定定位实现右下角可关闭广告

代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.adv {
position: fixed;
right: 10px;
bottom: -20px;
opacity: 0.8;
}

.close {
position: relative;
top: -315px;
right: 50px;
background-color: transparent;
border: none;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="adv">
<img src="qq.png" alt="connect">
<button class="close">×</button>
</div>

<script>
var close = document.getElementsByClassName('close')[0]
close.onclick = function () {
document.getElementsByTagName('img')[0].style.display = "none";
close.style.display = "none";
}
</script>
</body>
</html>

广告图:




效果图:

猜你喜欢

转载自www.cnblogs.com/fantianlong/p/9949945.html