文章关键字 ‘html’

纯客户端页面关键字搜索高亮jQuery插件

2010年06月22日,星期二


这是我近期写的有一个实用的小插件,主要是在客户端对页面文字进行搜索并高亮显示。js文件很小,未压缩版仅3K,不足100行代码,但是搜索的速度还是很让人满意的。
本文将简单展示于介绍这个实用的小工具插件,提供截图,Demo页面以及源文件下载希望能对您的学习有所帮助。

阅读全文…

jQuery – 高亮动态显示页面HTML代码插件

2010年04月23日,星期五

我经常思考如何更加清晰的表述自己的观点,所以我会截图、会制作动画,甚至会录制视频,当然demo也是必不可少的。但是,有时候,我们想要看到的不只是现象,更要直观地看到内部的代码运作,例如,我们学习jQuery的外部插入方法,节点删除这类DOM操作时,看到HTML节点代码的变化是最直观的了;还有,也是更加必要的,就是在js功能调试的时候,有时候,我们要修改一个表单的name值,但是修改与否,页面上是显示不出来的,但是如果可以窥见HTML代码,那就很赞了。

所以我决定写一个可以高亮动态显示HTML片段的插件,方便调试与演示。本文提供详细的演示与讲解,以及源文件下载,希望能对您的学习有所帮助。

阅读全文…

中国古代道家思想与网页重构的思考

2010年03月18日,星期四

道家是以老子、庄子为代表的中国春秋战国时期诸子百家中最重要的思想学派之一。道家思想以其独特的宇宙、社会和人生领悟,在哲学思想上呈现出永恒的价值与生命力。
在众多的道家思想内容中,其非常重要的一个核心思想:顺其自然,无为而治,我是非常之推崇,这种哲学思想已经深深地影响到了自己的为人处事,思考问题的方式。
本文就将通过“顺其自然,无为而治”的思想,讲述我对网页页面重构的一些思考。揭示一些规律,希望能对您有所帮助。

阅读全文…

absolute绝对定位的非绝对定位用法

2010年01月29日,星期五

“无定位值的absolute元素就是个连实际宽度也没有的float浮动元素”,如果您不知道我这句话说的是什么乱七八糟的东西,那您可能有必要读一读本文了,本文分析了absolute的一些另类的应用,即未脱离DOM tree的一些应用。提供详尽的插图以及demo页面,希望对您的学习有所帮助

阅读全文…

HTML CSS列表元素ul,ol,dl的研究与应用

2009年12月30日,星期三

HTML标签元素就是砖砖瓦瓦,看上去很一般,但是到了优秀的设计师手里和优秀的工人那里就会发挥出无限的潜力与魅力,于是有了我们多姿多彩的互联网。列表元素也是如此,HTML列表元素(如ol,ul,dl)等在现下的网站开发制作中有着非常广泛的应用,然而,它们的在不同浏览器下的脾气却不一样。本文就是分析这些列表元素的基本特性,在不同浏览器下的各类兼容性问题,以及介绍一些常见的应用等。虽然还有几十更多的用途和技术可以在本文中讨论,但是本文展示的一些东西以让我们彻底的了解HTML中列表标签元素的的概貌,帮助您用列表这类砖瓦构建出漂亮的“互联网建筑”。

阅读全文…

IE下css bug集合-翻译自haslayout.net

2009年12月14日,星期一

本文翻译自haslayout.net,里面集合了IE6,IE7,IE8下的bug们,每个bug都有一个相应的教程页面,教程页面有关于bug的介绍,产生原因以及解决方法等。教程页面未翻译直接链接到原项目。本文相对于一个bug集合的中文版首页。虽然我很努力,但是其中难免会有不准确之处,欢迎之处。最后,附上doc版的翻译内容,希望对您有所帮助。

阅读全文…

CSS实现圆角六色渐变自适应按钮详解

2009年11月21日,星期六

本文将要展示如何用纯css实现2个像素的真正意义上的圆角,并且按钮带有细腻圆滑的渐变效果,其色彩丰富,可支持6种过渡色,从上往下可支配的颜色达9种。
本文将通过业余的图片、视频来演示实现的原理,将代码形象化,提供demo,希望您可以充分了解这种技术,也希望能开阔您的思维,对您的工作与学习有所帮助。

阅读全文…

我熟知的三种三栏网页宽度自适应布局方法

2009年11月17日,星期二

目前,以1024像素显示器为目标的960~1000像素的网页在占有率越来越高的宽屏下的显示有些吃力了。采用流动性布局,也就是宽度自适应布局可以有效解决这一问题。自适应问题是个很大的题目,如果深入细节,不是几篇文章可以说清的。本文就针对实现简单的三栏宽度自适应做题。简要展示了我所熟知的三种宽度自适应布局方法。全都是比较优秀,没有兼容性问题的方法。提供demo实例演示以及源文件下载。希望对您有所帮助。

阅读全文…

Ajax Upload多文件上传插件翻译及中文演示

2009年11月7日,星期六

Ajax Upload文件上传插件允许你上传多个插件而无需刷新页面,可以使用任何的元素来显示文件选择窗口。它可以在所有主流的浏览器下工作,从2.0版本开始,不需要任何库运行。Ajax Upload文件上传插件不会污染任何命名空间,所以它与jQuery,Prototypejs,mootools其他JavaScript库兼容。
我花费数小时将原项目英文讲演页面原封不动的翻译过来,并提供更加简化的JavaScript+php多文件上传实例。本文提供Demo页面以及源文件下载,希望对您有所帮助。

阅读全文…

告别图片—使用字符实现兼容性的圆角尖角效果beta版

2009年11月6日,星期五

字符既是文字又是图片,所以很多时候我们可以使用字符代替图片实现一些貌似只有图片才能实现的效果,例如,圆角,尖角等。您就可以使用字符实现这类效果。可以优化页面,提高性能。
本文以Google gmail邮箱中字符应用为引子,讨论的字符的一些特性,与图片相比的一些优缺点。而后,以字符+css的方式展示如果使用字符实现圆角效果,如何实现尖角效果。最后拿新浪微博的对话框做实际的实例,演示如何使用字符代替图片,实现几乎同样效果的优化,以展示字符的实际应用性及潜力。
本文提供详尽细致的demo页面,提供源文件打包下载,希望本文的论述能够对您有所帮助。

阅读全文…