对联广告的css

最新推荐文章于 2022-01-22 09:45:47 发布

mamba10

最新推荐文章于 2022-01-22 09:45:47 发布

阅读量837

点赞数

分类专栏： div+css

div+css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面:

<div class="l1" id="l1" ><a href="${linkWeb_l1 }" target='_blank'><img src="<%=basePath%>${picAdd_l1 }" width="100" height="100" border="0" /></a></div>  
	<div class="l2" id="l2" ><a href="${linkWeb_l2 }" target='_blank'><img src="<%=basePath%>${picAdd_l2 }" width="100" height="100" border="0" /></a><a href="javascript:void(0);" οnclick="guanbiduilianguanggao();" >关闭广告</a></div>
	<div class="r1" id="r1" ><a href="${linkWeb_r1 }" target='_blank'><img src="<%=basePath%>${picAdd_r1 }" width="100" height="100" border="0" /></a></div>  
	<div class="r2" id="r2" ><a href="${linkWeb_r2 }" target='_blank'><img src="<%=basePath%>${picAdd_r2 }" width="100" height="100" border="0" /></a><a href="javascript:void(0);" οnclick="guanbiduilianguanggao();" >关闭广告</a></div>

css:

.r1{width:100px;height:100px;background:red;float:right;   
     position:fixed !important; top/**/:200px;   
     position:absolute; z-index:300; top:expression(offsetParent.scrollTop+200);right:20px;}
.r2{width:100px;height:100px;background:red;float:right;   
     position:fixed !important; top/**/:320px;   
     position:absolute; z-index:400; top:expression(offsetParent.scrollTop+300);right:20px;}
.l1{width:100px;height:100px;background:red;float:right;   
     position:fixed !important; top/**/:200px;   
     position:absolute; z-index:300; top:expression(offsetParent.scrollTop+200);left:20px;}
.l2{width:100px;height:100px;background:red;float:right;   
     position:fixed !important; top/**/:320px;   
     position:absolute; z-index:400; top:expression(offsetParent.scrollTop+300);left:20px;}

js:

function guanbiduilianguanggao(){
document.getElementById('l1').style.display = 'none';
document.getElementById('l2').style.display = 'none';
document.getElementById('r1').style.display = 'none';
document.getElementById('r2').style.display = 'none';
}

效果: