本书是一本CSS技术专著，主要从布局这个角度全面、系统和深入地讲解CSS在标准网站布局之中的应用。很多读者经过初步的学习之后就能够使用CSS设计出一些漂亮的网页样式，于是便乐在其中，踌躇满志，这是好事，但千万不要自我陶醉，因为你还未领略CSS的博大精深。用CSS容易，难的是全部都用CSS。CSS的精髓是布局，而不是样式，布局是需要缜密的逻辑思维和系统设计的，而样式只需要简单地编写代码或复制即可。本书正是基于这样的现实，系统地探索了CSS在布局中的各种技术应用，主要包括盒模型技术、布局模型技术、定位技术、浏览器兼容技术，以及编码规范等，同时结合5个综合实例切实帮助读者找到实战开发的体验和智慧。除此之外，还就CSS开发中的一些技术难点和重点展开了详细的介绍，例如表格、表单、图像、超链接、导航菜单、滑动门、圆角、阴影、换肤、Tab技术等等。

本书注重基础、讲究实用、选材精当、深入浅出，适合初中级读者学习使用，也适合具有(X)HTML和CSS基本知识的任何网页设计和开发人员阅读和参考。

CSS是Cascading Style Sheet的英文缩写，中文翻译为层叠样式表单。通过这个意思，我们可以明白层叠性是CSS的一个基本特性。但是很多开发人员错误地把CSS与样式等同起来。

实际上，CSS技术的核心是布局，而不是样式。CSS的强大生命力在于它的布局能力，而不是细枝末节的修饰功能。当然，CSS在样式设计方面的功能是非常完美的。如果读者受制于错误概念的影响，不能超脱现有的篱笆，会给自己的学习与实践背上很重的包袱。俗话说得好“站得高，望得远”，只有从布局的高度来学习CSS技术，读者才能抓住CSS的本质，才能在CSS实践中应用自如。

尽管目前有关CSS的学习资源的数量越来越多，但多是一些支离破碎的技巧和经验，学习这样的资料很容易产生身处山中却不得山貌的困惑。另一方面，CSS的一些高级技术是比较晦涩的，例如，盒模型、布局模型、定位模型、CSS特殊性和兼容性，即使是有经验的CSS开发人员也会遇到问题。这是因为大多数CSS开发人员是靠自学成才的，他们从网上文章和别人的代码中学习经验，而没有全面系统的理解CSS规范。

此外，浏览器兼容性问题和CSS开发工具的缺乏都会影响CSS的开发效率。浏览器对CSS的解析差异是CSS开发人员所面临的巨大挑战，很多设计师不得不花费大量时间来修补CSS代码的兼容性，由于没有系统的参考资料，这些经验基本上都是摸石头过河，严重影响开发速度。

因此，本书将从CSS最基础知识起步，全面系统的探索CSS核心功能，将最有用的CSS技术汇总在一起，全面弥补读者在CSS知识中的欠缺，帮助你加快学习CSS的进程，使你的代码很快能够达到CSS专家的水平。

读者对象

全书从最基本的概念开始讲起，步步深入，因此，即使你是完全的新手，对（X）HTML和CSS还没有任何概念，你也完全可以看懂本书。如果你已经使用CSS一段时间了，但还不是专家，那么你能够从本书获得最大的收益。本书充满了实用的经验技术和示例，可以帮助你精通CSS    技术。

本书专注于CSS技术，系统、全面和深入是本书的特色，因此，本书适用于所有网站设计师以及网站开发人员。全书力求用通俗的语言、简洁的结构、系统的内容与读者一起探索CSS技术，并以CSS布局为重点介绍CSS全部的应用技巧。

全书结构

全书共分13章，包括两大部分：第一部分侧重于CSS技术本身，全面系统的讲解CSS技术的方方面面；第二部分侧重于综合实例解析，帮助读者积累CSS开发实战经验。本书内容采用知识+实例的方式，一步步引导读者如何开始新的、符合Web标准的CSS布局设计。由于CSS布局设计从本质上与传统的表格式布局有着截然不同的开发方式，因此本书的重点将放在如何转变思路和如何实际操作等问题上。

