css实现网页对联广告

深藏阁楼爱情的钟 2022-03-21 07:39 231阅读 0赞

**效果如图:**  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQ2ODE1_size_16_color_FFFFFF_t_70][]

**代码:**

**(直接复制粘贴就可以是用了,把图片放入对应的文件夹中,代码有点乱哈O(∩\_∩)O)**

<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://baidu.com" target="_blank"><img src="style/qhb.png"></a>
    		<script>
    			$('#closeRBAD').click(function() {
    				$('#rbslideBox').css('display','none');
    			});
    		</script>
    	</div>
    	
    	
    	<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://baidu.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://baidu.com" target="_blank"><img src="img/111.png"></a>
    		<script>
    			$('#xiaotubiao_ritht').click(function() {
    				$('#guanggao_right').css('display','none');
    			});
    		</script>
    	</div>

**注意事项:**

代码中的图片

closer.png![20190131150102865.png][]

111.png![2019013115334118.png][]

qhb.png![20190131153401778.png][]

完.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQ2ODE1_size_16_color_FFFFFF_t_70]: /images/20220321/bd48018368d54ffaa545d0f4df772329.png
[20190131150102865.png]: /images/20220321/954e5f2182fa452ba7af20922c83d3ea.png
[2019013115334118.png]: /images/20220321/87ed82ad1a3147628a616ef2bc37ac01.png
[20190131153401778.png]: /images/20220321/59ac14b1085040828d39cc1e3ed18e9f.png