第6章 特效

在本章中，将学会用背景图片、透明和层等技术实现一些先前所无法想象的效果。

本章还将涉及网页设计中的那个最让人困惑的问题——浏览器兼容性。希望其中的案例能够帮助理解一些浏览器增强技术、浏览器兼容性解决方案及浏览器管理等相关的知识。

6.1 This is Cereal

Shaun Inman，设计师

www.csszengarden.com/057

级联和分层效果

Shaun Inman一定非常喜爱均衡的饮食。想象一下这个场景：手捧着一盒“Post Fruity Pebbles”¹，脑海中充斥着一股模仿的旋风和些许冲破陈规的冲动，Inman最终选择了早餐作为他的作品This is Cereal的基调。当然，借助现代浏览器强劲的特效处理能力，他的设计也正冲击着禅意花园视觉效果的巅峰。

注释：¹ 一种零食。——译者注

由于目前为止，仍有很多用户正使用着那些不支持CSS高级功能的浏览器，所以Inman也竭力保证了在用这类浏览器浏览时，作品质量不会有太多的下降。不过即便这样，那些吸引眼球的特殊效果仍旧只能在那些“高级”浏览器中呈现。

禅意花园是一部收集了各种实验性和创意作品的集合，This is Cereal也如其他所有富有创意的作品一样，与禅意花园的主题衔接得天衣无缝。

6.1.1 层叠

可以看到，只有在像Firefox这样的对CSS 2高度兼容的浏览器中，This is Cereal的菜单和透明效果才能正常显示。因为使用这类CSS的新增功能要涉及多种CSS过滤器，且还要CSS中“层叠（cascade）”这种强大功能的支持。

那么级联样式表CSS中的“层叠”究竟是什么意思呢？W3C是这样描述的：“CSS级联为每个样式规则都指派了权重，若元素应用了多个样式规则，那么将优先使用最高权重的样式”。这段定义尽管看上去复杂，但是它包含的两个相互关联的概念——特殊性（specificity）和继承（inheritance）将会成为学习和使用过程中的良师益友，当然，也可能变成让人头痛的噩梦……

CSS中的继承（inheritance）是指只定义一次就能将同一样式赋予多个元素的能力。设想一下，若是没有了这种能力，对于每一种格式，都需要逐一将网页上的元素和CSS定义中的样式对应起来。天啊，这真是个脱离现实、无法操作的想法！

事实上，CSS还能把某一个样式赋予一类或者一组有着相同标准的元素。例如一个针对h3的定义会把此种样式赋予页面上所有的h3元素（图6-1-1）：

图6-1-1 页面上的h3元素使用红色

h3 {

　color: red;

}

这样，页面上所有的h3元素都会呈现为红色，是不是很简单呢？但是如何在覆盖某一些h3元素样式的同时又不影响到其他的h3元素呢？其实，我们只要编写一个额外的Class（图6-1-2）即可：

图6-1-2 “archires”这个class中的h3元素使用绿色，但所有其他h3元素仍是红色

h3 {

　color: red;

}

h3.archives {

　color: green;

}

前面代码中的第一条规则会让所有h3元素显示成红色，而第二条规则会重写第一条规则，把该规则中的样式应用到Class为archives的那些h3元素上。

Tip

更多的关于特殊性和继承的信息可以在“CSS spec”中“Assigning pro perty values, Cascading, and Inheritance”（www.w3.org/TR/REC-CSS2/cascade.html）一章中查询。

目前为止还没有遇到什么特别复杂的情况。接下来让我们尝试一个更有技巧性的例子：在下面的样式定义中，由#linkList标出的h3元素将会怎样显示呢（图6-1-3）？

图6-1-3 样式规则的组合产生了字体为0.8em的Verdana的绿色标题

h3 {

　font: 1em Verdana, sans-serif;

　color: red;

}

h3.archives {

　color: green;

}

linkList h3 {

　font-size: 0.8em;

}

答案是它们将显示为红色，字体为0.8em的Verdana（或备用的sans-serif）。因为最后那条规则中没有覆盖字体设定，所以Verdana字体会从第一条关于h3的样式定义中继承下来，因此发生变化的只有字体的大小。但若是某个h3元素应用了名为archives的Class，那么其颜色将变为绿色。

特殊性

前面的那个例子生动地说明了特殊性的行为——特殊性让最后一个规则比第一条规则有更高的优先权。因为其中定义了额外的Class，让整条规则比第一条更加精确，从而也就有了更高的优先权。

我们知道一个h3元素又不可能同时具有0.8em和1em的字体尺寸，如果CSS中没有特殊性这样的概念存在，那前面例子中的两条规则就必须互相竞争，从而决定究竟该使用哪个字体大小。有了特殊性之后，确定样式的优先顺序就变得非常简单。

尽管特殊性的行为看似简单，可它本身也存在着诸多问题。我们完全可能在不经意之间就造出了一些过于“特殊”的样式规则，若是想要覆盖这些的规则，就不得不通过编写更为“特殊”的规则！

请看下面的这个例子：

body>html #header ul.navigation li.home a {

　color: red;

}

假设需要把:hover状态的链接元素显示成蓝色，那又该怎么做呢？唯一的办法可能就是复制这一长串的选择器，然后在其后加上限定:hover状态的标记：

body>html #header ul.navigation li.home a:hover {

　color: blue;

}

•控制特殊性

只要稍加考虑，我们就能避免写出这类复杂的、过于“特殊”的选择器。简单说来就是让样式规则的定义尽可能地通用化，而只有在迫不得已的特殊情况时再进行特殊化。

例如对于这样一个选择器：

linkList ul li h3 {

　color: red;

}

与下面的声明比较：

linkList h3 {

　color: red;

}

第一段代码中声明了很多额外的选择器：h3元素必须在无序列表（unordered list）以及一系列冗长的标记中，才能确定将其显示为红色。而第二个例子则摒弃了长串的额外约束，仅仅要求h3元素存在于linkList父元素中即可。使用类似的过程，在开始时以通用的方式定义样式，随后再根据需要逐渐特殊化，即可避免生成过于冗长的样式定义。

•调试特殊化行为

调试CSS布局问题的一个诀窍就是：保证特殊化导致的冲突不会影响到想要的显示效果。如果某个样式不起作用，那么首先要检查的就是这个样式本身是否足够明确。一个很有用的检查方法就是，临时使用非常易于分辨的样式属性替代原先的样式属性，这样即可方便地确认选择器是否真正指向了期望中的元素。例如：

linkList h3 {

　border: solid 20px red;

}

如果h3元素没有出现红色边框，我们就要把选择器写得再明确些。但若是正常显示出了边框，那就不是选择器不够明确的问题。这时即可把该临时边框样式改回先前的样式，然后在其他方面查找问题的原因。

•覆盖特殊性

CSS对覆盖样式规则的特殊化行为有着内建的支持，即!important声明。!important声明可以被赋于单个样式属性，从而保证即使样式表中的其他样式的选择器更为明确，该带有!important声明的规则也不会被覆盖。例如：

h3 {

　color: red !important;

}

linkList h3 {

　color: blue;

}