第1章，侧重于现实的困惑，介绍Web标准布局的历史发展，帮助读者找准方向，为后面学习奠定思想基础。

第2章，是CSS基础知识入门，系统的讲解了CSS语法，是初学者必须认真阅读的内容，后面所有内容都将以此为基础展开介绍。

第3章，介绍了CSS开发中两个最重要的编辑工具，熟练掌握其中一种CSS开发工具，可以帮助读者节省很多代码书写时间。

第4章，介绍CSS盒模型技术，盒模型是CSS布局的基础，所有布局都是建立在该技术之上，对于初学者来说应该算是一个技术难点。其中，盒模型本身比较容易理解，困难的是盒模型之间的关系不好把握，需要一定的经验积累。

第5章，介绍CSS版式设计，这一章主要从最基本的样式介绍起，涉及到一些开发技巧，但学习难度不是很大。

第6章，介绍CSS布局模型技术，布局是CSS的难点，也是一个重点，里面包含很多实用技术，如浮动、定位、布局、结构等。读者不容易学习的原因在于，一是布局本身比较抽象，有些效果不容易直接观察；二是浏览器的兼容性会给读者的学习和开发带来障碍；三是不同类型的元素混合布局时，会出现很多意想不到的问题。

第7章，介绍CSS兼容性技术，本章对于初学者来说，在学习上会存在一定的困难，不过当你初步掌握CSS布局之后，你会发现它非常有用，且具有相当的参考价值。

第8章，完全从开发实践的角度介绍如何统筹、规划CSS编码，以及如何优化CSS代码。学习中，需要读者结合实际开发过程，这样能够更容易理解和领会其中的意思。

从第9章开始，分5章介绍了5个综合实例的开发思路和过程，力求帮助读者体验不同类型网站开发的一般步骤和方法。在实例中，重在介绍CSS的构思和开发方法，并对其中一些技术难点展开讲解。

通过阅读本书，读者能够获得全新的网站设计思考方式、全新的XHTML+CSS开发方式，帮助你创建更具创造性、高效性，以及易于维护与访问的网站。

阅读提示

在写作中，全书采用循序渐进的方式，从最基本的概念讲解，并不断深入，对于没有基础的读者来说，建议不要跳跃式阅读，只有在领会前面内容的基础上，你才能够更好地学习和理解后面的知识。如果你有一定的CSS基础，可以把本书作为设计开发的参考手册，它将帮助你排解实践中遇到的各种问题。

本书为了使读者更好地理解与掌握CSS布局方法，在大部分章节之中，除了提供知识、实例外，还从网络上收集了在此方面具有独道之处的网站，就这些现实存在的网站在这些设计问题上的实现方法进行解析，以帮助读者快速理解并行之有效的应用到自己的工作之中。

为了帮助读者学习参考，本书还提供了最新的CSS中文完全参考手册，帮助读者随时查找在学习或开发中所用到的CSS语法和属性的详细解释。

本书介绍了大量的XHTML和CSS代码，用以帮助读者学习CSS布局，但由于篇幅所限，不能够把书中每个示例的所有代码都放置在书中，因此示例代码基本上只显示了二部分：

* XHTML结构代码，即网页中的body部分代码。

* CSS布局代码，即网页中的style标签内代码。

网页其他部分代码被省略，显示如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>标题</title>

<style type="text/css">

－在这里输入书中显示的CSS样式或布局代码

</style>

</head>

<body>

－在这里输入书中显示的XHTML结构或框架代码

</body>

</html>

因此，读者在上机练习时，需要补全XHTML主体框架代码。如果不明白，可以直接参考光盘实例。在实际学习时，需要使用完整的XHTML代码结构，才能够让浏览器顺利解析，读者可以自己编写或借助于网页编辑器完成。

而另一方面，由于实例中的代码有不少内容过于复杂繁多，为了帮助读者更清晰的阅读，实例中的部分代码使用...省略号省略了不重要或重复性的代码。

