- 浏览: 141155 次
- 性别:
- 来自: 青岛
文章分类
- 全部博客 (98)
- css (17)
- Java (7)
- PHP (16)
- javascript (6)
- Ajax (0)
- jQuery (1)
- 网络 (3)
- windows (1)
- 服务器 (2)
- 开发流程 (0)
- SEO (1)
- 网页设计制作 (5)
- 数据库 (7)
- 工具 (6)
- 移动通信 (1)
- 数据库 oracle (5)
- PHP phpcms (2)
- thinksns (1)
- jsp (1)
- dedecms (7)
- EmEditor (1)
- 数据库,mysql (5)
- 数据库,mssql (11)
- svn (1)
- PHP,ecshop (1)
- Ofbiz (0)
- linux (2)
- destoon笔记 (1)
- discuz (1)
最新评论
-
sibyl_pisces:
guangqiang 写道嗯 有点意思 敬同行 你也是在青岛吗 ...
CSS+DIV固定底部的漂浮导航条 -
guangqiang:
嗯 有点意思 敬同行 你也是在青岛吗 ?
CSS+DIV固定底部的漂浮导航条 -
sibyl_pisces:
anqiuejack 写道解决了我的问题,但还是搞不懂对IE固 ...
CSS+DIV固定底部的漂浮导航条 -
anqiuejack:
解决了我的问题,但还是搞不懂对IE固定设定的代码的意思,这是J ...
CSS+DIV固定底部的漂浮导航条 -
yuxiatongzhi:
绑定事件里 return false; 如果设置 ...
ie6 javascript:void(0);
经常看到各大网站(例如:天涯,网易,阿里巴巴)的底部会有一个能够固定的漂浮条,该效果可以用js实现,但是今天新鲜代码站推荐一个纯css方法,更加简洁方便。
css代码如下:
body { background-image:url(text.txt); /* for IE6 */
background-attachment:fixed; }
#bottomNav { background-color:#096; z-index:999; position:fixed; bottom:0; left:0; width:100%; _position:absolute; /* for IE6 */
_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible; }
html代码如下:
<div id="bottomNav">这里加入你的代码固定底部漂浮</div>
再看看这些需要注意的地方:
_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
看到 _top 是为IE6独家准备的,但是当我只加了上面这句时,IE6下拉动滚动条看到的这个漂浮物是抖动的-_-||| 解决方法我们为IE6添加这样一条语句:
background-image:url(text.txt);
注意这里的 text.txt 其实不需要有这个txt文档,txt的文件名叫什么看自己喜好喽,如此一来我们就解决了IE6下的缓动问题。
看到 _top 是为IE6独家准备的,但是当我只加了上面这句时,IE6下拉动滚动条看到的这个漂浮物是抖动的-_-||| 解决方法我们为IE6添加这样一条语句:
background-image:url(text.txt);
注意这里的 text.txt 其实不需要有这个txt文档,txt的文件名叫什么看自己喜好喽,如此一来我们就解决了IE6下的缓动问题。
PS:你可能会对 text.txt 和 expression 感到郁闷,也有人使用多嵌套一层 DIV 做了个假滚动条实现了这个方法,当然这种方法在也会相应的改动下默认属性,可这种写法和之前网站融合起来很郁闷,要添加一个DIV(因为我之前没有在最外层写DIV.wrap)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS+DIV固定底部的漂浮导航条(多浏览器兼容)</title> <style type="text/css"> body { background-image:url(text.txt); /* for IE6 */ background-attachment:fixed; } #bottomNav { background-color:#096; z-index:999; position:fixed; bottom:0; left:0; width:100%; _position:absolute; /* for IE6 */ _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible; } </style> </head> <body> </p> <div id="bottomNav">这里加入你的代码固定底部漂浮</div> <br /> <br /> <br /> <br />111111111111 <br /> <br /> <br /> <br /> <br />11111111111 <br /> <br /> <br /> <br /> <br /> <br /> <br />122222222222 <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />222222333333333 <br /> <br /> <br /> <br /> <br />33334444444444444 <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />55555555555555555 <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />888888888888888888 <br /> <br /> <br /> <br /> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> .fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;} .fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;} .fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;} .fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;} /* 上面的是除了IE6的主流浏览器通用的方法 */ * html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;} * html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));} * html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));} * html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));} * html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));} </style> </head> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> lkji<br> <div id="ss" class="fixed-bottom" style="background-color: red;">1111</div> <body> </body> </html>
http://www.xiaoneidaima.com/art_css/20101118/111R332010.html
评论
4 楼
sibyl_pisces
2013-03-07
guangqiang 写道
嗯 有点意思 敬同行 你也是在青岛吗 ?
嗯,在青岛。
3 楼
guangqiang
2013-01-11
嗯 有点意思 敬同行 你也是在青岛吗 ?
2 楼
sibyl_pisces
2011-12-21
anqiuejack 写道
解决了我的问题,但还是搞不懂对IE固定设定的代码的意思,这是JS吗
是 css
1 楼
anqiuejack
2011-12-12
解决了我的问题,但还是搞不懂对IE固定设定的代码的意思,这是JS吗
发表评论
-
table居中(ie、ff)
2012-10-11 15:06 726<div class="index_ta ... -
【转】优秀设计网站参考
2012-05-04 09:21 1166转载自 chenxinxin2 最终编辑 chenx ... -
视频播放器代码(转载)
2012-05-04 09:18 8991. Google Video and YouTube ... -
文字和图片一起排版,line-height 在IE6 下失效
2011-10-12 16:38 1019BUG症状:当在一个容器里文字和img、input、te ... -
<li></li>列表中显示文字强制不换行,大于li宽度自动隐藏
2011-09-23 13:59 1512li{ display:block;font-size:14 ... -
由offsetTop引起的js无缝滚动只滚动一次的临时解决办法
2011-09-22 17:13 1314今天有个分公司设计师投诉,问题是他在网上找到的js无 ... -
CSS让同一行的图片和文字垂直居中对齐
2011-08-30 10:59 2070很简单,就是在图片和文字所在的行中添加CSS属性:vertic ... -
table和div设置height:100%无效的完美解决方法
2011-06-02 09:27 2625刚接触网页排版的新手,常出现这种情况:设置table和 ... -
表单对齐效果
2011-03-17 09:45 745效果图 见附件 css <style typ ... -
ICOFormat.8bi--photoshop生成ICO插件
2011-03-08 09:34 1323解压附件,拷贝到ps安装目录下的 Plug-Ins\File ... -
IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例
2011-03-02 10:07 1029IE hack "\9&quo ... -
增强SEO的div+css命名规则
2011-02-22 14:40 581页头:header登录条:loginBar标志:log ... -
网站小知识(备忘)
2011-01-14 13:17 0版权声明的写法 正确的格式应该是:Copyr ... -
我的css笔记
2012-05-16 08:11 828编码 css文件的 ... -
一些好的css书写习惯
2010-12-09 10:30 0总结一些好的css熟悉习惯,一些常用的写法,备查阅。 ... -
css简写
2010-12-09 10:29 01.多个CSS选择器使用同一组属性。每个选择器之间用逗号分割开 ... -
网站配色之一
2010-12-04 19:51 881最近,工作的关系,做关于网站前台的东西比较多,其中 ... -
css文字截取
2010-12-04 11:25 935写一些ul.li标签的时候比较有用. 看了Realazy.陈 ... -
css表单对齐解决方案
2010-12-04 10:07 2686表单的样式一直是前端所重视的,也是最难解决的,每个人 ...
相关推荐
NULL 博文链接:https://m635674608.iteye.com/blog/1356277
23.jquery实现的动感菜单导航条源码 24.jquery实用滚动下拉菜单代码 25.jquery鼠标移动出现下拉菜单及提示特效代码 26.jquery外国滚动型多级展开菜单插件(jGlideMenu)下载 27.jquery自由滚动切换 标签式...
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的...
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
33:div+css显示对联带关闭代码下载 34:文字导航广告代码演示下载 35:文字滚动消息广告代码下载 36:大幅商品展示广告代码下载 37:TOP排列幻灯广告代码下载 38:下拉显示幻灯广告代码下载 39:文字上翻幻灯广告...
33:div+css显示对联带关闭代码下载 34:文字导航广告代码演示下载 35:文字滚动消息广告代码下载 36:大幅商品展示广告代码下载 37:TOP排列幻灯广告代码下载 38:下拉显示幻灯广告代码下载 39:文字上翻幻灯广告...
11.10 网络导航条 11.11 隐藏式菜单 11.12 仿flash菜单 11.13 滚动导航菜单 11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 ...
11.10 网络导航条 11.11 隐藏式菜单 11.12 仿flash菜单 11.13 滚动导航菜单 11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 ...