即使上述的第二条规则更加明确地指向了#linkList元素中的h3元素，该元素仍将显示为红色，这正是因为先前的那条规则中的!important声明让CSS忽略了特殊化作用。需要注意的是Windows平台上的IE浏览器并不支持该!important声明，所以不要尝试在IE中使用。

然而在CSS的调试过程中，IE的这个缺陷却成为了一个优点。使用!important声明有选择地输出CSS样式将会为非IE浏览器提供一种强大的过滤方法。例如在前面的那个例子中，h3元素将在Firefox、Opera和Safari等浏览器中显示为红色，而在IE中显示为蓝色。

This is Cereal中大量地使用了级联特性，用来弥补某些浏览器中部分特殊效果的缺失。事实上，Inman对样式做了大量的特殊考虑，甚至当用户使用某些对特效支持不够的浏览器时，将会收到一条“唐突”的消息（图6-1-4）。

图6-1-4 用户在使用IE浏览This is Cereal时将看到的消息

6.1.2 分层

This is Cereal中的所有元素（包括那条将在IE中显示出消息）都使用了绝对定位，除此之外，作者还特地小心设定了层的顺序以避免元素相互覆盖。

CSS中的z-index属性能够有效地控制绝对定位元素的层叠顺序。由于绝对定位元素不属于页面的常规文档流，所以默认的控制层叠方法已经不能满足需要。若是没有了z-index，绝对定位元素将自下而上层叠，因而在HTML中先出现的元素会被堆叠于底部，而后出现的元素会被堆叠于上部。

通过使用z-index，设计师可以以任意的顺序堆叠页面元素。z-index中合法的值是从0开始的任意整数。例如：

linkList h3 {

　position: absolute;

　top: 50px;

　left: 50px;

　z-index: 10;

}

linkList ul {

　position: absolute;

　top: 50px;

　left: 50px;

　z-index: 20;

}

因为h3元素的z-index较低，所以不管其声明在HTML源文件中的何处，在页面中都会显示于ul元素之下。

6.1.3 结合

图形设计师应该很熟悉CSS中的分层——各种图像处理软件中都有类似的概念。而级联的概念则更像是一种程序设计概念，无法映射于设计领域中。但一旦我们牢固掌握了这个概念，即可有效地控制页面元素之间的关系，进而实现优美的页面布局——就像This is Cereal那样。

6.2 Gemination（双子座）

Egor Kloos，设计师

www.csszengarden.com/062

基于同一样式表的两种设计

禅意花园的自由风格让Egor Kloos有机会证明CSS是一种能够实现任何创意的有效工具。Egor对CSS浓厚兴趣让他开始学习，并最终能够娴熟地控制浏览器，从而造就出了Gemination这部用一张样式表表现两种迥异风格的作品。在创作中他也体会到了一些自己的想法——那就是聪明地运用代码可以成就让人惊艳的艺术作品。

6.2.1 MOSe

早在Gemination之前，人们就已经讨论过了通过强化CSS支持而改善页面设计的想法。这个想法本身非常简单：首先发掘出浏览器对特定CSS选择器支持的缺陷，然后基于这些CSS选择器分别为每种支持它的浏览器（包括Mozilla及其衍生的Firefox、Opera和Safari等）编写不同的CSS代码，以实现不同的设计。

MOSe特别关注那些IE不能支持的选择器。其中最常见有子选择器（child selector），邻接选择器（adjacent sibling selector）和属性选择器（attribute selector）等。

1.子选择器

顾名思义，子选择器用来选择给定元素的子元素。它的行为有些类似后代选择器（desendant selector），但是后代选择器却能够选择父元素的任意子孙元素，即便该元素已经嵌套于更深层次的子元素中。

若想编写子选择器，我们可以先写出父元素，然后加上“>”连接器（combinator）（连接器是指那些用来连接选择器的符号），最后添上子元素。例如：

div#content > p {color: orange;}

基于上述CSS代码，所有#content元素的直接子段落元素都将显示为橙色，如图6-2-1所示。

图6-2-1 注意，子选择器只能将样式应用于元素的直接子元素上，而不会应用到所有子孙元素上

2.邻接选择器

邻接选择器用来选择元素的兄弟元素。具体做法是：首先定义第一个元素，然后使用“+”连接器，最后定义邻接元素完成样式规则，例如：

div#warning p + p {color: red;}

Note

术语MOSe是"Mozilla Opera Safari enhancement"的简称。请参考www. mezzoblue.com/archives/2003/06/25/mose。

Note

子选择器只能够选择父元素的直接子元素，而不会选择父元素所含嵌套结构中的更深层的子孙元素。

这条规则会让第一个在#warning区域中的段落元素的所有兄弟段落元素都显示为红色。如将这条规则应用于前面的那段HTML标记中，显示结果将如图6-2-2所示。

图6-2-2 注意，邻接选择器选择了第一个元素的所有兄弟元素

3.属性选择器以及模式匹配

有趣的才刚刚开始！或许因为IE不支持属性选择器的缘故，导致很多朋友都对这个概念不甚了解，这也让很多网页设计师根本没有机会使用这种特性。但不可否认的是，它所提供的选择功能确实非常强大有效。

属性选择器允许我们根据元素所应用的属性来选择特定元素，且更为强大的是，它能仅选择含有某个特定属性值的元素。譬如对于一个特定的URL链接，可以根据元素是否存在href属性来选择此元素，甚至还可以根据此href属性是否为某个特定的值来决定是否选择。

考虑如下CSS样式：

[id] {color: teal;}

[id="warning"] {color: red;}

[href～="http://www.molly.com/"] {text-decoration: none;}

图6-2-3演示了这些选择器是如何依据元素的属性值来更改其显示样式的。

图6-2-3 在支持属性选择器的浏览器中，该选择器的作用结果

Kloos在Gemination中成功地为IE和其他兼容浏览器¹分别定制了两套截然不同的风格。在实现过程中，他主要借助的就是属性选择器。

注释：¹ 指支持前面所述3种特殊选择器的“MOSe”浏览器。——译者注

Note

关于CSS选择器，请参考OPAL Group站点（http://gallery.theopalgroup.com/selectoracle）以获得详细信息。

6.2.2 CSS签名（CSS Sig-6.2.2 natures）

CSS签名正在当前的网站设计领域中变得越来越流行，它的主要思想是为页面的body元素明确指定id，这样即可用这个额外的样式来统一站点风格，定义用户样式表（user style sheets），以及实现多CSS样式文件（multiple CSS files）。

CSS签名的真正益处在于，它允许一些资深的用户能够自行调整站点的风格。例如某个经常访问的站点的使用了9个像素大小、又近乎白色的字体，让人觉得很难分辨。以往浏览者只能发信给站长，建议他修改站点的字体以便阅读。但有了CSS签名之后，用户只需在浏览器中添加一张自定义的样式表，并在其中自行更改字体配置即可达到修改网站样式的目的。

Gemination中就演示了禅意花园中对CSS签名的应用：

<body id="css-zen-garden">

为了优化设计，Kloos改写了带有CSS签名的body元素的样式。若仔细观察Gemination中的CSS样式，将会发现一些并不常见的CSS语法：

