网页设计html对联样式代码,纯CSS做对联广告代码

本文分享了一段CSS代码,用于创建底部固定的对联广告,同时结合少量JavaScript实现广告的关闭功能。这段代码适合直接插入HTML模板中,且在IE6及以上浏览器中生效。通过设置CSS样式实现广告的悬浮固定,而关闭功能则依赖于JavaScript的DOM操作,通过`ad_left`和`ad_right`函数控制广告左右两侧的显示状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上一篇文章介绍了使用JS方法对联广告,带有可关闭的功能:《JS对联广告 - 可点击关闭的两侧对联广告代码》

下面为大家再介绍一个纯CSS(也不能说全纯CSS,还是有几句javascript代码的,可直接写在模板中,不会被拦截)

如果是百分百纯CSS,是不具有关闭广告的功能,只能使用position进行相对浏览器进行悬浮固定才行!

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代码(下代码直接放到html中即可)

对联广告左边

关闭

对联广告右边

关闭

这个js是关闭按钮代码

function ad_left(){

document.getElementById('ad_left').style.display="none";

}

function ad_right(){

document.getElementById('ad_right').style.display="none";

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值