.　1.17　在96dpi下常用的font-size值　
　1.18　CSS疑难解答　
　1.19　使样式表规范化　
第2章　HTML设计模式　
　2.1　本章大纲　
　2.2　HTML结构　
　2.3　XHTML　
　2.4　DOCTYPE　
　2.5　头部元素　
　2.6　条件样式表　
　2.7　结构化块状元素　
　2.8　终端块状元素　
　2.9　多目标块状元素　
　2.10　内联元素　
　2.11　类和ID属性　
　2.12　HTML空白　
第3章　CSS选择符与继承　
　3.1　本章大纲　
　3.2　类型、类和ID选择符　
　3.3　定位和群组选择符　
　3.4　属性选择符　
　3.5　伪类元素选择符　
　3.6　伪类选择符　
　3.7　子类选择符　
　3.8　继承　
　3.9　视觉继承　
第4章　盒模型　
　4.1　本章大纲　
　4.2　显示　
　4.3　盒模型　
　4.4　内联盒模型　
　4.5　内联块状盒模型　
　4.6　块状盒模型　
　4.7　表格盒模型　
　4.8　绝对定位盒模型　
　4.9　浮动盒模型　
第5章　盒模型的尺寸　
　5.1　本章大纲　
　5.2　宽度　
　5.3　高度　
　5.4　设定尺寸　
　5.5　包裹　
　5.6　拉伸　
第6章　盒模型的属性　
　6.1　本章大纲　
　6.2　外边距　
　6.3　边框　
　6.4　内边距　
　6.5　背景　
　6.6　溢出　
　6.7　可见性　
　6.8　分页　
第7章　定位模型　
　7.1　本章大纲　
　7.2　定位模型　
　7.3　定位　
　7.4　定位最近的祖先元素　
　7.5　堆叠环境　
　7.6　原子化　
　7.7　静态定位　
　7.8　绝对定位　
　7.9　固定定位　
　7.10　相对定位　
　7.11　浮动和清除　
　7.12　相对浮动　
第8章　定位：缩进、偏移与对齐　
　8.1　本章大纲　
　8.2　缩进　
　8.3　静态元素的偏移　
　8.4　静态表格的偏移或缩进　
　8.5　浮动元素的偏移　
　8.6　绝对元素和固定元素的偏移　
　8.7　相对元素的偏移　
　8.8　静态内联元素的对齐　
　8.9　静态块状元素的对齐与偏移　
　8.10　静态表格的对齐与偏移　
　8.11　绝对元素的对齐与偏移　
　8.12　绝对元素的居中　
　8.13　外部对齐　
第9章　定位：进阶　
　9.1　本章大纲　
　9.2　左对齐　
　9.3　左偏移　
　9.4　右对齐　
　9.5　右偏移　
　9.6　中心对齐　
　9.7　中心偏移　
　9.8　顶端对齐　
　9.9　顶端偏移　
　9.10　底端对齐　
　9.11　底端偏移　
　9.12　垂直居中对齐　
　9.13　垂直居中偏移　
第10章　为文本赋予样式　
　10.1　字体　
　10.2　突出　
　10.3　文本装饰　
　10.4　文本阴影　
　10.5　文本替换　
　10.6　隐藏文本　
　10.7　读屏器专用　
第11章　分割内容　
　11.1　分割　
　11.2　块状化　
　11.3　非包裹　
　11.4　保留空白　
　11.5　代码　
　11.6　填充内容　
　11.7　内联空白　
　11.8　内联装饰　
　11.9　断行　
　11.10　内联水平线　
第12章　对齐内容　
　12.1　文本缩进　
　12.2　悬挂缩进　
　12.3　水平对齐的内容　
　12.4　垂直对齐的内容　
　12.5　垂直偏移的内容　
　12.6　下标和上标　
　12.7　嵌套对齐　
　12.8　高级对齐实例　
第13章　块状元素　
　13.1　本章大纲　
　13.2　结构含义　
　13.3　可视结构　
　13.4　区块　
　13.5　列表　
　13.6　背景项目符号　
　13.7　内联化　
　13.8　重叠的外边距　
　13.9　内嵌　
　13.10　水平线　
　13.11　块状间隔　
　13.12　块状间隔移除　
　13.13　左外边距　
　13.14　右外边距　
第14章　图片　
　14.1　本章大纲　
　14.2　图片　
　14.3　图片地图　
　14.4　淡出　
　14.5　半透明　
　14.6　被替换的文本　
　14.7　内容覆盖图片　
　14.8　内容覆盖背景图片　
　14.9　CSS内嵌图片　
　14.10　基础阴影图片　
　14.11　阴影图片　
　14.12　圆角　
　14.13　图片实例　
第15章　表格　
　15.1　本章大纲　
　15.2　表格　
　15.3　行组与列组　
　15.4　表格选择符　
　15.5　分隔的边框　
　15.6　重叠的边框　
　15.7　样式重叠边框　
　15.8　隐藏和删除单元格　
　15.9　删除和隐藏行与列　
　15.10　垂直对齐数据　
　15.11　斑马纹表格　
　15.12　强制转换成表格、行和单元格　
　15.13　表格布局　
第16章　列布局　
　16.1　表格布局模型　
　16.2　使用列布局　
　16.3　本章大纲　
　16.4　列宽度　
　16.5　包裹列　
　16.6　设定尺寸列　
　16.7　内容比例列　
　16.8　尺寸比例列　
　16.9　百分比比例列　
　16.10　反比例列　
　16.11　相等内容尺寸列　
　16.12　等尺寸列　
　16.13　小尺寸列　
　16.14　伸缩列　
　16.15　混合列布局　
第17章　布局　
　17.1　本章大纲　
　17.2　流动布局概述　
　17.3　由外向内盒模型　
　17.4　浮动区块　
　17.5　浮动间隔　
　17.6　流动布局　
　17.7　反向浮动　
　17.8　事件样式　
　17.9　上滚　
　17.10　标签菜单　
　17.11　标签　
　17.12　弹出菜单　
　17.13　按钮　
　17.14　布局链接　
　17.15　布局实例　
第18章　字母下沉　
　18.1　本章大纲　
　18.2　对齐的字母下沉　
　18.3　首字母下沉　
　18.4　悬挂字母下沉　
　18.5　内边距图片字母下沉　
　18.6　浮动字母下沉　
　18.7　浮动图片字母下沉　
　18.8　外边距字母下沉　
　18.9　外边距图片字母下沉　
第19章　强调框和引用　
　19.1　本章大纲　
　19.2　左浮动强调框　
　19.3　右浮动强调框　
　19.4　中心强调框　
　19.5　左外边距强调框　
　19.6　右外边距强调框　
　19.7　块状引用　
　19.8　内联块状引用　
　19.9　内联引用　
第20章　提示框　
　20.1　本章大纲　
　20.2　JavaScript提示框　
　20.3　悬停提示框　
　20.4　弹出的提示框　
　20.5　提示框　
　20.6　内联提示框　
　20.7　悬挂提示框　
　20.8　图片提示框　
　20.9　内嵌提示框　
　20.10　浮动提示框　
　20.11　左外边距提示框　
　20.12　右外边距提示框　
索引

