display:inline-block/text-align:justify下列表的两端对齐布局

2011年03月13日 by 张 鑫旭 阅读 305201 次, 今日 18 次


本文可以说是本月的重磅文章之一,讲的是如何利用text-align:justify在display:inline-block列表布局基础上实现列表元素的两端对齐布局,分门别类,由浅入深,逐层深入,并有一些总结性的注意事项。一如既往,本文不仅提供丰富的截图示意,提供必要的源代码展示,及时雨般的demo页面,更上一层楼,还提供总结性的表格数据。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

IE矩阵滤镜Matrix旋转与缩放及结合transform的拓展

2011年03月12日 by 张 鑫旭 阅读 137897 次, 今日 5 次

IE浏览器下Matrix滤镜可以实现旋转效果早在去年1月份在“图片旋转效果的一些研究、jQuery插件及实例” 一文中就有过还算详细的介绍。这里之所以要重新嚼以前嚼过的烂叶子是因为我之前以为IE Matrix矩阵滤镜只能实现元素的旋转与拉伸,但是就在前几天发现Matrix滤镜还有元素比例缩放的功能,类似于zoom属性的功能。于是花时间折腾了一下,决定立文备忘下。

由于现代浏览器中CSS3的transform属性可以轻松实现元素的旋转以及比例改变,所以如果……

阅读全文…

CSS/CSS3长度、时间、频率、角度单位大全

2011年03月7日 by 张 鑫旭 阅读 73054 次, 今日 6 次

本文主要简单介绍下CSS中各式各样的单位值,旨在拓展眼界,所以内容都是很浅显的。重要的是一个关于单位以及含义的表格,虽说是篇简单粗糙的文章,但是还是有必要的demo页面以及相应的截图和源代码展示的。客套的话就不多说了,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

style标签下的CSS代码的显示与实时编辑

2011年03月3日 by 张 鑫旭 阅读 88030 次, 今日 3 次

本文讲的是如何让一段CSS代码可以在页面上显示,同时有可以修改,更关键的是修改的同时页面上对应元素的样式也跟着改变。文本内容不是很多很长,关键是展示这种不错的技术。跟以往的文章一样,提供demo页面,提供相应的截图以及必要的源代码展示。总之,希望能够对您的学习有所帮助。

阅读全文…

CSS流体(自适应)布局下宽度分离原则

2011年02月28日 by 张 鑫旭 阅读 183204 次, 今日 4 次


之前曾作有“页面重构鑫三无准则之无宽度准则”一文,属于流体布局系列中的偏理论性的文章,本文也是这种性质的,可谓是“无宽度准则”一文的延续。本文主要内容就是介绍了何为宽度分离原则,为什么要宽度分离,即宽度分离的好处,然后通过京东商城和淘宝网的例子展示了宽度分离的使用并分析了利弊。本文虽然没有demo页面,但是其中的理论性文字还是比较精彩的,配以必要的截图和源代码展示。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

遐想:如果没有IE6和IE7浏览器…

2011年02月24日 by 张 鑫旭 阅读 90783 次, 今日 3 次

本文其实是篇“不切实际”的YY之文。YY的背景就是IE6/IE7浏览器功德圆满,已经退休回家带孙子了。YY的内容就是此背景下我们前端er们可以做的些有趣且美好的事情。本文内容其实可以换个题目就是: IE6/IE7浏览器不支持前端功能简介。文章主要列举了四个功能,其中两个JavaScript方面的,两个CSS方面的。其实更多的是介绍一些新的技术。

本文各个parts都提供必要的截图,或是文章链接;提供必要的源代码展示;JavaScript部分专门制作了很有喜感的demo页面;CSS部分提供了其他作者制作的相关demo。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

翻译-js表达式闭包(expression closures)的进一步亲密接触

2011年02月18日 by 张 鑫旭 阅读 50536 次, 今日 2 次

本文是一篇对于拓展眼界,开阔思路很有帮助的文章。翻译了关于javascript 1.8中表达式闭包(expression closures)的一些内容。里面不少东西是很奇怪很折腾的。不管怎么,还是很浅显易懂的。源代码展示,截图或是demo实例页面是非常全且丰富飞。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

几种纯CSS(CSS3)下的纸张效果实现展示

2011年02月16日 by 张 鑫旭 阅读 103229 次, 今日 2 次


本文主要展示如果使用纯CSS实现纸张效果,这里的CSS其实主要指CSS3. 展示的纸张效果也不是一种,就文中具体内容来看,有三个,一个是中规中矩的,二是渐变有曲线投影效果的,还有一个就是有分隔线圆弧卷边效果的。每个效果都配有截图展示,有对应的demo页面,还有必要源代码展示,同时,穿针引线地介绍了写最新的CSS3的发展与浏览器支持情况。总之,希望能对您的学习有所帮助。

阅读全文…

js页面文字选中后分享到新浪微博实现

2011年02月12日 by 张 鑫旭 阅读 147381 次, 今日 2 次

正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。
一般翻译软件都有划词翻译功能,启用后,随便选中那个软件的一段文字,就会出现类似这样子的浮动提示框。
在web页面上,我们也是可以实现类似的效果的:划词→显示提示→分享。这样子,我们就可以轻松地将页面上的内容分享到新浪微博这些微博网站上了。

本文提供demo页面,提供源代码展示,必要的截图。总之,希望能对您的学习有所帮助。

阅读全文…

HTML5 drag & drop 拖拽与拖放简介

2011年02月9日 by 张 鑫旭 阅读 448689 次, 今日 18 次

本文简单介绍了下利用HTML5 drag & drop API非常简单轻松地实现拖拽与拖放效果。提供一些关键术语的讲解,提供简单实用的demo页面,提供必要的源代码展示和效果截图。总之,希望能对您的学习有所帮助。

阅读全文…