本文旨在向你说明CSS Sprites的含义以及它的应用方法！

CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需 顾忌这个问题。

按照yahoo的rules for high performance web sites的原则，应当较少Client与Server端间 的HTTP Request次数。通过CSS Sprites方法将多张图片组装成单独的一张图片，可以有效减少HTTP请求 的次数。

当整幅图片载入完成后，你就可以使用CSS方法通过设置背景位置的方式完成所需图片的准确调用。

加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。

Let’s start with the basics. What are CSS sprites?

Read more…

验证可用！这套代码用起来非常舒服，我们可以任意改变边框和背景的颜色；任意调整矩形的宽度！只是没办法调整高度，因为这套CSS代码本身是不限制圆角矩形宽度的，我们是在其外加一个DIV来限制其宽度，所以只能横向整！纵向整不了！

调整方法：通过调整CSS文件中的#Bruce内的width来调整矩形的宽度；将CSS文件中所有的#999统一换成你需要的边框颜色；在CSS文件.d1中调整背景颜色和内容填充距离、间距。 Read more…

看来学学Javascript真的是非常有必要。各种效果只要一小段代码就可以实现，非常的诱人！像上次的鼠标滑过变色表格一样，大家灵活运用吧！

ps.验证可用！

Read more…

初学DIV+CSS应该理解HTML标签的语义。

如今Web标准都被通俗的叫做“div+css”或者“层布局”。我不反对这种便宜行事的叫法。但是这样会陷入一个误区：即大量的使用div标签作为结构元素。事实上这是一种更高级的div滥用(Jeffrey Zeldman在《网站重构》一书中提到）。

HTML为我们提供了相当丰富的标签，每个标签都有它各自的含义。我认为在设计时，除了遵循HTML语法以外，应该充分利用并遵守各标签的“语义”。如标题文字应该包含在h1-h6中，大段的文字内容应该由<p>进行分段而不是<br />，列表项应该放在ul或ol或dl中，表格形式的数据应该仍然用table布局。

为什么要这样做？一个很有说服力的原因是，保证在用户去掉CSS显示的情况下，网页能够尽量有效的将内容的结构层次显示出来。如果全部用div，当去掉CSS之后，整个网页就失去了层次，只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。

我下面详细的列举一下我对一些标签的语义的理解：

Read more…

这里介绍的鼠标划过变色和a:hover{}的属性是不一样的！验证可用，请灵活运用之！

第一种: expression

代码如下: Read more…