目前CSS在兼容性上仍然存在着差异。其中比较明显的是IE 5.5及以下版本与IE 6和Firefox的差异，而IE 6与Firefox之间也有部分解析差异。因此，在本书示例中，会一直考虑代码的浏览器兼容问题。

目前浏览器市场主要是IE 6与Firefox，但国内的用户90％以上都使用IE 6浏览器，因此，本书中的所有实例都以IE 6为试验平台，保证大部分用户可简单在IE 6平台上实现，同时也会兼顾Firefox以及其他类型的浏览器，对于IE 5.5及以下版本的浏览器，由于用户人数有限，且其本身也并不是以Web标准为核心的浏览器，因此不是重点试验平台，只有涉及到兼容技术时，本书才会介绍并显示不同IE版本的浏览效果。

本书在CSS布局的解读上，完全从CSS布局的思考方式入手，并不针对浏览器之间的兼容性技巧进行编写，因此，读者只要理解了CSS布局的思考方式和编写原理，就能够真正的了解CSS的布局技术，而这些浏览器之间的差异，大家在学习和应用的过程中也能够慢慢体会到。在本书的专门章节——CSS浏览器兼容解决方案中，我们将深入探讨如何解决这些兼容性问题，以及对浏览器的解析行为做出分析，帮助读者更透彻的理解CSS布局。

致谢

本书写作历时半年之久，为了给读者贡献一本高质量的CSS技术专著，很多人为此而默默无闻地提供了各种直接或间接的帮助。

特别要感谢我的妻子和孩子，为了支持我的写作，为我节省了大量的宝贵时间，同时还要忍受每个深夜里灯光和噪音的干扰，每当我处于困境和面临压力时，是她们给予我无微不至的生活照顾，并鼓励我勇敢地坚持下来。

感谢我的同事姜德元、杨兴国、张敏、袁江、陈万林等，是他们承担了更多的工作，才使得我能有更多的写作时间。

最后，我要感谢本书的策划编辑陈冰先生，是他提出了很多有建设性的意见，使得本书的内容更充实、更实用。同时，还要感谢为本书的出版付出努力的文稿编辑、校对编辑，及其他相关工作人员。

本书作者

本书由朱印宏编写。同时，参与资料整理及编写的还有常才英、袁祚寿、袁衍明、张敏、袁江、田明学、唐荣华、毛荣辉、卢敬孝、刘玉凤、李坤伟、旷晓军、陈万林、陈锐、周秀成、颜昌学、王幼平、冉原洲、李经键、胡厚成等，在此对大家的辛勤工作表示衷心的感谢！

由于时间有限，书中难免会有疏漏和不足之处，恳请广大读者提出宝贵意见。有关本书的任何问题请发电子邮件到zhuyinhong@263.net，本书支持信息将会及时发布在http://www.css8.cn站点上。

朱印宏          

2007年7月于北京    

IV

CSS商业网站布局之道

III

前    言

第1章  Web标准布局概述 1

1.1  从闪客帝国网站改版说起 1

1.2  表格布局的神话与没落 2

1.2.1  表格为谁而生 3

1.2.2  表格为什么要没落 3

1.3  从Table到CSS——坎坷的历程 8

1.3.1  现实的无奈 8

1.3.2  勇敢的挑战 9

1.4  认识Web标准 10

1.4.1  结构标准语言 10

1.4.2  表现标准语言 11

1.4.3  行为标准语言 11

1.5  CSS布局的基本思路 12

1.6  我能学好CSS布局吗 14

1.7  制作你的第一个XHTML+CSS页面 16

1.7.1  传统表格布局 16

1.7.2  表格布局存在的问题 19

1.7.3  XHTML+CSS标准布局 19

第2章  CSS布局基础 24

2.1  标准网页结构 24

2.1.1  XHTML文档结构 24

2.1.2  XHTML基本语法 26

2.1.3  XHTML元素分类 27

2.1.4  XHTML常用元素简介 28

2.1.5  XHTML结构语义化研究 32

2.1.6  XHTML结构化应用案例分析 33

2.2  CSS基本语法 35