body[id=css-zen-garden] a:link { color: #f90; }

body[id=css-zen-garden] a:visited { color: #f90; }

body[id=css-zen-garden] a:hover,

body[id=css-zen-garden] a:active { color: #fff; }

通过上面的这几行语句，Kloos定义了带有禅意花园CSS签名的页面中所有a标签的样式。虽然只是短短数句，却有效地保证了带有签名的body元素的所有子元素都将应用相同的样式属性（图6-2-4）。

Note

MOSe浏览器还支持CSS 3.0中的一些新增的选择器，IE自然仍无法理解。若想了解更多MOSe的示例及应用，请参考www.mezzoblue.com/archives/2003/06/25/mose。

图6-2-4 Gemination中改进后的链接的行为

6.2.3 为IE实现独特的样式

想让IE显示出完全不同的风格也非常简单，只要写出IE能够理解的样式即可。

以下是IE版的CSS样式定义：

a:link　　{ color: #f90; }

a:visited　{ color: #f90; }

a:hover, a:active　　{ color: #fff; }

可以看到，这几行样式定义和先前的定义完全一致，区别仅在于IE能够理解这样的语法，显示效果如图6-2-5所示。

图6-2-5 未改进版本的Gemination中链接的标准行为

6.2.4 改进后的Gemination

改进后Gemination的效果令人称道，其改进过程类似于设计师在Adobe Photoshop中的常用创作方式——首先在背景中使用了重复的图案，然后再在前景部分中添加不同的设计元素。

首先，Kloos为body元素设置了一个重复的背景图案（图6-2-6）

图6-2-6 从squidfingers.com上取得的重复图案构成了Gemination的背景图像

相应的CSS样式：

body[id=css-zen-garden]

{ margin: 100px 0 0 0; padding: 0; text-align: center;

background: transparent url(squidback.gif); }

然后再用#container规则为正文区域应用背景图像（图6-2-7）。

图6-2-7 优化版Gemination中的背景图像

在序言部分，Kloos使用了浅灰色的背景层，透过该背景层还可以隐约看到底层的图片（图6-2-8）。

图6-2-8 应用透明背景，并将图像分层叠加显示的效果

相应的CSS样式：

body[id=css-zen-garden] #preamble{ position:

absolute; top: 30px; left: 20px; display: block; margin:

0; border:

1px dotted #fff; padding: 0; width: 196px; height:

290px; background:

transparent url(blk35.png) repeat; overflow: hidden; }

同样使用该样式的还有正文部分，该背景区域部分还额外添加了一个滚动条。最后，Kloos又用:hover选择器给页面最右侧的导航标签实现了一个非常漂亮的图像翻转效果（图6-2-9）。这种翻转效果只能在支持将:hover应用到任意元素上（IE只能将其应用到链接元素上）的浏览器中正常显示。且可以肯定的是，支持高级MOSe选择器的浏览器都能够正常显示该效果。

对于IE版本的Gemination，使用更多的是传统的CSS设计风格，因此也不没有太多的“特效”值得一提，其中唯一亮点是个幽默的比喻——作品中一语双关地引用了CSS中的盒模型——图中的那个面色惊恐、蜷缩在箱中的女人暗喻了IE 5.x系列浏览器对标准CSS盒模型的歪曲，同样也是一个对IE浏览器拙劣兼容性的有力批评（图6-2-10）。

图6-2-9 使用伪类（pseudo class）选择器:hover实现翻转效果，无需借助任何脚本

图6-2-10 语双关的“盒模型”

6.2.5 能经受住未来考验的6.2.5 设计

在如今的网站设计领域中，人们经常讨论的一个话题就是如何保证作品能够符合未来的变化趋势，也就是如何让今天成功的作品在未来新技术下依旧能完美显示。

当然，Gemination整个的设计理念如同所有基于MOSe的作品一样，都依赖于IE对CSS 2.1规范中选择器的贫乏支持，而这种支持又是各种其他的当代浏览器所已经实现了的。那么，假若某天微软的浏览器支持了所有这些特性呢，这将会对作品产生负面影响吗？——从理论上说不会，如果新版IE支持所有CSS 2.1中的选择器，那它所显示的网页将和Mozilla等浏览器中的完全一致，这反倒实现了我们梦寐以求的目标。当然若这样的假设成为现实的话，也会导致浏览器市场的冲突，所以这样的想法也仅仅是臆测而已。

Gemination的作者Kloos同样坚信设计必须经受未来考验的论调完全是某些人过激的想法，未来的变化实在太多，谁又能有十足的把握呢。不过，无论这些论点谁是谁非，我们目前还是能借助IE对选择器的贫乏支持，创作出Gemination这样独特亮丽的双重¹站点。

注释：¹ 指在同一站点中为Internet浏览器和MOSe浏览器实现两种不同的样式。——译者注

6.3 Bonsai Sky（盆景天空）

Mike Davidson，设计师

www.csszengarden.com/069

用富有创造性的图像和代码突破浏览器的限制

为了将“启蒙、开导”的主题推向一个新的高度， Mike Davidson在他的Bonsai Sky作品中把禅意花园修建在了无涯的天际。他以山石嶙峋的峭壁为页面核心，加上树木的点缀，最终完成了这部具有挑战性的作品。而在这副以图片为主导的作品中，Davidson首先面临的就是如何处理文字和图片的平衡。

考虑到这个问题，Davidson将悬崖置于页面的右上方，再加以淡出的效果，从而和左端的文字天衣无缝地衔接了起来。文字部分则使用了宽大的字符间距，逐渐地把浏览者引向了悬崖深处在挺拔的峭壁上镌刻有各种浏览器的标志。更让人为之惊喜的是，悬崖上竟还有一个登山者俯正瞰着深渊——这个人就是Davidson——深刻掌握了要诀的他已经到达了CSS领域中巅峰。

6.3.1 版本问题

然而Bonsai Sky中的一些吸引人的图片却不能在某些浏览器中正确显示，原因在于Davidson使用了一些特别的CSS功能，而这些功能却并不是所有浏览器都能支持的。因此，不同浏览器的用户将会看到不同的视觉效果。但Davidson并没有因为浏览器的兼容性问题而选择放弃，他灵活地运用了一些CSS技巧，成功地避开了这些浏览器的问题。

1.黑色边框的定位

Bonsai Sky中的黑色边框使用了固定（fixed）定位：

extraDiv2 {

　background-image: url(edge_bottom_black.gif);

　background-repeat: repeat-x;

　position: fixed;

　bottom: 0;

　left: 100%;

　width: 100%;

　height: 20px;

　margin-left: -100%;

}

固定定位让元素能够精确地固定在页面中的某个位置上，即使用户滚动页面，固定定位元素在浏览器可视区域中的位置仍然不会改变。其显示效果就如Bonsai Sky中的黑色边框一样，俨然悬浮于页面之上（图6-3-1～图6-3-3）。

图6-3-1～图6-3-3 Bonsai Sky中不随页面滚动而移动的边框

可固定定位的功能在某些浏览器（尤其是Windows平台上的IE浏览器）中却不能正确地显示——在这些浏览器中绝对定位元素会跟随其他元素移动。不过若是经过了巧妙的设计，该效果不但在支持固定定位的浏览器中能正确显示，在不支持这种功能的浏览器中的效果也能差强人意。

2.黑色边框的处理技巧

不幸的是，若浏览器不支持，却仍坚持使用固定定位会让Bonsai Sky中的边框干扰到正文内容的显示（图6-3-1～图6-3-6）。解决这个问题的方法有很多，比如可以使用多种过滤方法隐藏该边框。但是Davison却并没有简单地这样做，而是找到了一个更加有技巧性的方法——他巧妙地利用了IE浏览器的另一个缺陷，把黑色边框整个移出了画面。

图6-3-4～图6-3-6 滚动时边框将与正文发生重叠

Davison为横向伸展的上下边框设置了100%的左偏移量。如此操作之后，这两条边框将位于浏览器右边框的右侧，很明显此时的边框已经在浏览器的显示区域之外了。接下去要把处于显示区外的边框"拽"回来，所以Davison又为其设置了-100%的左外边距（margin-left）值。

extraDiv2 {

　background-image: url(edge_bottom_black.gif);

　background-repeat: repeat-x;

　position: fixed;

　bottom: 0;

　left: 100%;

　width: 100%;

　height: 20px;

　margin-left: -100%;

}

由于绝大多数支持负外边距的浏览器都能够成功"拽"回边框，所以在这些浏览器中边框的显示不会有任何问题。而对于那些不能支持负外边距的浏览器，自然无法 "拽"回边框，让边框留在画面之外。很幸运的是，有这类缺陷的浏览器又恰好不能正确显示固定布局带来的"悬浮"效果。这样一来，在使用此类浏览器时，原本会被错误显示的边框反而却被很好地隐藏了。

3.佛像

在处理完边框这个棘手的问题之后，Davidson在场景中加入了另一个视觉上的亮点——一尊安坐于悬空石上的金色佛像。有了先前的成功经验， Davidson再次使用了固定布局技术，把佛像精确地定位在页面的右边缘。

由于使用了类似的技巧，在Windows平台上的IE中佛像的图片也不会出现。因此，Davidson大胆地决定再使用一种IE不支持的效果——透明PNG¹图像。

注释：¹ PNG格式图片支持alpha通道，可以显示多层级的半透明效果，但是Windows平台上的IE 6.0浏览器尚不能支持。——译者注

如果读者仔细观察，可以发现在悬空石的背景上带有隐约的阴影效果（图6-3-7）。由于有了这层阴影效果的存在，滚动页面时悬空石在视觉上不会混杂于背景的山峦之中，这样一来石像的立体效果就显得格外明显。

图6-3-7 PNG透明效果——悬空石和佛像后的阴影

这种简单而细微的效果在只支持简单透明度的GIF图像²中是无法良好表现的，而在那些不支持PNG图片的浏览器中则根本完全不能呈现。

注释：² GIF图像只支持1位的透明效果，也就是说GIF中的一个像素仅仅存在完全透明和完全不透明两种状态，而PNG图像对透明的支持是多级的，能够很好地显示半透明的过渡效果。——译者注

虽然悬空石和金色佛像能为整个画面添加了不少亮色，Davidson却觉得作品的"启蒙、开导"主题已经足够完美了，所以他决定只让那些对CSS充分支持的浏览器显示悬空石的效果。因此他又使用了和边框效果相同的方法为悬空石设置了负外边距，这样在Windows平台上的IE这类不支持PNG高级透明的浏览器中，石像同样不会出现。

尽管使用了各种技巧，但原作中想要融入的高级效果仍旧不能在Windows平台上的IE浏览器中呈现，所以Davidson还得努力保证作品的剩余部分也具有较高的品质。当然，若想要得到最好的显示效果，总归需要在支持固定布局和PNG高级透明的浏览器中欣赏。

4.透明的边栏

在成功地完成了文字和悬崖图片后，Davidson再次陷入了窘境：如何布置"select a design"、"archives"和"resources"这3张列表呢？难道还要像前面对图片的处理那样把它们隐藏起来？

或许最直接的解决办法莫过于把3张列表以透明方式叠加到背景图片上了，但是这次却没法再借助PNG的透明支持了，因为在Windows平台上的IE中也必须显示出这些列表。Davidson想到了一个设计师中流传已久的诀窍——使用"半"透明的GIF图片重叠于背景之上，若是设计巧妙的话也能够不错地骗过浏览者的眼睛。

半透明GIF的工作原理类似于一个国际象棋棋盘，其中黑色的不透明部分和透明部分交错排列。若平铺在一个较大的平面上，远远看去即可模拟出50%透明的效果（图6-3-8），这类似于喷墨打印机使用稀疏的小黑点进行仿色的原理。

图6-3-8 放大后的GIF图案类似于一个棋盘，在实际应用中能很好地模拟50%的半透明效果

不过屏幕上像素的尺寸比最差的打印机所能绘出的黑点还要大不少，所以稍微留神即可看出这个点阵效果。好在尽管仿真度不高，在该作品中使用还是绰绰有余（图6-3-9）。事实上Davidson把这种棋盘效果定义成了作品中的一个常用模式，正文部分的标题上也都装饰有类似的图案，让整部作品的风格更加趋于协调统一。

图6-3-9 图6-3-8中GIF图像与背景重叠后的效果

5.特殊技巧

发现固定布局效果的浏览者几乎都会花额外的时间滚动页面，来测试能否正确显示。这或许是浏览者的一种本能——一旦看到了那座浮动的佛像，他们都会迫不及待地把页面翻滚到底部。

作为对他们的奖励，此时浏览者可以看到悬崖上雕刻的各种浏览器的徽标，以及徽标上的一些CSS代码（图6-3-10）。

这些额外的图像可以说是一个新的尝试。很多站点设计师都偏重页面的顶部——由于这个位置最容易被浏览者注意，设计师们也理所当然地把复杂的设计元素都集中在此处。但若是偶尔打破陈规，将重要的元素置于非常规的位置，并由此激发浏览者去寻找它们，也不失为一种推陈出新的好办法。

6.3.2 评论

若某个作品中使用了过多的高级CSS效果，而多数浏览者又无法用主流浏览器欣赏到的话，那作品的定位未免有些曲高和寡。

所以一个很重要的设计原则就是，在尝试新技术时仍有选择地略微降低标准，以期仍能为那些不支持此类高级效果的浏览器提供足可接受的备用方案。

设计师们在挑战CSS效果的极限时的确需要一些运气，好在浏览器兼容性导致的问题也不是不可避免。只要足够谨慎和细致，就能在带给大部分用户新奇体验的同时，也不让小部分人失望而归。

图6-3-10 雕刻于峭壁上的浏览器标志

6.4 Tulipe（郁金香）

Eric Shepherd，设计师

www.csszengarden.com/088

为IE提供了后备选项的CSS下拉菜单

一枝凋落了一叶花瓣的郁金香随风飘曳，勾起了Eric Shepherd的无限遐思。在摄下了这副图景后，Eric Shepherd大胆使用了通贯全页的横向布局，缀以页面上端的下拉菜单，再配用唯美的色调，最终创作出了这部引人入胜的作品——Tulipe。

尽管在数年前仅依靠CSS创建下拉菜单的方法已经出现于Eric Meyer的站点CSS/Edge上（http://m-eyerweb.com/eric/css/edge/menus/demo.html），人们还是需要一些额外的技巧让IE也能正确显示出这种效果。

这些技巧中最棘手的问题就是，如何在创造理想设计的同时，也为IE提供一个仍可正常使用页面功能的备份设计。Shepherd在该作品中巧妙地解决了这个问题。

6.4.1 探究纯粹的CSS菜单

创建纯CSS菜单是件让人快乐的事。它不但容易操作，还能使用大量的样式和定位特性。而最让人高兴的是：根本不用再书写任何JavaScript脚本（图6-4-1）！

图6-4-1 Tulipe中的下拉菜单

在下面的代码中，可以看到本作品中下拉表的基本实现。这个实现是最终显示的一个简化版本。仔细观察可以发现，代码并不像Zen Garden中众多div标签嵌套那么复杂，只是一个div标签和一些表示了实际菜单的链接而已。

<div id="menu">

<h3>Select a Design:</h3>

<ul>

<li><a href="#">Gardenias de Perfume</a> by <a

href="#">Armando

Sosa</a></li>

<li><a href="#">Pneuma</a> by <a href="#">Adam

Polselli</a></li>

<li><a href="#">Birdhouse</a> by <a href="#">Justin

Vilela</a></li>

<li><a href="#">Defiance</a> by <a href="#">James

Ehly</a></li>

<li><a href="#">Mediterranean</a> by <a href="#">John

Whittet</a></li>

<li><a href="#">Austrian&#8217;s Dark Side</a> by <a

href="#">Rene

Grassegger</a></li>

<li><a href="#">Invitation</a> by <a href="#">Brad

Daily</a></li>

<li><a href="#">Odyssey</a> by <a href="#">Terrence

Conley</a></li>

</ul>

</div>

可以看到，去除样式后这个片断在浏览器（包括IE）中仅仅显示为一个无序列表（图6-4-2）。

图6-4-2 未应用任何样式的片断将显示为一个无序列表

虽然这样一段文字在使用起来没什么问题，但它还不够漂亮——添加一些CSS效果就可以解决这个问题。下面的CSS代码指定了body元素和链接元素的样式。

body {

　font-family: tahoma, arial, helvetica, sans-serif;

　font-size: small;

　background-color: #F2F4EE;

}

a:link, a:visited {

　font-weight: bold;

　text-decoration: none;

　color: #998;

}

a:hover {

　color: #887;

　text decoration: underline;

}

在图6-4-3中可以看到列表应用了相应的样式。值得庆幸的是，即使在IE中，当鼠标悬停于链接上方时，下划线也能正常显示。

图6-4-3 加入基本样式（包括在IE中也支持的鼠标悬停样式）后的显示效果

目前为止，一切都非常好。不过下面的这个步骤却有些玄机：现在需要把ul元素的display属性设置成none。这可以在鼠标未悬停于ul元素上方时隐藏掉该元素。

ul {

　display: none;

}

在加入这个样式后，列表会在所有支持CSS的浏览器中隐藏起来。要使列表在鼠标移过时重新显现，我们需要再添加一个伪类:hover，然后在其中将display属性设为none以外的某个值。请参考下面的代码（注意其中对ul和li项应用了一些额外的样式）：

menu:hover ul {

　display: block;

　border: 1px solid #776;

　margin: 5px;

　padding: 5px;

　width: 175px;

　list-style-type: none;

}

li {

　margin: 0;

　padding: 3px;

　border-bottom: 1px solid #887;

}

在添加上述样式后，用任意一种能够全面支持:hover伪类的浏览器打开页面，会发现在鼠标悬于列表上方时，列表会从隐藏转为显现。接下来把列表独立出来并继续添加一些额外的样式，Tulipe的下拉菜单就逐渐成型了（图6-4-4）。不过在IE中它一直处于隐藏状态，用户所能见到的始终只是一个标题（图6-4-5）。

图6-4-4 在鼠标悬停时，Mozilla或者Opera之类的高级浏览器能够显示出隐藏的列表

图6-4-5 因为IE只对链接元素支持:hover伪类，所以当鼠标悬停于其上时，不会显示出该列表

6.4.2 Tulipe中的下拉菜单

如果仔细研究过Tulipe运用的渐进改善的创作模式，就会认同前面曾说过的那个前提——HTML列表打造了菜单结构，而一系列的样式设定了鼠标悬停时的行为，并逐渐美化了作品。但又因为IE在整个过程中所表现出的问题， Shepherd必须周密地考虑作品中CSS的运用。不但要能在良好支持CSS的浏览器中展示出光彩夺目的复杂效果，也要在IE中将其隐藏起来，同时使用某种较为简单的样式替代。这样才既能弥补了IE的不足，又不至于破坏整体的设计。

1.以其人之道还治其人之身

至此，我们已经发现了IE浏览器的两个重要的问题。第一是它只对链接提供:hover伪类支持，这也是无法用:hover实现下拉菜单效果的罪魁祸首。第二是它不支持某些选择器，例如子选择器等——我们接下来正是要利用这个缺陷在IE中隐藏该样式：

linkList2 ul > li

另外一个IE不支持的伪类是:first-child：

linkList2 #lselect li > a:first-child

这条规则在CSS中的解释是：linkList2的子孙节点中所有id为lselect的元素所含的任意一个li元素下的第一个子链接元素应用样式。因为IE不支持这些伪类，所以这条规则在该浏览器中会被忽略。

对上述选择器和伪类缺乏应有的支持可以说是让众多IE下的开发人员最为头疼的地方。不过这种缺失也带来了好的方面，那就是可以利用它隐藏不想要的样式。

2.将样式分开

考虑到前面所说的问题，我们在使用绚丽的下拉菜单的同时，也必须要为IE创建备份样式，例如：

linkList2 {

　position: absolute;

　top: 65px;

　left: 750px;

z-index: 2000;

　height: 150px;

　margin: 0;

　padding: 0;

　width: 1350px;

}

linkList2 a {

　border: 0;

}

这仅仅是Tulipe的CSS文件中定义的众多样式中的一小部分。在真正的CSS文件撰写过程中，总是先定义IE所支持的样式，然后在加入其他高级浏览器所特别支持的CSS样式，因为存在子选择器，这些样式也很容易区分：

linkList2 #lselect li > a:first-child {

　display: block;

}

html > body #linkList2 li {

　margin: 0;

　padding: 3px;

　border-bottom: 1px solid #887;

}

区分开样式后，Shepherd即可着手在IE中实现可用的菜单了（图6-4-6）。虽然这些菜单不像另一个版本中的那么漂亮，但是它们导航的功能依然完全可用，且足够清晰。

图6-4-6 IE版的菜单。虽然没有下拉菜单那么漂亮，但足够使用

3.更高级的CSS

在Tulipe的菜单中，还有一项值得注意的CSS特性：

linkList2 ul > li:last-child

这里已不仅仅是个普通的子选择器，它还使用了一个定义于CSS 3标准中的伪类:last-child。与:first-child能够选择菜单中的第一个子链接类似，:last-child可以选择菜单中最后一个子链接，从而将其设置为和第一个子链接不同的样式。由于部分浏览器已经实现了这些尚未确定的CSS 3中的新特性，Eric才有机会用它们实现这样让人满意的完美效果。

但在本书编写时，CSS 3推荐标准尚未完成，而且正如前面所见的那样，即使是现在已经完成了的CSS标准，在某些浏览器中的支持仍旧不敢恭维。那么有没有在IE中同样管用的办法呢？回答自然是有，不过这些方法的效果究竟如何，还需要自己去评判。

第一种方法是使用JavaScript创建动态菜单。从本质上说，使用脚本没有任何过错，但是使用CSS实现却不需要考虑诸如客户端JavaScript引擎是否打开，或者CSS兼容性等这样那样的问题，所以CSS的实现方式更为简洁。

另一种方法是使用所谓的.htc文件。这种文件只有IE才能支持。在.htc中撰写的脚本能够改变浏览器的特性。使用这种方法最有名的案例是Dean Edward的“IE7”项目，该项目提供了一系列的.htc文件，用来修正了IE中的部分缺陷并且提供了对高级CSS效果的支持。另外一个关于:hover的修正方法是“whatever:hover”技术，它的实现也是基于.htc文件。

在使用这些方法之前需要牢记这些方法都不受官方支持，所以在使用时一定要慎重。人们一直对是否使用此类方法存有争议。很明显，对标准的支持应该是浏览器内建的而不是外加的，一些纯粹主义者甚至认为所有使用hack、过滤规则的方式都是对标准的亵渎。

Tip

若想了解更多关于Dean Edward的IE 7项目的内容，请访问http://dean. edwards.name/IE7/。关于对:hover技术的讨论，请访问www.xs4all.nl/～peterned/cs-shover.html。

6.4.3 从作品中学到的

从起初的灵感乍现，到使用复杂的方法实现CSS下拉菜单（虽然在符合标准的浏览器中这非常容易），再到使用让人困惑的过滤规则等间接方法， Tulipe确实称得上智慧而且负责地使用CSS的典范之作。虽然所有的CSS设计者都渴望无需旁敲侧击即可实现特效功能的那天早日到来，但渐进的设计和后向兼容性的考虑却让我们又不得不必需掌握这些方法。不过在Tulipe的浏览者眼中，无论使用何种浏览器，都能够看到一部足够唯美且完整的作品。

6.5 door to my garden（花园之门）

Patrick H. Lauke，设计师

www.csszengarden.com/041

用简单的CSS实现完善、震撼的视觉效果

作为一个摄影爱好者，Patrick Lauke喜欢亲自拍摄照片，而不是去借鉴图片库中的资源。他的禅意花园作品door to my garden自然也不例外。在该作品中，Lauke用他拍摄的一张让人沉醉的照片作为了页面的主要背景。

在酷爱摄影的同时，Lauke也痴迷于灵感设计（incidental design），这种设计的方式又被称为拾得艺术（found art），讲求在创作中大量使用偶然发现的设计元素。在本作品中Lauke就细致地运用了他在工作地附近拍摄的锈蚀铁器。借助于他高超的摄影技巧，这些偶得的元素极大增强了作品陈旧斑驳的怀旧风格。

6.5.1 灵巧地应用背景

虽然图片和摄影的运用对营造阴暗寒冷的作品气氛有着不可忽视的作用，但是体现效果的本身却更加依赖于背景图像的制作。当然，禅意花园中的很多作品都可以体现出这一点，但door to my garden却更为清晰地向读者展示了背景定位、滚动行为所能创造出的与众不同的效果。

在本作中，作品主体效果的创制方法非常简单，Lauke仅仅是在body元素中加入了固定背景属性（图6-5-1）而已，且这种方式在多种浏览器下都能正常显示。然后将正文区域布置在页面的右侧，让其与背景图像重叠，这样即可让正文在固定背景上滚动。在CSS设计中处理背景是设计师的一项必备需求，掌握背景样式的属性和它们相应的效果对实现作品的设计风格来讲至关重要。

图6-5-1 body元素的背景图像

1. CSS中的背景属性

加上background的简写形式，CSS中的背景属性一共有6种。表6-5-1列出了这些属性的功用。

表6-5-1 CSS中的背景属性

2.添加背景图片和背景颜色

若想使用CSS添加背景图片，我们要将background-image属性设置为指向图片位置的URL，这个URL可以是本地服务器上的某个相对位置，也可以是指向另一个服务器的绝对路径：

background-image: url(images/my.jpg);

而若是想设定背景颜色，则需要将background-color属性设置为颜色值（十六进制颜色值、十六进制颜色缩写、RGB颜色或者颜色名称均可）。

background-color: black;

也可以使用background缩略属性同时定义背景颜色、背景图像以及其他属性：

body {

　background: #000 url(background.png)

　-30px 0px no-repeat fixed;

}

door to my garden中另外一个常用的效果是将background-color设置为transparent，以便让元素背景变成透明。例如该作品中链接就应用了透明背景：

a {

　color: #eee;

　background: transparent;

　text-decoration: none;

}

3.背景的黏附（Attaching）属性

background-attachment属性可以接受scroll和fixed两个值，浏览器的默认值是scroll，也就是说背景图像会跟随页面一起滚动。若是设定为fixed，背景将不会随页面内容一起滚动（图6-5-2）。Lauke设置的作为页面背景的图像就是一个例子：

图6-5-2 由于背景图片的位置在页面滚动时保持固定，正文底部和背景图片即可同时显示于屏幕上

body {

　background: #000 url(background.png) -30px 0px no-

　repeat fixed;

}

4.背景的定位属性

background-position属性定义了背景图片在父元素中的相对位置，它可以接受两个百分比、长度或关键字值，分别用来表示两个坐标值中的一个。如果同时设置了两个，那么第一个值表示水平位置，第二个值表示垂直位置：

Note

许多设计师会同时定义背景色和背景图片。背景色由浏览器直接控制，会和CSS中的其他定义一起快速显示于页面上，而背景图片需要相对较长的时间加载。因此，同时定义二者有助于让页面的加载过程变得更为平滑。

background-position: 10px 20px;

如果只设定了一个值，那么它将表示水平位置，而垂直位置将取默认的50%或者居中。上面的声明将把图片置于水平10像素、垂直20像素的位置上。可以看到，Lauke的作品中均使用了长度值：

body {

　background: #000 url(background.png) -30px 0px no-

　repeat fixed;

}

其中有一条很有意思的设置，将水平位置定为-30px。负值在背景定位中是合法的，它的效果和设定正值相反，会将图片向左平移30个像素。而垂直方向的0像素设定也会让背景图像恰好位于body元素的上边界。图6-5-3和图6-5-4比较了设定负值后的变化，图6-5-3是正常情况下浏览器中显示的样式，图6-5-4是水平位置为负值时的样式。

图6-5-3 通常的图片位置

图6-5-4 设定了负值background-position后的背景位置

5.控制背景平铺

单纯使用HTML无法控制背景重复——默认情况下浏览器会把背景图片同时在x轴和y轴上平铺。所幸CSS的background-repeat属性给了我们更多选项。

background-repeat属性可以设定为以下几个值：repeat-x使背景仅在x轴上平铺；repeat-y使背景仅在y轴上平铺；no-repeat使背景不平铺；repeat使背景同时在x、y轴上平铺，这也是该属性的默认值。Lauke在background属性中使用了no-repeat：

body {

　background: #000 url(background.png) -30px 0px

　no-repeat fixed;

}

这样的设定保证了图片不会被平铺。虽然书中并没有逐一列出其他部分的代码，但door to my garden中所有的背景均没有平铺设定。

Tip

如果某个值为0，就不需要再额外给出单位。这一点是用于各种CSS属性。所以正文中的声明同样也可以合法地写为background:#000url(background.png) -30px 0 no-repeat fixed;

6.5.2 布局选项

为了创建一个300像素宽，位于显示区左侧470像素的#container元素， Lauke给body元素设置了470像素的内边距（padding）：

body {

　padding: 0 0 0 470px;

}

记住内边距和外边距属性在缩略写法中的顺序是top、right、bottom、left。在这个例子中除了left值之外，所有其他值都设为0（同样值得注意的是，这里Lauke也省去了其长度单位），为页面左边留出了470像素宽的一块空白（图6-5-5）。

图6-5-5 使用内边距让container元素和浏览器左侧之间保持470像素的间距

而#container元素本身仅仅应用了背景图片、颜色和宽度3个属性：

container {

　background: #000 url(bottom_corner.png) no-repeat

　bottom right;

　color: inherit;

　width: 300px;

}

若安装了Mozilla或者Firefox中的Web Developer extension插件，可以打开其中的“outline block element”选项，这样即可看到每个元素的Class和ID等信息。图6-5-6就演示了#container区域在应用样式后的效果。

图6-5-6 用Web Developer extension插件可以看到#container区域的样式

6.5.3 额外的样式效果

door to my garden使用的CSS样式普遍非常简单易懂，没有什么hack，所以真正具有挑战性的就是用花瓣衬托菜单（图6-5-7）。在不同浏览器中，该菜单存在着较大的兼容问题。

就菜单本身而言，其实并没有多大挑战性，Lauke为#linkList创建了一个容器，并且为其中的每个元素设置了不同的样式以构成导航条的框架。较为复杂的部分在于，如何使花的图像浮于框架的外侧并且能够透过其边缘看到下面的背景。

linkList2>#lselect {

　background: url(flower.png) no-repeat top left;

　margin-left: -65px;

　padding-left: 80px;

　min-height: 150px;

}

由于使用了子选择器，所以这段CSS只能在Mozilla、Opera和Safari等浏览器中正常工作。为了能在IE中也显示出相应的信息，Lauke使用了禅意花园HTML中的额外div元素来绝对定位花的图像：

extraDiv1 {

　position: absolute;

　top: 165px;

　left: 142px;

　background: url('flower.png') no-repeat top left;

　width: 115px;

　height: 150px;

}

这样一来，完全兼容CSS的浏览器将同时应用两种样式。所以Lauke还必须在这些浏览器中隐藏上述#extraDiv1的效果，因为#linkList2>lselect样式已经足够用了：

body>#extraDiv1 {

　display: none;

}

大功告成！现在花和菜单在任何一种现代浏览器中都能正确显示了。

Tip

Web Developer extension插件可以在chrispederick.com （www.chrispederick.com/work/firefox/web developer/index.php）网站中免费下载。

6.5.4 完美的设计，简单6.5.4 的CSS

很明显door to my garden的漂亮外观得益于其中独特的图片、作者的摄影技巧以及精心的元素排布。第一眼见到这部作品时，或许你会觉得非常复杂，但其实大部分效果的CSS实现都非常简单，在兼容性方面使用的技巧仅有一处而已。

图6-5-7 菜单和花的图片，我们在其周围添加了边框，以便读者识别

6.6 Elastic Lawn（绿草如茵）

Patrick Griffiths，设计师

www.csszengarden.com/063

处理视觉效果问题有时并非那么简单

一个简单的设计日程引发了Patrick Griffiths的灵感，他开始尝试一种新的布局方法并用这种方法来约束图形元素。很快，Griffiths就发现这种从底向上的布局技术会导致设计过程乱作一团。于是他很快聪明地放弃了这个想法，并拿起铅笔和速写本勾画出了页面草图，随后开始用CSS实现，最后加入了图像元素——这正是Elastic Lawn的诞生过程。

设计CSS布局的过程并没有什么“金科玉律”。有些设计师喜欢先在Macromedia Fireworks之类的图像设计软件中绘出草图，然后再将其转化为代码。而另外一些设计师则喜欢双管齐下，同时处理代码和图像。考虑到市面上为数众多的代码和图像编辑软件，无论使用何种方式，总会发现有无数种方式达到最终的效果。

6.6.1 固定还是可变？

在建站时，设计师通常会面临两种布局上的选择：一种是给内容区域设置固定的像素宽度，把页面限制在这个宽度以内；另一种则是让内容区域不受限制地填满整个浏览器的显示区域。

这两种技术都有众多的别名：前者有被称为定宽（fixed width）布局、受限（constrained）布局或冰块布局（ice layout）；而后者则被称为变宽（variable width）布局、全屏（full screen）布局或流式布局（liquid layout）。无论称呼为什么，这两者都是现代网页设计中最基本的两种布局方式。

当然，这两者各有优劣。而网页设计师更为困惑的问题是，网站的画布尺寸不是固定的。在设计印刷品时，我们总可以确定最终成品的比例和尺寸。而在浏览网页时，访问者完全可以使用640×480像素的非最大化浏览器窗口，或者一个2048×1536像素的超大型全屏窗口，或者介于其间的任何尺寸的窗口。

1.固定宽度

固定宽度布局将画布的宽度限制于某个固定的像素大小之内。在需要精确控制图片这类宽度大小不会变动的元素时，该方法特别有效。但是由于限定宽度后作品的尺寸往往会超过较小窗口的可显示范围（图6-6-1和图6-6-2），这就意味着用户将看到水平滚动条。而对于那些使用大尺寸浏览器的用户，却反而会看到很大的一片空白。

图6-6-1 Kevin Davis的固定尺寸站点在1024×768的屏幕上显示得非常不错

图6-6-2 但在较小的窗口中却会出现水平滚动条

2.可变宽度

可变宽度的布局在任何分辨率的屏幕下都能填满整个窗口（图6-6-3和图6-6-4）。理论上说这是一个解决窗口尺寸问题的好办法，但要在600像素宽和200像素宽的窗口间做平衡也是一件很困难的事情。所以妥协的结果经常是使用最小公分母（lowest common denominator）原则，即让页面在大窗口中自动扩展，但并不在多余的空白区域填入其他视觉元素。因为纯CSS的方式局限性太大，Cameron Adams曾试图用JavaScript更好来解决这个问题（www.themainblue.com/experiment/Resolution-Layout/）。

图6-6-3 由于使用了变宽布局，Digital Web Magazine（www.digital-web.com）在1024×768的分辨率下显示良好

图6-6-4 在小分辨率下也有不错的质量，注意页面底部没有出现水平滚动条

不仅如此，流式布局在处理比例时存在着更大的问题，在宽度发生变化时这种方法甚至将变得完全不可靠。例如若一块色彩区域和一张图片的原始比例是1.6∶1的话，在窗口宽度增大后则可能变为2∶1、3∶1甚至更大。原因就在于图片大小是不会自动缩放的，这一点我们必须牢记，且在流式布局中也需要尽量避免过于精确的比例关系。

6.6.2 弹性设计

前面所说的所有内容都是关于布局技术，是不是会怀疑本节接下来还会不会有特殊效果的介绍？我们可以很肯定的说，是的！Elastic Lawn中就展示了这样一种既非固定宽度亦非可变宽度，而是结合了两者优点的方案，即所谓的“弹性设计”。

而Griffiths的结合技术也存在其合乎逻辑的理论基础。我们知道文字的尺寸在使用%或者em这样的相对单位时可以改变大小。那如果块级元素也使用此类单位设定大小时，它们是不是也应该能改变大小呢？这正是弹性设计的理论根据。

下面的代码展示了Elasitc Lawn中使用的相对单位。宽度、内边距、外边距以及其他的度量单位都使用了em而不是px，这样就让它们能随字体大小的变化而相应地改变。图6-6-5～图6-6-7显示了在改变浏览器字体尺寸时页面比例的变化。

图6-6-5 小号字体下，主体部分会显得较小

图6-6-6 略大的字体下，主体部分会变得更宽

图6-6-7 更大的字体下，黄色标题的外边距也会增大

body {

　padding: 0 0 6em 0;

}

container {

　width: 48em;

}

preamble, #supportingText {

width: 32em;

　margin-left: 16em;

}

