本民工的小窝呢用的是最普通的空间了,每月15G的流量,之前每天基本上只用得到10%左右。估计最近是因为发了几个有关AS3音频的东东,由于AS3的安全策略问题链不了别的地方的文件,所以就传了几个MP3在我的空间里然后自己连上来。结果恐怖的事情发生了,由于别处转载以及源码里的地址也是我的空间里的,以至IP没来多少但流量去得爆快,转眼之间流量就没了。虽说买流量也不贵,但也只是权宜之计,所以我暂时把那些MP3给删了,会导致某些FLASH不能正常播放,请大家包涵一下了。
哎,下回再也不这样干了。
前阵子碰到一个问题,就是在IE6中select会把浮动的DIV给挡住,通常情况都是用JS控制某个DIV显示隐藏的情况下发生的。这冲时候不管怎么设z-index值都没有用。
我也查了很多资料,说这是IE6的一个BUG(哎,万恶的IE6),解决的办法不外乎两种:1、用DIV模拟一个select出来。2、在隐藏层的底部加一个透明的iframe。第一种感觉花的工夫比较大,暂时就用第二种方法了,我这个原本用的是jquery的框架,这里我就把jquery的帖上来了。在你要调用的JS文件里加上这么一段:
1 2 3 4 5 6 7 8 9 10 11 12 | (function($){$.fn.bgIframe=$.fn.bgiframe=function(s){ if($.browser.msie&&/6.0/.test(navigator.userAgent)) {s=$.extend({top:'auto',left:'auto',width:'auto',height:'auto',opacity:true, src:'javascript:false;'},s||{});var prop=function(n){ return n&&n.constructor==Number?n+'px':n;},html='< iframe frameborder="0"tabindex="-1"src="'+s.src+'"'+'style="display:block; position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%; filter:alpha(opacity=0);-moz-opacity:0;"/>'; return this.each(function() {if($('> iframe.bgiframe',this).length==0) this.insertBefore(document.createElement(html),this.firstChild); });}return this;};})(jQuery); |
然后在你应用的页面调用
1 2 3 4 5 | <script> $(document).ready(function(e){ $('.your_class').bgiframe(); })//其中your_class是被挡住的层的类名。 </script> |
记得在初期的时候,工作中时不时都要去查一查CSS手册,后来慢慢地经验多了也就基本上不用查手册了。但是为了向WEB标准靠拢,近来都比较常用到HMTL手册。不管怎么说,这两本手册也应该是一个WEB前端人员必备的吧。CSS手册之前发过,这里把HMTL的发上来吧。
关于display:inline-block,手册上是这样解释的:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。这个属性算是有点冷门吧,也许有些朋友平时也不怎么会用到这个属性。不过在某些情况下给一些内联元素用display:inline-block,比如说a标签或span标签,会省不少工夫,比如说之前发的一个滑动门效果就是这样用的。
不过在这里又发现了一个问题,在块级元素上这个属性无效,比如说加在DIV上但此DIV还会是行布局。其实在这里也只是想深入研究一下而已,在实际项目中完全可以用别的方法避免这个问题的产生。所以也查阅了不少资料,其实内联元素也并非是真正支持display:inline-block,只是因此触发了hasLayout属性,而使其拥有了display:inline-block 的特性。而应用到块元素上时,同样也只是被触发了hasLayout属性,所以还是分行布局。而关于hasLayout,可能有很多朋友会觉得陌生,大家可以参阅一下这篇文章《On having layout》,原文件的链接好像有点问题,我这里链的是蓝色理想上的一篇转载。
接下来就应该说说如何解决这个问题了,有两种方法。
1、先定义display:inline-block ,再定义display:inline,不过要分开定义才有效,这好像是IE的一个BUG。
1 2 | div {display:inline-block;...} div {display:inline;} |
2、直接定义display:inline,然后再触发块级元素的hasLayout,如何触发在之前提到的那篇文章有详细说明。
1 | div {display:inline; zoom:1;...} |
其实CSS滑动门这个概念早在几年前就已经出现了,只是近来年被提得比较多而已。但是常常有人把它跟选项卡效果混淆在一起,特别是一些新手朋友,所以我在这里写篇详解,希望能有所帮助。
说起来滑动门也不是什么高深的技术,也只是CSS的一种手法罢了。它是利用背景图像的交迭以及相互滑动来实现一些效果。最常见的就是圆角的导航了,我们可以把一左一右两个圆角背景想像成两扇可以滑动的门,他们可以滑到一起并交迭以显示较少的内容,也可以相互滑开以显示较多的内容,就如下图所示:
在以往的一些教程中,都喜欢把背景图切成一宽一窄两部分进行拼接,其实一张图就足矣。
在这里,我们只用了<a>跟<span>两个标签,样式可以定义三种状态,可以说是最简单的一种方式了。此为本民工原创,如有雷同纯属巧合,转载请注明出处。
提示:你可以先修改部分代码再运行。