站长如何屏蔽流氓宽带商在你的页面里面强行插入的广告代码
几乎所有的宽带商(联通宽带、电信宽带、移动宽带、长城宽带、方正宽带等)都会在用户使用它们的宽带服务浏览网页时,在这些网页的页面上强行嵌入自己的广告服务。
如何让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗?
CSS3多列布局(columns)的用法
CSS3中新出现的多列布局(columns)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示
图片边框border-image的用法
从CSS3起,我们有了一个新的属性:border-image,它能让你用漂亮的小图片来围绕HTML元素,以图片边框的形式出现。通过border-image属性,我们可以制作出非常漂亮的边框样式。
伪元素:before和:after的精彩用法
在上一篇《理解:Before和:After伪元素》文章,我们举出的只是一个非常简单的使用伪元素:before和:after装饰“引用语”的用法。在这片文章里,我要在看看三个更高级、更绚丽的:before和:after的用法。
理解:Before和:After伪元素
所谓‘伪元素’,就是本身不存在的页面元素,HTML代码里并没有这样的元素,但在页面显示时,你却能看到这些本来不存在的元素发挥着作用。

HTML5版的Winamp音乐播放器
这是用纯HTML5和JavaScript实现的Winamp音乐播放器,它不仅仅外观看着像,它是以为可以实际播放音乐的HTML5音乐播放器。它可以播放你提供的音乐歌曲。

用JavaScript探测页面上的广告是否被AdBlock屏蔽了的方法
广告是一个不招人喜欢的东西。但是,对一个中小网站站长/博客主来说,广告几乎是唯一的能成支持网站/博客正常运转的资金来源。如果一个博客主,只是无私发布稿件,能坚持几年的,很少。大多数慢慢失去了热情。

精通:nth-child
CSS3中的:nth-child 伪类是一种非常有用的技巧。使用它,你可以通过CSS控制页面元素的第n个元素,或倒数第n个元素,或从第m个到第n个范围子元素的样式,甚至包括奇数位和偶数位过滤。

如何用JavaScript获取图片的真实尺寸大小
我们最常见到的带有多图的文章页面中,图的大小通常是和页面的宽度一致,这样看起来,页面就是一个直筒形,这样的布局看多了就会觉得很单调。之所以形成这样的局面,我想很大程度上是因为老式浏览器的限制。但随着现代浏览器(火狐/谷歌/IE11)的普及,浏览器对页面设计的限制越来越少,Web程序员的想象能力能够得到极大的发挥。

背景图延迟加载(lazyload)技术
图片延迟加载技术目前已经被各种网站广泛的使用,但最近的一篇《PS美女试验的惊人结果 》文章中使用的确是背景图延迟加载技术。为什么要使用背景图延迟加载技术?下面我们就来说一说这个问题。

JavaScript小技巧:如何检测一个函数是否是JavaScript原生函数
在我的开发工作中经常会遇到需要判断一个函数是否是JavaScript原生函数的情况,有时候这是一个很必要的工作,你需要知道这个函数是浏览器自身提供的,还是由第三方封装、伪装成原生函数。

HTML5探秘:用requestAnimationFrame优化Web动画
在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来。如今有一个好消息,浏览器开发商们决定:“嗨,为什么我们不在浏览器里提供这样一个API呢

12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。

你未必知道的CSS小知识:word-wrap和overflow-wrap是等效的
word-wrap并不是一个很常用的CSS属性,但在特定的环境中确实非常有用的。我们经常使用的一个例子是让页面中显示一个长url时换行,而不是撑破页面,下面是一个例子。

你未必知道的CSS小知识:font-style的oblique属性值
这里描述所用的“oblique”和“italic”都是倾斜的意思。“oblique”在维基百科里的解释就是一种排版术语,就是一种倾斜的文字,但不是斜体。

你未必知道的CSS小知识:你知道table里的empty-cells属性吗?
估计你从语义上已经猜出它的作用了。它是为HTML table服务的。它会告诉浏览器,当一个table单元格里没有东西时,就隐藏它。下面的演示里,你可以点击里面按钮,它会切换empty-cells的属性值,看看table的显示有什么变化

HTML5视差教程:青蛙,蝴蝶,草丛,池塘
我相信视差效果是一种能让你的读者在浏览网页时发出“哇塞”声的效果。所以,在这里,我将要向大家展示一个用jQuery实现的视差效果的例子。在本教程中,我将详细介绍如何用jQuery来移动景图达到具有动画视觉效果的内容。

火狐浏览器里内置的调试自适应网页设计的工具
开发自适应网页的一个必备硬件条件是能模拟出从小到大、从手机到巨屏显示器的各种屏幕大小情况。一般在自适应网页设计最小要考虑的屏幕是400px,最大的可能要到1920px;如果你像我一样只有一台屏幕款是1360px笔记本,那测试比它更大的屏幕就成了问题。

你未必知道的CSS小知识:为什么没有人使用border-image
border-image看起来这是一个非常漂亮的CSS功能,它可以让你用图片修饰元素的边框。下面是一个实例演示,你可以调整窗口的大小,看看有什么变化。

你未必知道的CSS小知识:border-width属性可以使用预定义常量值
也许对与你来说这并不是一个什么新鲜信息。除了你可以使用标准宽度值(例如5px或1em)外,border-width属性可以接受预定义的常量值:medium, thin, 和 thick

你未必知道的CSS小知识:text-decoration属性变成了属性简写
我相信有些小知识会让你大吃一惊。 跟着最新的CSS规范,text-decoration现在的写法是这样的: a […]

你未必知道的CSS小知识:border属性比你想象的要复杂
这里的border属性的用法实际上是一种简写的形式,它分别设置了border-style, border-width, 和border-color — 用一句代码表示它们三个。

你未必知道的CSS小知识:元素竖向的百分比设定是相对于容器的宽度,而不是高度
这是一个很让人困惑的CSS特征,我之前也谈到过它。我们大家都知道,当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如padding-top,padding-bottom,margin-top,margin-bottom等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。

你需要知道的CSS小知识:CSS的clip属性只在绝对定位的元素上才会生效
之前说到了background-clip,你可能会想到clip属性。它的作用是按指定的尺寸、规定的大小裁剪元素。很多简单,但唯一你需要注意的事情是,clip只会在绝对定位的元素上生效。所有,你必须这样做:

CSS的background简写方式里新增了新的属性值
在CSS2.1里,background属性的简写方式包含五种属性值 – background-color, background-image, background-repeat, background-attachment, and background-position。从CSS3开始,又增加了3个新的属性值,加起来一共8个。下面是按顺序分别代表的意思:

CSS里的visibility属性有个鲜为人知的属性值:collapse
其实visibility可以有第三种值,就是collapse。当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,它的表现却跟display: none一样,也就是说,它们占用的空间也会释放。

HTML5小游戏:蓝色拼图
这是一个用HTML5制作的智力游戏,有相当的难度。每个方块一面橙色,一面蓝色。点击一个方块,这个方块的颜色会翻转,并且,与它邻接的方块的颜色也会翻转。使拼板全部变成蓝色, 你就算过关了。

CSS的color属性并非只能用于文本显示
对于CSS的color属性,相信所有Web开发人员都使用过。如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方。