.这就是很多人在使用CSS时疲于应付的原因之一。盒模型虽然看起来简单，但是当使用它的属性，如width时，它只是在某些情况下起作用，有时候产生的效果与期望的不同。例如，属性width为块状盒模型设置内部宽度，但是对于表格盒模型来说，它设置的其实是边框的外宽度，而在内联盒模型中，它完全不起作用。
我把一个复杂的盒模型分成了6种简单的盒模型，并定义了每种盒模型的行为，而不是把各种不同的行为都当作一个非常复杂的盒模型的特例。第4章列出了6种盒模型，它们分别是内联、内联块状、块状、表格、绝对和浮动盒模型。因为你会知道正在使用哪种盒模型，所以也就知道了每一种盒模型的属性将会产生的行为。
而且每种盒模型都定义了它自己的元素排列与定位方式。例如，内联盒模型水平方向排列元素并且跨行包裹元素。块状盒模型垂直方向排列元素。表格盒模型在行和列中排列其元素。浮动盒模型水平方向排列元素，包裹其下方的浮动盒模型并且令内联盒模型和表格盒模型产生偏离。绝对和固定盒模型不排列元素。相反地，它们会脱离排列的元素，并相对于离它们最近的祖先元素进行定位。
盒模型的范围
书中的另一创新是，一种盒模型有3种定义范围的方式：它可以被设定尺寸、包裹或拉伸（见第5章）。每种盒模型都需要通过不同的属性及属性值的结合来设定尺寸、包裹或拉伸。第5章至第9章中不同的设计模式展示了这些工作是如何进行的。这3个术语都不是官方的CSS术语，但是它们都暗含在CSS 2.1规范中，在它的规则中提到了“size”、“shrink-to-fit”和“stretch” （设定尺寸、收缩至适当大小和拉伸）。
确实，设定尺寸、包裹和拉伸不是新的观点。真正的创新之处在于本书明确定义了这3个术语，并且说明了它们是如何成为CSS的基本特征和CSS设计模式的核心的。
盒模型的定位
另外一个创新之处是，关于一种盒模型相对于其容器和兄弟元素有3种定位方式的观点。具体来说，它可以缩进（或外凸）、与其兄弟元素偏移或者与其所在容器对齐和偏移（见第8章）。CSS 2.1规范中讲了很多关于偏移（offsetting）定位元素的内容，也讲了一点关于对齐（aligning）元素的内容（见CSS 2.1规范的第9章），然而它没有讲元素如何缩进（indented），尽管此行为暗含在它的规则之中。
缩进、偏移和对齐是不同的行为。例如，一个缩进的盒模型是被拉伸的，它的外边距收缩其宽度，而一个对齐的盒模型是设定尺寸或被包裹的，它的外边距并不收缩其宽度。对齐和缩进的盒模型都与它们的容器对齐，然而偏移的盒模型可以偏移它们的容器或兄弟元素。
缩进、偏移和对齐不同类型的盒模型需要不同的属性及属性值的组合。第8章和第9章的设计模式显示了这些工作是如何实现的。
列布局
另一个创新是发现、命名和阐述了内建于浏览器中的12种在表中进行列布局（见第16章）的自动技术。
所有的主要浏览器都包括这些强大的列布局特性。它们兼容于各主要的浏览器而且非常可靠。虽然不提倡用表格为页面布局， 但是仍然需要布局表格数据（tabular data），这时就可以利用这些列布局让表格数据变得美观了。
流动布局
创新还包括流动布局（见第17章）。流动布局的概念并不新，但是创建它们的过程通常需要反复摸索。在第17章，我列出了4种简单的设计模式，你可以放心地用它们在所有主要浏览器中创建可预测的复杂流动布局。
这些设计模式，包括由外向内盒模型（Outside-in Box）、浮动区块（Floating Section）、浮动间隔（Float Divider）和流动布局（Fluid Layout），使用浮动和百分比宽度使其成为流动的，但这样做并没有产生使用这些技术通常遇到的问题，比如重叠的容器、浮动元素的错位以及百分比造成的浮动偏移。
流动布局设计模式运用表格的强大功能创建了列布局，却没有使用表格。这些布局优于表格，在显示器较窄时，会自动改变布局的宽度，并根据需要重新布局，把列变成行。
事件样式
还有一个创新是第17章中的事件样式JavaScript框架。这是一个简单的、功能强大的、开源的框架，它动态并交互地为文档赋予样式。它通过最新的最佳实践来保证HTML标记完全不受JavaScript代码的限制并且可访问，而且所有的赋予样式的工作都通过CSS完成。此外，使用这个框架，可以在JavaScript中使用与在CSS中同样的选择符来筛选元素。这大大地简化和统一了为动态HTML文档赋予样式和插入脚本的工作。
书中包含这个框架，展示了如何将JavaScript、CSS和HTML结合在一起，从而交互地使用样式。当然，如果你不想使用JavaScript，可以跳过第17章中的5个JavaScript设计模式和第20章中的两个JavaScript设计模式——剩下的340多种设计模式都没有用到JavaScript。
结合HTML和CSS创建设计模式
本书最后的也是影响最深远的创新是这样一个理念：将常见的HTML元素类型和CSS属性结合起来创建出新的设计模式。第2章定义了4种主要的HTML元素类型（结构化块状元素、终端块状元素、多目标块状元素和内联元素），并且第4章中将它们映射到6种盒模型（内联、内联块状、块状、表格、绝对和浮动）。
每一种设计模式都详细指出了它是如何应用于各种HTML元素类型的。换言之，设计模式不只是当使用特定元素时才有用，它还可以应用于HTML元素的所有等效类型。
例如，第18章中的浮动字母下沉（Floating Drop Cap）设计模式指定了一种使用块状和内联元素的模式，但它并没有指定必须使用哪些块状和内联元素（见代码清单1）。例如，可以用一个段落作为BLOCK元素，用一个span作为INLINE元素（见代码清单2）。或者可以用一个分区作为BLOCK元素，用(strong)作为INLINE元素等。..
在一些特例中，设计模式可能指定一个实际的元素，如(span)。在某个特定元素是最佳的、唯一的或极通用的解决方案时就会如此。即使在这些情况下，也可以将指定的元素换成同类型的另一元素，甚至可以使用另一种类型的元素，只要它能产生有效的XHTML并且你改变了它的盒模型使它兼容。（见第4章中的显示设计模式和盒模型设计模式，还有第11章中的块状化，第13章中的内联，第15章中的强制转换成表格、行和单元格。）
代码清单1　浮动字母下沉设计模式
HTML
(BLOCK class="hanging-indent")
(INLINE class="hanging-dropcap") text (/INLINE)
(/BLOCK)
CSS
*.hanging-indent [ padding-left:+VALUE; text-indent:-VALUE; margin-top:±VALUE; ]
*.hanging-dropcap [ position:relative; top:±VALUE; left:-VALUE; font-size:+SIZE;
line-height:+SIZE; ]
代码清单2　浮动字母下沉实例
HTML
(p class="hanging-indent")
(span class="hanging-dropcap" )H(/span)anging Dropcap.
(/p)
CSS
*.hanging-indent [ padding-left:50px; text-indent:-50px; margin-top:-25px; ]
*.hanging-dropcap [ position:relative; top:0.55em; left:-3px; font-size:60px;
line-height:60px; ]
约定
每一种设计模式都使用以下几种约定。
大写的标记都应当替换成实际的值（可以看到，在代码清单1中的大写标记在代码清单2中都换成了实际的值）。
大写的元素（element）标记应当被替换成你所选的元素。如果元素名称是小写的，就不应当被替换，除非你能确保替换后能产生同样的盒模型。下面列出了几种常用的元素占位符。
ELEMENT代表任何一种元素。
INLINE代表内联元素。
INLINE_TEXT代表包含文本的内联元素，例如(span)、(em)或者(code)。
BLOCK代表块状元素。
TERMINAL_BLOCK代表终端块状元素。
INLINE_BLOCK代表内联块状元素。
HEADING代表(h1)、(h2)、(h3)、(h4)、(h5)和(h6)。
PARENT代表任何可作为有效父元素的元素。
CHILD代表任何可作为有效子元素的元素。
LIST代表任意一种列表元素，包括(ol)、(ul)和(dl)。
LIST_ITEM代表任意一种列表项元素，包括(li)、(dd)和(dt)。
大写的选择符（selector）都应当被替换。如果一个选择符包含小写的文本，则表示该部分选择符不应当被改变，除非你把HTML模式也同时改变了，比如改变了类的名字。下面列出了几个常用的占位符。
SELECTOR []代表所有选择符。
INLINE_SELECTOR []代表用于选择内联元素的选择符。
INLINE_BLOCK_SELECTOR []代表用于选择内联块状元素的选择符。
BLOCK_SELECTOR []代表用于选择块状元素的选择符。
TERMINAL_BLOCK_SELECTOR []代表用于选择终端块状元素的选择符。
SIZED_BLOCK_SELECTOR []代表用于选择设定尺寸的块状元素的选择符。
TABLE_SELECTOR []代表用于选择表格元素的选择符。
CELL_SELECTOR []代表用于选择表格单元格元素的选择符。
PARENT_SELECTOR []代表用于选择设计模式中父元素的选择符。
SIBLING_SELECTOR []代表用于选择设计模式中子元素的选择符。
TYPE []代表用于选择某一种指定元素的选择符，例如h1或span。
*.CLASS []代表通过指定的类名来选择元素的选择符。
#ID []代表通过指定的ID来选择元素的选择符。
大写标记的值（value）都应当被替换。如果值中包含小写的文本，则该部分值是不应当被替换的。下面是常用的值标记。
一些值是字面值，不用被替换，例如0、-9999px、1px、1em、none、absolute、relative和auto。这些值总是小写的。
VALUE代表大于等于零的非负度量值，例如0、10px或2em。
?VALUE代表小于等于零的非正度量值，例如0、-10px或-2em。
±VALUE代表任何度量值。
VALUEem代表一个em度量值。
VALUEpx代表一个px度量值。
VALUE%代表一个百分比度量值。
VALUE_OR_PERCENT代表一个度量值或百分比值。
WIDTH STYLE COLOR代表多属性值，例如border所需要的多属性，我用大写标记来表示每一个值。
url("FILE.EXT")代表一个背景图片，其中你需要把FILE.EXT替换成图片的URL。
CONSTANT代表一个有效的常量值。例如，white-space支持3种常量值：normal、pre和nowrap。为了方便，我通常用大写字母配合下划线（放在两个值之间）列出全部有效的常量值，例如NORMAL_PRE_NOWRAP。
ABSOLUTE_FIXED代表一组常量值，你可以从中任取其一。每个常量值用下划线分隔。position的值的完整列表包括static、relative、absolute和fixed。如果某个设计模式只应用absolute和fixed，那么在模式中会指定position:ABSOLUTE_FIXED。如果它可适用于全部4种值，那么它会指定position:STATIC_RELATIVE_ABSOLUTE _FIXED或者position:CONSTANT。
?(TAB_BOTTOM + EXTRA_BORDER + EXTRA_PADDING)是一个公式的例子，你可以用一个计算好的值来替换它们。公式中的大写标记与设计模式中其他地方出现的标记是一样的。例如，如果指派TAB_BOTTOM为10px，EXTRA_BORDER为10px，EXTRA_PADDING为10px，那么应当用-30px来替换这个公式。
使用本书
可以通过本书来掌握CSS。当通读本书后，你的CSS水平便会提升到一个新的水平，同时，你还能发现蕴藏在每一种设计模式中有价值的闪光点。每一章的组织方式是，后面的内容都是建立在前面内容基础上的。另一方面，因为每一章和每种设计模式都是独立的，所以你可以按照任意顺序逐一阅读来掌握某一个具体的主题或技术。
可以把本书当作一本参考书。本书对所有可用的CSS属性进行了阐述，并用实例展示了它们的使用方法。更重要的是，许多属性当与其他属性进行组合时，其行为会发生变化。每一种设计模式对产生特定结果所需的属性组合进行了区分和讨论。这使得本书不仅仅是一本CSS属性参考书，而且是一本属性组合的参考书。
可以通过本书的实例来学习。既然书中所有的实例都遵循最佳实践，因此，你能够通过钻研它们来学习好的习惯和新的技术。为了使通过实例学习本书更容易，可通过网站www.cssDesign- Patterns.com来查看所有相关的设计模式。这让你轻松地通过例子学会某种CSS属性或功能是如何在不同情境下发挥作用的。
可以把本书当作一本实用方案手册，让它来帮助你创建设计样式或解决难题。设计模式是通过主题来组织的，这样你便能够迅速地找到相关的解决方案。
我还为本书添加了一些功能，当你需要它的时候可以很容易地找到某种解决方案。你可通过目录、索引、各章大纲和设计模式名称来迅速查找属性、模式、问题和解决方案。因为每个实例的截图都位于页面的固定位置，所以你还可以通过快速翻阅本书查看截图来找到解决方案。我发现人工翻阅是一种非常简便、快速和有效的查找解决方案的办法。
配套网站
本书英文原版的配套网站是cssDesignPatterns.com，提供了原书示例的源代码和效果网页 。
本书的结构
第1章到第3章探讨的是CSS和HTML的一些基础知识。
第1章展示了设计模式是如何简化CSS的运用的。这里我演示了如何将简单的设计模式组合成复杂和强大的模式。我也对CSS的语法和层叠排序进行了回顾。另外，我展示了几个图表，它们可令CSS的使用更简单：实用的CSS网站链接列表，单页CSS属性总结；一个4页的实用CSS属性、取值和选择符的列表，根据它们使用地方的不同来排列；度量单位和字体大小的图表；两个样式表实例，展示了在所有浏览器中对元素样式的标准化问题；一个12步的向导，用于解决CSS的有关的各种问题。
第2章介绍了HTML背后的设计模式。在本章，我展示了使用HTML（包括XHTML）的最佳实践。也对可用HTML创建的结构类型进行了探讨，其中包括结构化块状、终端块状、多目标块状和内联。还讲述了如何通过CSS选择符对ID和属性进行选择。
第3章介绍了关于CSS选择符和继承的设计模式。这里我演示了选择符是如何作为HTML和CSS的桥梁的。我列出了关于类型、类、ID、定位、分组、属性、伪元素、伪类和子类选择符的设计模式。我还对CSS的继承进行了讲解。
第4章到第6章对6种盒模型进行了介绍。它们展示了每个HTML元素在不同盒类型（不是在每种盒类型中都能被解析的）中解析方式的不同之处。它们也演示了同一个属性在不同盒模型中所产生的不同结果，并且在每个盒模型中，元素的排列顺序是存在差异的。
第4章介绍了6种盒模型：内联、内联块状、块状、表格、绝对和浮动。
第5章对3种度量盒子的方式进行了探讨：设定尺寸（sized）、包裹（shrinkwrapped）和拉伸（stretched）。
第6章介绍了每种盒模型的属性：外边距（margin）、边框（border）、内边距（padding）、背景（background）、溢出（overflow）、可见性（visibility）、分页（pagebreak）。
第7章到第9章对盒子的排列和定位进行了讲解。
第7章介绍了5种定位模型（静态、绝对、相对、固定和浮动），并将它们与6种盒模型联系起来。
第8章对盒子定位的3种方式进行了介绍：例如，可以对一个盒子缩进、外凸或相对它的兄弟元素进行偏移，或者参照它的容器来对齐与偏移。
第9章对第7、8章的模式进行了组合：这种组合会生成50多种对元素进行定位的设计模式（仅仅针对绝对和固定定位两种方式）。
第10章到第12章对内联盒模型的排列、样式、空白、文本对齐与对象进行了详细的阐述。
第10章介绍了为文本赋予样式的一些属性，其中还包括了隐藏文本的3种设计模式（这几种设计模式对视力残障用户也是可访问的）。
第11章展示了为内联内容添加水平和垂直空白的方法。
第12章讲述了如何对内联内容水平和垂直对齐。
第13章到第14章详细讲解了块状元素和图片的排列方式以及怎样为它们赋予样式。
第13章介绍了块状元素的相关内容，它以探讨块状元素的结构含义和如何可视化地显示此含义开始，涵盖了列表、内联块状元素、重叠的外边距、内嵌块状元素、块状空白和边缘块状元素。
第14章介绍了图片的相关内容，例如图片地图（image map）、半透明图片、用图片替换文本、内嵌图片（sprite）、阴影图片和圆角图片。
第15章和第16章深入地介绍了如何对表格以及单元格赋予样式和布局。
第15章讲的是表格，包括表格选择符、重叠的边框（collapsed border）、隐藏单元格（hiding cell）、垂直对齐单元格内的内容以及把内联和块状元素当作表格来显示。
第16章介绍了12种用于布局表格列的模式，包括自动包裹表格列、为它们设定尺寸、按比例分配等。
第17章对如何用浮动元素创建流动布局进行了详细的介绍。
第17章展示了如何创建浮动布局，它可根据不同的设备、字体、宽度、缩放进行自动调整。其中也介绍了如何用JavaScript创建交互的布局。
第18章至第20章介绍了如何通过组合设计模式为同一个问题创建出多种解决方案。每种方案会满足不同的需求，它们也各有利弊。除了作为实用的解决方案外，它们也展示了如何通过组合模式来解决任何设计上的问题。
第18章介绍了字母下沉。这里我通过7种不同的设计模式组合，对7种字母下沉进行了讲解。
第19章对强调框和引用进行了讲解。本章展示了5种强调框和3种引用。
第20章介绍了提示框。其中我列出了3种可交互的提示框和8种文本提示框（比如，提醒标识）。
下载代码
所有的代码都可到www.cssDesignPatterns.com下载。
你可以通过在www.apress.com上搜索Pro CSS and HTML Design Patterns，到它的页面上去下载相关代码 。在本书的详细介绍页面上有一个实例代码的链接，它是一个ZIP文件。可以用WinZip这样的解压缩软件对其进行解压。
代码的使用
代码用文件夹组织，每章一个文件夹。为了使每章的文件夹便于浏览，文件夹的名字都由章号和章名构成。每章的文件夹中包含的是实例文件夹，分别对应这章的每种设计模式。
所以，你能够很轻易地找到实例，每个实例文件夹拥有与设计模式相同的名字。这样便可通过搜索文件夹的名字，方便而快捷地找到你想要的设计模式。因为在每个实例名的HTML中都含有它所属设计模式的名称以及描述，所以可以通过在HTML文件中搜索相应的关键字来找到设计模式。也可以在CSS文件中进行搜索，例如，其中使用了某个特殊的CSS属性（比如display）。
为了可在多个浏览器中查看实例，我在根文件夹下放了一个index.html文件，它可链向所有的设计模式文件夹。同理，在每个文件夹下也包括了一个名为index.html的文件，它可指向在那个文件夹下的所有设计模式。这些导航页使我们能够迅速找到并浏览每章中的每种设计模式。
每个实例文件夹下包含了所有让实例运行的文件。这使得在你自己的项目中使用这些实例也变得轻而易举：只要把整个文件夹复制过去，然后修改就可以了。你不用为关联和包括其他文件夹下的文件而担心。
实例文件夹下最重要的两个文件是example.html和page.css。example.html包含了例子中的XHTML代码。page.css是实例中的主要样式表。
每个实例还使用了一个名为site.css的CSS文件。它包含了一些非必要的字体和头部规则，从而令书中的实例的显示效果保持一致。
在某些例外的情况下，还使用了另一个CSS文件用于修正IE中的bug和非标准的行为。 ie6.css包含了用于修正IE 6中问题的规则。ie7.css则用于修正IE 7中的问题。ie67.css是用于同时对付IE 6和IE 7的。这些文件中的规则都会覆盖掉page.css中的规则。
那7个JavaScript实例使用了5个JavaScript文件。在第17章的事件样式设计模式中有对它们的阐述。page.js是其中最重要的文件，因为它包含了例子中用到的JavaScript代码。剩下的JavaScript文件都是一些开源的函数库。
最后，每个实例文件夹中还包含了例子中用到的所有图片文件。
勘误表
你可以到www.cssDesignPatterns.com和www.apress.com上本书的详细介绍页面上浏览勘误表 。
如果你在本书中发现了任何错误，并能告知于我，我将不胜感激。请用电子邮件把问题发到support@apress.com和support@cssDesignPatterns.com。
联系作者
可以通过电子邮件mike@cssDesignPatterns.com联系我。期待你的评论、建议和提问。...