2.3  CSS选择符 36

2.3.1  类型选择符 37

2.3.2  id选择符 38

2.3.3  class选择符 40

2.3.4  通用选择符 42

2.3.5  伪类和伪对象 42

2.3.6  伪类选择符 45

2.3.7  伪对象选择符 46

2.3.8  分组选择符 47

2.3.9  包含选择符 48

2.3.10  元素指定选择符 49

2.3.11  子对象选择符 50

2.3.12  属性选择符 51

2.3.13  相邻选择符 55

2.4  CSS属性 55

2.5  CSS属性值 58

2.5.1 颜色值 58

2.5.2  绝对单位 59

2.5.3  相对单位 59

2.5.4  百分比 60

2.5.5  URL 60

2.6  在网页中应用CSS 61

2.6.1  内联样式 61

2.6.2  内部样式 62

2.6.3  外部样式 62

2.7  CSS的继承、层叠和特殊性 64

2.7.1  继承 64

2.7.2  层叠 65

2.7.3  特殊性 66

2.8  div和span深入研究 70

2.8.1  通用元素div和span 70

2.8.2  使用div元素 74

2.8.3  关于div元素嵌套的思考 76

2.8.4  使用span元素 79

2.9  id和class深入研究 81

2.9.1  使用id 81

2.9.2  关于id和name 83

2.9.3  使用class 85

2.9.4  关于id和class 88

第3章  CSS布局工具 89

3.1  TopStyle 89

3.1.1  认识TopStyle界面 89

3.1.2  创建样式 90

3.1.3  编辑样式 92

3.1.4  应用样式 95

3.1.5  环境设置及使用技巧 96

3.1.6  测试样式 97

3.2  Dreamweaver 98

3.2.1  CSS样式面板 98

3.2.2  属性面板 103

3.2.3  CSS可视化助理 104

3.2.4  CSS样式呈现 108

3.2.5  CSS视图辅助工具 112

3.2.6  浏览器检查 113

3.2.7  验证标记 114

第4章  CSS盒模型 116

4.1  盒模型基础 116

4.1.1  为什么要提出盒模型 116

4.1.2  盒模型结构 117

4.1.3  关于元素宽和高的计算 118

4.1.4  关于元素并列间距的计算 121

4.1.5  关于元素间垂直间距的计算 124

4.1.6  关于空盒模型 127

4.2  边框 127

4.2.1  边框宽度 129

4.2.2  边框颜色 129

4.2.3  边框样式 130

4.2.4  关于内联元素的边框 132

4.3  边界 134

4.3.1  边界值 134

4.3.2  边界重叠 140

4.3.3  内联元素的边界 147

4.4  补白 148

4.5  盒模型兼容性应用 151

4.5.1  解决IE元素浮动时边界

误差问题 151

4.5.2  解决非IE父元素不能自适

应子元素高度问题 152

4.5.3  解决IE子元素底边界不被

解析问题 154

4.5.4  解决IE子元素溢出问题 155

第5章  CSS格式化排版 157

5.1  排版是个细活 157

5.2  文字排版 159

5.2.1  关于字体 159

5.2.2  关于字体大小 162

5.2.3  增强字体大小的灵活性和

可读性 166

5.2.4  关于字体颜色 167

5.2.5  关于字体样式 168

5.3  段落排版 170

5.3.1  缩进 170

5.3.2  对齐 172

5.3.3  行距 175

5.3.4  分栏 176

5.3.5  列表版式基础 178

5.3.6  列表版式实战 180

5.3.7  列表项行内显示 184

5.3.8  列表符号的个性显示 185

5.3.9  字距 188

5.3.10  文本行控制 188

5.3.11  空白 192

5.3.12  文本流控制 193

5.3.13  文本转换 197

5.3.14  文本修饰 197

5.4  图文混排 199

5.4.1  构建图文混排结构 199

5.4.2  图文规则混排 202

5.4.3  背景图像应用 204

5.4.4  图文不规则混排 206

5.4.5  不规则图文混排的再研究 209

第6章  CSS布局模型 212

