2010年07月8日 by 张 鑫旭 阅读 160834 次, 今日 3 次

我从以前讲布局思想,讲无CSS rest,到现在的CSS样式分离之再分离,以及后面的CSS架构,都是一个体系里面的。我清楚的指导,这些东西,其实很多优秀的前端人员也是知道一二,或是比我理解更深刻的。但是,对于大多数同行而言,可能认为我“又在挑刺”,其实不然。
我把我自己的理解讲出来,是希望让您知道,现在绝大多数的CSS写法,架构都是有很多不足的,缺少创新。我就这么跟您说吧,您所做的任何项目,其实根本只要一个CSS文件就足够,您要是真的通透了CSS的“分离”、“架构”,即使这个网站项目有100个页面(风格统一),您也可以只使用一个CSS页面,并且可以控制CSS文件(未压缩)在40K以下。
我是自信可以这么实现的。我最近做的项目50多个页面,未压缩(含大量注释,竖排)的CSS文件,就30K左右,服务器端压缩后仅11K左右,同时网站整站自适应,从内容到各个按钮,导航,全部宽度自适应,兼容性良好….
阅读全文…
标签: css reset, css相关, html, 兼容性, 分离, 布局, 架构, 样式, 样式分离, 流动性布局
发布在 CSS相关 | 23 条评论 »
2010年07月1日 by 张 鑫旭 阅读 251739 次, 今日 4 次
月光大人曾说过与下面主要意思一样的话:写博客三五天写一篇重量级的文章,隔个一天两天写个简单,价制度偏低的文章,是比较不错滴。本文就属于有凑篇数之嫌的价值相对偏低的文章。加上本身js还很稚嫩,所以本文内容的方法一般般,仅供参考。
本文的核心内容就是展示可以轻松应用鼠标经过延时执行的jQuery方法,提供必要的demo,提供源代码展示,提供源文件下载,提供必要的截图,希望对需要之人提供一定的帮助。
阅读全文…
标签: hover, javascript, jQuery, js相关, mouseover, plugin, QQ, setTimeout, 导航, 延时, 插件, 鼠标事件
发布在 jQuery相关 | 33 条评论 »
2010年06月26日 by 张 鑫旭 阅读 61910 次, 今日 1 次
本文内容并不多,主要就是简单介绍下CSS3的text-fill-color属性,并举例展示其应用。展示,如果利用CSS3的text-fill-color属性实现效果精湛的文字遮罩渐变动画效果。提供必要的截图,代码展示,以及视频动画消失。希望能对您的学习有所帮助。
阅读全文…
标签: animate, chrome, css3, flash, Safari, text-fill-color, 填充, 文字, 渐变, 遮罩
发布在 CSS相关 | 2 条评论 »
2010年06月24日 by 张 鑫旭 阅读 77539 次, 今日 1 次

本文主要内容是展示于讲解一种不错UI效果的实现,这个UI效果就是photoshop的选区效果。提供截图展示,提供原理动画演示,相信您会很快了解这类效果的实现方法的。另外,文章的后半部分列举了此效果的一些应用,希望能对开通您的思维提供帮助,利用这种UI效果实现更多精湛的web设计。
阅读全文…
标签: css相关, photoshop, UI, 动画, 图片, 背景, 背景图片, 虚线, 设计, 选区
发布在 CSS相关 | 6 条评论 »
2010年06月22日 by 张 鑫旭 阅读 137580 次, 今日 2 次

这是我近期写的有一个实用的小插件,主要是在客户端对页面文字进行搜索并高亮显示。js文件很小,未压缩版仅3K,不足100行代码,但是搜索的速度还是很让人满意的。
本文将简单展示于介绍这个实用的小工具插件,提供截图,Demo页面以及源文件下载希望能对您的学习有所帮助。
阅读全文…
标签: html, join, jQuery, plugin, split, textSearch, 关键字, 前端, 插件, 搜索, 正则表达式
发布在 jQuery相关 | 47 条评论 »
2010年06月21日 by 张 鑫旭 阅读 119044 次, 今日 4 次

