杰拉斯的博客
操纵历史,利用HTML5 History API实现无刷新跳转
杰拉斯 | 时间:2012-09-05, Wed | 65,758 views前端开发
写在前面
有一次在上点点网的时候,发现登陆、注册动画效果非常华丽,但让我感到震惊的是页面竟能够实现无刷新跳转(已改版,观看此效果可以猛击此处:GitHub或阅FM),回顾了所学的前端知识,似乎没有任何技术可以实现这一点,于是百度搜罗了一下,才发现这原来是使用HTML5中History API实现的效果,但奈何一直未曾派上用场。直到博客改版时,才将这一技术应用起来。
ie6 css sprites重复避免加载
杰拉斯 | 时间:2012-07-20, Fri | 15,580 views前端开发
如果你使用css sprites,那么在ie6下并不能发挥sprites的作用,它还是会每次再重新加载这个图片,解决方法为为ie6添加下面这条js:
<!--[if IE 6]> <script type="text/javascript"> document.execCommand("BackgroundImageCache",false,true); </script> <![endif]-->
转自:W3CPlus
去除inline-block元素间间距的N种方法
杰拉斯 | 时间:2012-06-15, Fri | 4,659 views前端开发
一、现象描述
真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子:
<input /> <input type="submit" />
间距就来了~~
我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题:
.space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb; }
<div class="space"> <a href="##">惆怅</a> <a href="##">淡定</a> <a href="##">热血</a> </div>
您可以狠狠地点击这里:inline-block元素间间距demo
这种表现是符合规范的应该有的表现(如果有人认为是bug就太()ay ()oy 了)。
不过,这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?以下展示N种方法(欢迎补充)!
拜拜了,浮动布局——基于inline-block的列表布局
杰拉斯 | 时间:2012-06-15, Fri | 18,061 views前端开发
本文其实真实题目应该是“CSS float浮动的深入研究、详解及拓展(三)”,但是为了更显著的体现本文的核心内容,顺便搞点噱头吸引眼球,同时跟百哥和谷妹玩点小暧昧,就改成了现在这个样子了。
一、一抹前言
没有爱的日子,时间如指尖细沙,不知不觉就流逝了。写“CSS float浮动的深入研究、详解及拓展(一)”和“CSS float浮动的深入研究、详解及拓展(二)”似乎就在不久前,然而相隔差不多有一年之久了。文章最后留下了“浮动布局更好的替代方案是什么?”后文再介绍的预告。
由于自己肚子中的货物不足以撑起一篇足够质量的文章,所以关于“浮动布局更好的替代方案是什么?”的文章一直并未动笔。好在事物总是在发展的,我也是每天都是在进步,对于列表布局的思考也愈发成熟。加上正好前不久又有人询问我“浮动布局的替换方案是什么”,于是觉得介绍“浮动布局的替换方案“的时机成熟了。
要注意,本文的布局专指列表布局。就是具有相同DOM结构的水平排列可以repeat出来的列表元素。如QQ校友中的图片列表(图片截自老同学相册,已隐去名字):
小文字,大体验
杰拉斯 | 时间:2012-06-01, Fri | 10,480 views前端开发
随着ipad等移动终端的崛起,人们在移动终端阅读上的时间越来越多,阅读体验已经变得越来越重要。而字体又是决定阅读体验的关键所在,那么字体在哪些方面又是什么影响着阅读体验的成败?