纯CSS(非JS)代码实现对联广告固定的方法
编辑：路飞 / 2861人阅读之前用JS实现对联漂浮，从而固定它不让它随滚动条往上移，不过用了后感觉效果不是很好，因为JS一直在计算对联的位置，然后对其移位，如果滚动条拉得快一点，对联会先出现在屏幕下方，然后在JS的作用下，移到设定的位置（距离上方有多少像素），这对网页浏览者的体验不是很好，有点晃眼。固定对联，应该是让它丝毫不动的固定着才对。今天终于写了一个代码，是用纯CSS实现(非JS)代码实现固定对联，效果非常好。
纯CSS(非JS)代码实现对联广告固定的方法
实现代码如下：
<!--左侧对联--> <div style="width:125px;height:125px;position:fixed;float:left;left:1px;top:150px;"> <img src="/click/duilian-125x125-demo.gif"> </div> <!--左侧对联-->
代码解释：
width:125px 是固定对联层的宽度
height:125px 是固定对联层的高度
position:fixed 是对联位置固定的意思
float:left;left 是对联层的属性，左侧浮动
left:1px 是对联层距离左侧的距离
top:150px 是对联层距离上侧的距离
此CSS代码有个优点，就是可以放到网页html代码的任何位置，调用起来相当灵活而不受约束，如果想对联出现快点，就把代码放到网页<body>之下，如果想对联出现慢点，就把代码放到网页</body>之上。
此代码已经通过各种浏览器测试，Chrome、Firefox、IE等各种浏览器均有效。
via webkaka
相关阅读
Js实现双击鼠标自动滚动页面效果
国内网站数量直线下降：2021年仅剩422万个
Nginx各种配置收集整理
.cc域名2020年1月31日起续费价格进行上调
WordPress博客平台融资3亿美元
- END -
- 上一篇： 黄渤加入StarVC进军互联网 明星赚钱真那么容易？
- 下一篇： 如何快速把PC网站模板改为自适应模板
- 业界动态
-
- 重磅！谷歌或被迫出售 Chrome 浏览器，垄断之路走到尽头？
- 苹果成为史上第一家市值突破3万亿美元的企业
- 腾讯一则公告，很可能导致外卖CPS项目的寒冬来了
- 互联网行业巅峰将过
- 喜报式实时成交额不见了 今年双11电商巨头战报变冷静
- Facebook正式更名为Meta
- 阿里云上线正版图片库，永久版权
- 库克：中国从未要求苹果公司解锁手机
- 搜狗开了个小差儿
- 权健实际控制人束某某等18人被刑拘
- 网站运营
-
- Js实现双击鼠标自动滚动页面效果
- Nginx各种配置收集整理
- 网站备案对收录到底有没有影响
- 什么是Referer 设置防盗链时候指明和不指明空Referer的区别
- 宝塔面板迁移系统盘/www到数据盘/data
- 自适应网页设计代码需要做的6大调整
- 站长们，不要忘了你的网站是要做什么的
- 浅谈网站网页面价值所在
- 2016年网络SEO外链指南
- 网站优化太早并不是一定是好事