css实现网页对联广告

效果如图:

代码:

(直接复制粘贴就可以是用了,把图片放入对应的文件夹中)

<!---抢红包---start-->
	<div id="rbslideBox" class="rbslideBox">
		<style>
			.rbslideBox{position:fixed; right:0px; bottom:0px; z-index: 10010;}
			#closeRBAD{position: absolute; z-index: 1; left: 3px; top: 3px; width: 16px; height: 16px; background: url(style/closer.png) no-repeat;}
		</style>
		<div id="closeRBAD"></div>
		<a href="https://v168a.com" target="_blank"><img src="style/qhb.png"></a>
		<script>
			$('#closeRBAD').click(function() {
				$('#rbslideBox').css('display','none');
			});
		</script>
	</div>
	<!---抢红包---end-->
	<!---对联广告-----start---->
	<div id="guanggao_left" style="position: fixed; left:0%; bottom:40%; z-index: 10010;">
		<div id="xiaotubiao_left" style="position: absolute; z-index: 1; right: 3px; top: 3px; width: 16px; height: 16px; background: url(style/closer.png) no-repeat;"></div>
		<a href="https://v168a.com" target="_blank"><img src="img/111.png"></a>
		<script>
			$('#xiaotubiao_left').click(function() {
				$('#guanggao_left').css('display','none');
			});
		</script>
	</div>
	<div id="guanggao_right" style="position: fixed; right:0%; bottom:40%; z-index: 10010;">
		<div id="xiaotubiao_ritht" style="position: absolute; z-index: 1; left: 3px; top: 3px; width: 16px; height: 16px; background: url(style/closer.png) no-repeat;"></div>
		<a href="https://v168a.com" target="_blank"><img src="img/111.png"></a>
		<script>
			$('#xiaotubiao_ritht').click(function() {
				$('#guanggao_right').css('display','none');
			});
		</script>
	</div>
	<!---对联广告-----end---->

注意事项:

代码中的图片

closer.png

111.png

qhb.png

完.