Note

比例（ratio）指两个对象的相对大小。1.6:1的比例意味着若第一个对象的宽度为1.6英尺，那么第二个对象的宽度将为1英尺。

Note

Griffiths在2004年1月的A List Apart电子期刊上撰写了一篇文章，其中阐释他的"弹性设计"技术。

看上去是不是很简单呢？不过是不是各种宽度和长度属性都能够应用同样的方法呢？并不完全正确。因为图像的尺寸是固定的，它们不会随着字符大小的改变而改变。所以要彻底地应用弹性设计还需要更多的考虑。

这就需要提到两个能将图像加入到弹性设计中的方法，其中第一个方法用到了重复背景，而另一个则和图像裁剪有关。

1.图像重复

默认情况下用CSS设置的背景图片会在整个元素的横向和纵向平铺。多数情况下关闭这种平铺是有益的。但是弹性设计却需要借助于平铺的实现，因为无论元素本身有多大，应用了平铺效果的背景总会重复并且填满元素区域，而不是在图片结束后就戛然而止。

Elastic Lawn用绿色的草地背景填满了整个body元素。#linkList2， #preamble，#supportingText元素则使用了这个草地背景的变体（图6-6-8）。这些图片被透明的禅意花园正文与链接栏所覆盖，最终成就了那怡人的阴影和透视效果。

