>웹 프론트엔드 >CSS 튜토리얼 >CSS를 사용하여 커플렛 광고 코드를 작성하는 방법

CSS를 사용하여 커플렛 광고 코드를 작성하는 방법

墨辰丷
墨辰丷원래의
2018-05-09 16:51:053594검색

본 글에서 제공하는 커플릿 광고는 CSS를 사용해 완벽하게 구현되었으며 다양한 IE, FF, GG 브라우저를 포함한 모든 브라우저와 호환됩니다. 코드가 간단하고 사용하기 쉽습니다.

코드는 다음과 같습니다.

<!-- css 代码-->
.couplet_ad
/* 底部固定*/
{position:fixed;bottom:auto; top:0; width: 120px; height: 230px; z-index:99999; margin-top:158px;}
html .couplet_ad
/* IE6 底部固定*/
{_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));}
.couplet_ad a{ display:block; cursor:pointer;}
#ad_left{ left: 0px;}
#ad_right{ right: 0px;}
 <!-- html代码 -->
 <!-- 对联广告左边 -->
 <div class="couplet_ad" id="ad_left">
<a target="_blank" href=""><img src="dl.jpg"></a>
<a onClick="ad_left();">关闭</a>
</div>
<!-- 对联广告右边 -->
<div class="couplet_ad" id="ad_right">
<a target="_blank" href=""><img src="dl.jpg"></a>
<a  onClick="ad_right();">关闭</a>
</div>
<!-- js关闭按钮代码 -->
<script language="javascript">
function ad_left(){
document.getElementById(&#39;ad_left&#39;).style.display="none";
}
function ad_right(){
document.getElementById(&#39;ad_right&#39;).style.display="none";
}
</script>

관련 권장 사항:

screen_html/css_WEB-ITnose로 스크롤되지 않는 div+css 아래의 js 커플릿 광고에 대한 솔루션

전역 수정 방법 Discuz X2의 커플 광고

IE FF

와 호환되는 자바스크립트 커플 광고

위 내용은 CSS를 사용하여 커플렛 광고 코드를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.