6.1  关于CSS布局 212

6.1.1  从网友的求帖说起 212

6.1.2  关于盒模型补充 213

6.1.3  盒模型的类型 214

6.1.4  包含块 216

6.1.5  布局模型 220

6.2  流动布局模型 221

6.2.1  流动布局模型的特征 222

6.2.2  相对定位流动 223

6.3  浮动布局模型 225

6.3.1  浮动布局模型的特征 225

6.3.2  浮动清除 230

6.3.3  浮动嵌套 233

6.3.4  浮动与流动嵌套 234

6.3.5  浮动与流动混合布局应用 236

6.3.5.1  调整左右栏之间

的空隙 236

6.3.5.2  调整上下栏之间

的空隙 238

6.3.5.3  混合布局沙盘推演 242

6.4  层布局模型 246

6.4.1  定位类型 246

6.4.2  绝对定位包含块 246

6.4.3  绝对定位元素的边距 251

6.4.4  相对定位 253

6.4.5  混合定位 253

6.5  层叠等级 255

6.6  高度自适应 259

6.7  CSS基本布局类型 261

6.7.1  单行单列 262

6.7.2  单行两列 262

6.7.3  单行三列 265

6.7.4  多行多列 268

6.7.5  伪列布局 272

第7章  CSS浏览器兼容解决方案 275

7.1  关于网页浏览器 275

7.2  CSS Bug、Hack和Filter简介 276

7.3  过滤样式表文件 278

7.3.1  IE条件注释 279

7.3.2  @import规则过滤器 280

7.4  过滤规则和声明 283

7.4.1  !important关键字过滤器 283

7.4.2  下划线属性过滤器 283

7.4.3  转义属性过滤器 284

7.4.4  * html选择符过滤器 285

7.4.5  属性选择符过滤器 285

7.4.6  子对象选择符过滤器 286

7.4.7  相邻选择符过滤器 286

7.4.8  转义选择符过滤器 286

7.4.9  注释反斜杠过滤器 287

7.5  在IE/Windows中隐藏规则和声明 287

7.5.1  隐藏单个声明 287

7.5.2  隐藏多个声明 289

7.5.3  隐藏规则 289

7.6  网页Bug解决方案 290

7.6.1  W3C CSS验证服务 290

7.6.2  Web Developer工具插件 291

7.6.3  浏览器显示模式 293

7.6.4  代码隔离与验证 296

7.7  常见Bug及其修复 297

7.7.1  盒模型Bug 297

7.7.2  双倍浮向Bug 298

7.7.3  多出3像素Bug 299

7.7.4  高度不适应Bug 301

7.7.5  多余字符Bug 303

7.7.6  定位Bug 304

7.7.7  捉迷藏Bug 305

7.7.8  部分区域隐藏Bug 306

7.7.9  百分比Bug 308

7.7.10  项目符号隐藏Bug 309

7.8  HTML默认样式与浏览器解析差异 311

7.8.1  HTML 4默认样式 311

7.8.2  浏览器默认样式 313

7.9  IE 7浏览器兼容解决方案 315

7.9.1  盒模型溢出兼容解决方案 315

7.9.2  IE 7不再支持的过滤器小结 317

7.9.3  推荐使用的过滤器 318

第8章  CSS文档统筹与编码规范 320

8.1  CSS文档统筹 320

8.1.1  根据页面类型分离文件 321

8.1.2  根据功能模块分离文件 321

8.1.3  根据标签类型分离文件 321

8.1.4  根据设备类型分离文件 322

8.1.5  根据代码规模综合分离文件 322

8.2  规则的组织 322

8.3  属性的组织 325

8.4  CSS命名艺术 327

8.4.1  经典命名三法 327

8.4.2  CSS命名规则 328

8.4.3  CSS命名方法 329

8.5  CSS代码缩写规则 331

8.5.1  盒模型代码简写 331

8.5.2  列表和背景缩写 334

8.5.3  颜色值缩写 335

8.5.4  字体缩写 335

8.6  CSS代码书写格式 336