图6-6-8 Elastic Lawn中的草地图片。亮绿色用作body元素的背景，褐色用于工具条，深绿色用于正文部分

如果仅仅使用默认的方形盒子来承载图像，那自然极为简单。但是Griffiths却特意使用了圆角的图片，这样也便于在改变字体大小时反映出其与众不同的特殊效果。

不过还有一个问题，那就是并非所有的图像都是可以平铺的，除非是那些四条边缘都有相同色彩的图像，否则在图像衔接的边缘会出现明显的条缝。图6-6-9就显示了未经处理过的草地图片，从中可以明显地看到水平和垂直结合部分的线条痕迹。

图6-6-9 未经处理的图片在平铺时会有明显的缝隙

要解决这个问题，只要将图像在Adobe Photoshop中做一些前期处理即可。使用Offset滤镜（Filter>Other>Offset）将一边的图像推至另一边，即可让其边缘完美地融合起来。

图6-6-10～图6-6-12展示了如何使用采样像素覆盖这条缝隙，图6-6-13显示了最后的效果。至于是用橡皮图章（Clone Stamp）还是用修复笔刷（Healing Brush），则完全取决于习惯，只要能将无缝区域的像素覆盖到缝隙上即可。具体的图像制作技术可以参见第4章，也可以自由选择修改或是重绘这些图案，抑或是用任何可以达到期望效果的图像调整技术。

