文章关键字 ‘html’
2010年07月8日,星期四

本文的核心观点为CSS的合并与模块化,似乎与前一篇文章“CSS样式的再分离”有矛盾,其实不然,分离可以精简CSS代码,合并也可以精简CSS代码,一切都是权衡!或是说是在恰当的情况下使用恰当的手段。
正如前文所提到的,分离可以精简CSS,但是同时会带来巨大的HTML代码的开销,显然,对所有的样式进行再分离式不切实际的,是会带来痛苦的。
本文的“合并”和“分离”属于对立又相辅相成的,理解的“合并”与“分离”的精髓之后,您会发现写CSS代码就是一门艺术。同样的,本文也是为我后面的“我的CSS架构”一文做铺垫的,写这些都是为了同一个目的:写出最精简高效的CSS代码……
阅读全文…
标签:CSS库, CSS架构, css相关, html, 文本框美化, 样式分离, 样式合并, 模块化, 系统架构
发布在 CSS相关 | 12 条评论 »
2010年07月8日,星期四

我从以前讲布局思想,讲无CSS rest,到现在的CSS样式分离之再分离,以及后面的CSS架构,都是一个体系里面的。我清楚的指导,这些东西,其实很多优秀的前端人员也是知道一二,或是比我理解更深刻的。但是,对于大多数同行而言,可能认为我“又在挑刺”,其实不然。
我把我自己的理解讲出来,是希望让您知道,现在绝大多数的CSS写法,架构都是有很多不足的,缺少创新。我就这么跟您说吧,您所做的任何项目,其实根本只要一个CSS文件就足够,您要是真的通透了CSS的“分离”、“架构”,即使这个网站项目有100个页面(风格统一),您也可以只使用一个CSS页面,并且可以控制CSS文件(未压缩)在40K以下。
我是自信可以这么实现的。我最近做的项目50多个页面,未压缩(含大量注释,竖排)的CSS文件,就30K左右,服务器端压缩后仅11K左右,同时网站整站自适应,从内容到各个按钮,导航,全部宽度自适应,兼容性良好….
阅读全文…
标签:css reset, css相关, html, 兼容性, 分离, 布局, 架构, 样式, 样式分离, 流动性布局
发布在 CSS相关 | 23 条评论 »
2010年06月22日,星期二

这是我近期写的有一个实用的小插件,主要是在客户端对页面文字进行搜索并高亮显示。js文件很小,未压缩版仅3K,不足100行代码,但是搜索的速度还是很让人满意的。
本文将简单展示于介绍这个实用的小工具插件,提供截图,Demo页面以及源文件下载希望能对您的学习有所帮助。
阅读全文…
标签:html, join, jQuery, plugin, split, textSearch, 关键字, 前端, 插件, 搜索, 正则表达式
发布在 jQuery相关 | 47 条评论 »
2010年04月23日,星期五
我经常思考如何更加清晰的表述自己的观点,所以我会截图、会制作动画,甚至会录制视频,当然demo也是必不可少的。但是,有时候,我们想要看到的不只是现象,更要直观地看到内部的代码运作,例如,我们学习jQuery的外部插入方法,节点删除这类DOM操作时,看到HTML节点代码的变化是最直观的了;还有,也是更加必要的,就是在js功能调试的时候,有时候,我们要修改一个表单的name值,但是修改与否,页面上是显示不出来的,但是如果可以窥见HTML代码,那就很赞了。
所以我决定写一个可以高亮动态显示HTML片段的插件,方便调试与演示。本文提供详细的演示与讲解,以及源文件下载,希望能对您的学习有所帮助。
阅读全文…
标签:firebug, html, htmlcode, jQuery, 兼容性, 插件, 浏览器, 高亮代码
发布在 jQuery相关 | 5 条评论 »
2010年03月18日,星期四
道家是以老子、庄子为代表的中国春秋战国时期诸子百家中最重要的思想学派之一。道家思想以其独特的宇宙、社会和人生领悟,在哲学思想上呈现出永恒的价值与生命力。
在众多的道家思想内容中,其非常重要的一个核心思想:顺其自然,无为而治,我是非常之推崇,这种哲学思想已经深深地影响到了自己的为人处事,思考问题的方式。
本文就将通过“顺其自然,无为而治”的思想,讲述我对网页页面重构的一些思考。揭示一些规律,希望能对您有所帮助。
阅读全文…
标签:css相关, Google, html, web综合, 哲学, 布局, 简洁, 设计, 道家思想, 页面重构
发布在 CSS相关 | 13 条评论 »
2009年12月30日,星期三
HTML标签元素就是砖砖瓦瓦,看上去很一般,但是到了优秀的设计师手里和优秀的工人那里就会发挥出无限的潜力与魅力,于是有了我们多姿多彩的互联网。列表元素也是如此,HTML列表元素(如ol,ul,dl)等在现下的网站开发制作中有着非常广泛的应用,然而,它们的在不同浏览器下的脾气却不一样。本文就是分析这些列表元素的基本特性,在不同浏览器下的各类兼容性问题,以及介绍一些常见的应用等。虽然还有几十更多的用途和技术可以在本文中讨论,但是本文展示的一些东西以让我们彻底的了解HTML中列表标签元素的的概貌,帮助您用列表这类砖瓦构建出漂亮的“互联网建筑”。
阅读全文…
标签:bug, css相关, dl, haslayout, html, HTML5, InnerFade, jCarousel, jQuery, li, ol, ul, 兼容性, 列表, 导航, 浏览器, 浮动, 菜单
发布在 HTML相关 | 8 条评论 »
2009年12月14日,星期一
本文翻译自haslayout.net,里面集合了IE6,IE7,IE8下的bug们,每个bug都有一个相应的教程页面,教程页面有关于bug的介绍,产生原因以及解决方法等。教程页面未翻译直接链接到原项目。本文相对于一个bug集合的中文版首页。虽然我很努力,但是其中难免会有不准确之处,欢迎之处。最后,附上doc版的翻译内容,希望对您有所帮助。
阅读全文…
标签:bug, css相关, html, IE, IE6, IE7, IE8, js相关, 翻译
发布在 外文翻译 | 4 条评论 »
2009年11月17日,星期二
目前,以1024像素显示器为目标的960~1000像素的网页在占有率越来越高的宽屏下的显示有些吃力了。采用流动性布局,也就是宽度自适应布局可以有效解决这一问题。自适应问题是个很大的题目,如果深入细节,不是几篇文章可以说清的。本文就针对实现简单的三栏宽度自适应做题。简要展示了我所熟知的三种宽度自适应布局方法。全都是比较优秀,没有兼容性问题的方法。提供demo实例演示以及源文件下载。希望对您有所帮助。
阅读全文…
标签:css相关, html, 兼容性, 分辨率, 定位, 布局, 显示器, 浮动, 自适应, 页面重构
发布在 CSS相关 | 40 条评论 »