8.6.1  CSS代码常用书写格式 336

8.6.2  CSS代码清道夫 339

8.7  CSS代码注释艺术 340

8.7.1  怎样写好注释 340

8.7.2  预防CSS中文注释Bug 342

8.7.3  CSS注释清除 343

8.8  CSS代码优化技巧 344

8.8.1  利用继承性优化代码 344

8.8.2  利用默认值优化代码 345

8.8.3  利用公共类优化代码 345

8.8.4  利用选择符分组优化代码 346

8.8.5  利用层叠覆盖优化代码 347

第9章  个人Blog网站布局 348

9.1  关于Veerle's blog的研究 348

9.2  网站配色 351

9.3  全局属性设置 351

9.4  控制模块显示宽度 353

9.5  关于兼容性的解决方案 356

9.6  滑动门技术研究 358

9.6.1  什么是滑动门 359

9.6.2  滑动导航菜单 362

9.7  欣赏与研究背景图像的应用 365

9.7.1  主背景图像、艺术图像和

图标的使用 365

9.7.2  日历背景图像的使用 366

9.7.3  背景图像应用的思考 367

9.7.3.1  隐藏法 367

9.7.3.2  躲避法 368

9.7.3.3  覆盖法 368

9.8  圆角研究 369

9.8.1  不带背景图像的圆角 369

9.8.2  关于圆角的高级探讨 376

9.8.3  纯CSS圆角代码优化 381

9.8.4  用背景图像设计圆角 383

9.8.4.1  完全固定的圆角布局 383

9.8.4.2  高度固定的圆角布局 384

9.8.4.3  宽度固定的圆角布局 385

9.8.4.4  完全自适应圆角布局 387

9.8.4.5  优化完全自适应圆角

布局代码 390

9.8.5  关于圆角解决方案的更多

参考信息 391

9.9  阴影研究 393

9.9.1  定位法 393

9.9.2  浮动法 394

9.9.3  洋葱皮 395

第10章  公司宣传网站的布局 396

10.1  关于Layout的研究 396

10.2  全局属性设置 399

10.3  页面框架控制 400

10.4  关于列表布局的深入研究 403

10.4.1  图片切换技术 403

10.4.2  选项卡切换技术 406

10.5  导航菜单研究 408

10.5.1  水平菜单 409

10.5.2  垂直菜单 411

10.5.3  多级菜单 413

10.5.4  CSS Tab Designer 420

10.5.5  获取更多的导航菜单 421

第11章  技术门户网站布局 423

11.1  关于CSS Beauty的研究 423

11.2  全局属性设置 426

11.3  页面框架控制 429

11.4  关于CSS Beauty导航条的研究 432

11.5  关于CSS Beauty数据表格的研究 434

11.5.1  Upcoming Events数据表格 434

11.5.2  Current Job Openings

数据表格 436

11.6  数据表格深入研究 438

11.6.1  数据列分组 440

11.6.2  数据行分组 442

11.6.3  表格中重要的排版属性 443

11.7  数据表格的CSS布局研究 445

11.7.1  边框控制 445

11.7.2  改善数据表格的视觉效果 449

第12章  Web 2.0网站布局 457

12.1  关于Web 2.0的技术探析 457

12.2  关于读客网的研究 462

12.3  全局属性设置 465

12.4  页面框架控制 470

第13章  网上商城网站布局 475

13.1  关于阿里巴巴 475

13.2  关于阿里巴巴中国网站的研究 476

13.3  全局属性设置 481

13.4  页面框架控制 483

13.5  网页换肤技术研究 486

13.5.1  构思与准备 487

13.5.2  设计皮肤 488

13.5.3  用JavaScript控制皮肤 490

13.5.4  记忆皮肤 492

13.5.5  恢复皮肤记忆 494

13.5.6  分析阿里巴巴中国网站

首页皮肤 495

13.6  Tab切换技术 502

13.7  表单研究 504

13.7.1  表单及其框架 504

13.7.2  表单版式 510

13.7.3  表单布局 518

VIII

CSS商业网站布局之道

IX

目    录