图6-6-10 使用Offset滤镜后，仍旧有色相上的差异

图6-6-11 复制周围区域，以消除缝隙

图6-6-12 完成后的结果

图6-6-13 很难再看到明显的缝隙

2.图像裁剪

在Griffiths的“Elastic Design”一文中引用了Haiko Hebig的Blog （www.hebig.org）作为例子（图6-6-14和图6-6-15），其目的是为了说明弹性设计中用到的一个重要的、名为可变裁减（variable cropping）的技术，该技术可以在页面空白的大小变化时自动调整图像显示出来部分的尺寸。

图6-6-14 在Haiko Hebig的Blog中，左侧图像显示的尺寸取决于空白区域的大小。此图是800× 600分辨率下的样子

图6-6-15 同样的图片，在1100×600分辨率下成比例地变宽

要创建弹性的图片元素有两条途径：第一条是为承载这个图像的可变长元素应用overflow:hidden属性；第二条则是为背景元素添加可变长度。例如，下列代码中就定义了一个原始尺寸为600像素的图像，嵌套于div元素中：

<div class="wrapper">

　<img src="skyline.jpg" width="600" height="200"alt="Skyline"/>

</div>

如果这个div元素是用em来标识长度的，则图像的超出部分可以用overflow属性来隐藏：

