技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

纯CSS(非JS)代码实现固定对联的方法 超短超实用!

作者:admin    时间:2015-6-17 9:40:52    浏览:

之前用JS实现对联漂浮,从而固定它不让它随滚动条往上移,不过用了后感觉效果不是很好,因为JS一直在计算对联的位置,然后对其移位,如果滚动条拉得快一点,对联会先出现在屏幕下方,然后在JS的作用下,移到设定的位置(距离上方有多少像素),这对网页浏览者的体验不是很好,有点晃眼。固定对联,应该是让它丝毫不动的固定着才对。今天终于写了一个代码,是用纯CSS实现(非JS)代码实现固定对联,效果非常好。

纯CSS(非JS)代码实现固定对联的方法

不多讲,先看演示效果吧:

http://www.webkaka.com/info/ARCHIVES/demo/duilian.html

实现代码如下:

<!--左侧对联-->
<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等各种浏览器均有效。

您可能感兴趣的文章

网页侧栏浮动固定但不遮住底部的js实现方法

4种方法固定侧栏内容和广告位 提高网站PV和点击率

标签: 对联  
相关文章
    • IT热文
    • 站长推荐