本文将介绍一种效果精湛,兼容性强,扩展性强,易上手易理解的按钮实现方案,此按钮与以往介绍的按钮一样,也是高宽自适应,可与图片混排,受控于text-align属性。但是这里的代码更加精简易懂,更符合主流与开发者的习惯。
本文提供必要的截图,提供Demo页面,以及代码展示,并对代码做了一定的讲解,希望能对您的学习有所帮助。
阅读全文…
标签: button, css相关, inline-block, line-height, 兼容性, 图片, 宽度自适应, 按钮, 渐变, 渐变背景, 高度自适应
发布在 CSS相关 | 3 条评论 »
2010年06月19日 by 张 鑫旭 阅读 158832 次, 今日 6 次
本文主要阐述我们绝大多数开发人员可能会忽略的不知道的一个用户体验与页面可用性的一个问题,截图丰富,没有Demo,下面为文章内容摘要,相信会对您的进步提供一点帮助的。
我们可能仅仅是忽略而已,仅仅是不知道而已!对于中文网站,我们的用户绝大多数是中文用户,在页面上设置中文字体属性(宋体/simsun)会降低页面的可用性和潜在的用户体验。如今的web,好的产品往往是可以满足用户的个性需求和自主能动性。页面上中文字体的设置会扼杀浏览器的默认中文字体,无法让用户以自己喜欢的中文字体显示。所以,我个人的倾向是,不要再CSS中,至少在body/html这类标签上设置中文字体。
我本想把本文的题目定为“不要再CSS中定义中文字体”,这样的题目更有噱头,但是……(我要转折)。因为我突然想到,有些网站就是不让你使用您自己定义的字体,比如网站可能会使用“微软雅黑”与“宋体”来区分中文与标题,如果网站中文字体可以提过浏览器自定义,例如“微软雅黑”,则标题与正文字体一致,反而增加了阅读浏览负担,降低了用户体验。
所以,到底哪种做法更好,要看实际的情况,合适的往往是最好的。但是,您需要知道:在CSS中设置中文字体会让中文用户无法通过修改浏览器默认字体来按照自己的需要浏览网页。至于具体您会怎么做,那就看您自己了……
阅读全文…
标签: css相关, font, font-family, simsun, 中文字体, 可用性, 字体, 宋体, 浏览器, 用户体验
发布在 CSS相关 | 18 条评论 »
2010年06月18日 by 张 鑫旭 阅读 161907 次
本文主要展示我今天差不多花了一天时间写的邮箱地址自动提示的插件,算是蛮实用的东西,插件不大,为压缩不足6K。跟以往一样,提供详尽的插图,提供demo页面,提供源文件下载以及代码示例。总之,希望能对您的学习有所帮助。
阅读全文…
标签: jQuery, mailAutoComplete, plugin, 宽度自适应, 提示, 插件, 正则表达式, 邮箱地址
发布在 jQuery相关 | 37 条评论 »
2010年06月12日 by 张 鑫旭 阅读 161708 次, 今日 3 次
vertical-align属性可以说是CSS中兼容性最糟糕的属性之一了。比如说与文字相关的vertical-align属性,vertical- align:text-top;和vertical-align:text-bottom属性,这两个属性的解释IE浏览器(IE6-8)和现代浏览器是不一样的两个派别。到底哪种表现是正确的,这是不能随便做定论的。无论实现的机制如何,若能实现类似的效果表现,其实都可以说是正确的。在一般的使用条件下,例如小图标+文字,vertical-align:text-top这类文字对齐类属性在不同浏览器下的差异是较小的,这很难让我们去思考与理解这些差异在什么地方。但是,如果我们将测试的元素进行简化与放大,那么差异显而易见,也更利于我们思考其中的原因所在……
本文是我对CSS vertical-align属性深入思考后的一些心得体会,提供丰富飞截图,动画演示,以及必要的demo。希望讲的足够通俗易懂,能对您的学习有所帮助!
阅读全文…
标签: css相关, IE6, IE7, IE8, inline, inline box模型, line-height, text-top, vertical-align, 兼容性, 对齐, 文字, 浏览器, 行高
发布在 CSS相关 | 36 条评论 »
2010年06月7日 by 张 鑫旭 阅读 93439 次
虽然这个插件很小,雕虫小技,不值一提,微不足道,黔驴技穷,甚至称不上插件,但是毕竟有时候还是很实用的,所以呢,就放出来了,让大伙儿瞧瞧。
本文内容简单,主要就是提供demo展示,一些文件的下载,一些使用的简单说明,还有就是有着浓郁的本人语言风味的废话,总之,希望能对您的学习有所帮助。
阅读全文…
标签: flickr, jQuery, plugin, toggleClass, 插件, 文本域, 文本框
发布在 jQuery相关 | 8 条评论 »