wrapper {

　width: 10em;

　overflow: hidden;

}

另外一种方式是直接将如下样式赋予div元素：

wrapper {

　width: 10em;

　background: url(skyline.jpg) no-repeat;

}

如果图像本身就可以重复，no-repeat属性也可以被安全地移除，让图片能够在较大的页面上平铺直至填满更大的区域。

3.向前跃进

弹性设计是对网页布局理论的一次积极且引人注目的创新，但正如前面讨论的那样：由于设计元素的比例变化与浏览器窗口大小无关，网页很可能变得比浏览器窗口更大，此时页面就会被裁减并出现滚动条，这都不是我们所希望看到的。当然，max-width属性可能会帮助我们改善这种情况：

container {

　max-width: 700px;

}

但Windows平台上早期的IE 6浏览器却并不支持max-width，现有的宣称能够打破该限制的办法也并不如期待中的那样有效。诸如此类莫名其妙的异常的确在不停地打击着人们在尝试新鲜方法时的信心，但即使如此，这些尝试也仍会不时造就一些成功案例，这当然不是件坏事。

在用新技术推进网站设计的浪潮中，成败都难以预料，网站设计师们需要在其中确定一个平衡点。而作为一个成功的例子，Elastic Lawn无疑向我们展示了勇于尝试带给其他设计师们的有益结果和无限启发。

Tip

Svend Tofte制作了一个非标准的方案，可以有效地修复IE 6不支持max-width的问题（www.svendtofte.com/code/max_width_in_ie）。