CSS布局是目前最流行的网页制作技术之一。本书通过实例讲解了CSS各个属性的使用方法和怎样使用CSS进行页面的制作。本书内容包括Web标准布局的本质、XHTML书写规范、CSS基础与书写规范、网页头部元素的详细定义、CSS基本布局属性、CSS容器属性、CSS定义文本属性、元素的修饰和CSS常见应用、浏览器及兼容问题、整站样式表的分析、标准的校验、一个英文网站的制作、使用Dreamweaver制作中文网站。为了便于读者学习，本书从第2篇开始在每章中专门增加了实例讲解的内容。

本书适合广大Web网站设计人员、网站设计的初学者、网站管理维护人员、大中专院校的学生和社会培训学员阅读。

前    言

随着Web技术的不断发展，互联网已经由被动接受型的Web 1.0向主动参与型的Web 2.0过渡了。越来越多的技术需要Web页面具有清晰的语义和严格的结构。传统的采用表格布局的页面所带来的缺点表现得越来越明显。随着Web 2.0技术的逐渐成熟，以及更多的基于XML技术的出现，使得用CSS进行网页布局的技术显得越来越重要，同时也是未来互联网的发展趋势。如今，已经有越来越多的新建网站使用了CSS布局技术，同时也有很多的大型门户网站采用CSS布局对原有网站进行了重构。

为了让广大的网页设计师和即将加入到网页制作这个行列的初学者们能够更方便地掌握使用CSS布局的技术，笔者特编写了本书，力求让读者在学完本书之后，能够独立使用CSS进行网页布局。

本书特色

1．技术全面，内容充实

本书详细地讲解了当前网页布局中经常使用的CSS属性。全书将所有属性分成布局属性、容器属性、文本属性和其他属性等几个部分，同时详细地讲解了每个属性取值的具体含义和应用。

2．注重实践，联系实际

由于CSS中属性很多，取值复杂，很多读者了解了某个CSS属性语法和取值后并不知道如何在制作页面时灵活应用。本书通过示例对各个属性的具体应用方法和需要注意的问题进行了详细的讲解，读者可以通过本书的学习，掌握各个CSS属性在页面中的应用技巧和注意事项。

3．注重观念，把握本质

本书力求建立起对网页布局的新观念，使读者通过对本书的学习，了解CSS布局页面的本质思想，而不是单纯进行技术层面的讲解，努力做到知其然同时知其所以然。因为不从根本上建立起新的布局观念，就不能在实际制作中更好地应用，同时也不能达到应用CSS布局的根本目的。

4．实例经典，举一反三

Web页面千变万化，其布局和修饰方式千差万别，不可能把每一个页面的制作方法都一一介绍。本书将通过几个具体的实例和一些单独的示例，讲解利用CSS进行页面布局的技巧。力求在实例和示例的制作过程中让读者了解CSS布局的原理，了解CSS布局的核心内容，方便以后实际应用中制作各种布局的页面。

5．图文并茂，重点突出

本书对每个CSS属性的应用效果都用图片的方式展示出来，做到明确直观。同时对每个示例中需要特别注意和说明的地方都使用了单独的格式，使读者能够快速把握知识的重点。

6．与时俱进，注重知识更新

互联网的发展速度很快，浏览器不断更新换代，而每次更新后的浏览器所支持的CSS属性将会有所区别。本书中不但讲述了现在大多数人使用的浏览器中CSS的使用效果，同时也介绍了最新发布的浏览器的特性，使读者通过本书学习到的知识有更好的时效性。

本书内容

第1章：主要讲述使用CSS布局页面的本质，即表现和结构相分离。本章是利用CSS布局页面的思想基础，很好地理解本章的内容，将有助于后面知识的学习。

第2章：详细介绍XHTML的书写规范。虽然本书主要讲解关于CSS属性和应用的知识，但是良好的XHTML结构是CSS控制页面表现的桥梁。掌握XHTML书写规范是应用CSS布局页面不可缺少的内容。

第3章：从宏观上对CSS的各个部分做一个比较详细的介绍，让读者能够对CSS有一个整体的了解，同时还介绍关于CSS语法结构等基础知识。

第4章：主要讲解网页头部标签的详细定义，包括制作网页头部时要注意的问题和各个头部标签的详细设置。

第5章：重点介绍CSS基本布局属性，包括怎样使用浮动属性和布局属性更改元素的默认排列方式和进行布局的基础知识。

第6章：主要讲解CSS容器属性，包括关于容器属性的详细知识和怎样通过容器属性进一步控制元素精确位置的知识。

第7章：主要介绍CSS定义文本属性，包括使用CSS控制文本的显示方式、链接的修饰，以及内容的水平和垂直居中显示等。

第8章：主要讲解怎样对页面中各种元素进行修饰，同时讲解了页面中导航部分的详细修饰方法。

第9章：由于存在着不同的浏览器，所以在CSS的应用中一定存在兼容问题，本章将对现在使用最多的IE浏览器和FIREFOX浏览器中的兼容问题进行详细介绍，同时将介绍最新版本的IE 7.0的特性。

第10章：主要讲解关于整站样式表的分析，包括怎样规划整站的CSS样式表和页面中二级页面的制作。

第11章：主要介绍关于标准的校验问题，包括标准校验的方法和标准校验中会遇到的问题。

第12章：主要用一个英文网站的实例，讲解通过编写代码的方式进行CSS布局的步骤。

第13章：主要讲解使用可视化开发工具Dreamweaver进行标准网站开发的步骤，包括制作结构、添加样式、重复样式的调用以及兼容性等内容。

本书读者对象

? 网页表现层开发人员；

? Web 2.0开发人员；

? 网页专业设计人员；

? 网页维护人员；

? 网页制作爱好者；

? 大中专院校的学生；

? 社会培训学生。

技术支持方式

本书的专有论坛：http://www.douban.com/group/24025/。注意，“24025”后的“/”不能省略，否则会造成访问失败。作者的E-mail：sxyufeng@263.net。

本书作者

本书由强锋科技统筹，由陈刚编写。其他参与资料整理和光盘制作的人员有王龙、王拥东、吴善才、徐砚颖、尹健慧、詹涵林、张薇、张小强、张运端、赵玉荣、郑慧、朱博、朱朝坤、邹小红、陈强、陈燕、丁凤霞、丁礼友、范忠诚、黄俊灿、贾伟、李喜彤、林垚、尚文谊、孙亮亮、唐崇敏、陶则熙等。在此对大家的辛勤工作一并表示感谢！

编著者  

2007年4月

目    录

第1篇  CSS布局基础知识

第1章  Web标准布局的本质 3

1.1  为什么要建立Web标准 4

1.1.1  建立Web标准的目的 4

1.1.2  使用Web标准的好处 4

1.2  什么是Web标准 5

1.3  内容、结构和表现 5

1.4  两种思考方式 7

1.5  Web标准的前景 9

1.6  Web标准网站欣赏 10

第2章  XHTML书写规范 13

2.1  为什么要使用XHTML 14

2.2  什么是XHTML 14

2.3  XHTML语法基础 16

2.3.1  XHTML页面结构 16

2.3.2  元素的书写格式和属性 17

2.3.3  各种元素的属性 18

2.4  XHTML代码规范 22

第3章  CSS基础与书写规范 25

3.1  CSS的基础知识 26

3.1.1  什么是CSS 26

3.1.2  CSS的语法 27

3.1.3  选择符 27

3.1.4  属性 29

3.1.5  伪类和伪元素 29

3.1.6  颜色单位 29

3.1.7  长度单位 30

3.1.8  百分比值 31

3.1.9  URL 31

3.1.10  默认值 32

3.1.11  继承性 32

3.2  CSS编码规范 33

3.2.1  CSS基本书写规范 33

3.2.2  CSS命名参考 34

3.2.3  CSS样式表书写顺序 35

3.3  怎样更好地应用CSS 35

3.3.1  块元素和内联元素 35

3.3.2  一些CSS的实用技巧 35

3.3.3  怎样调试CSS 36

3.4  关于CSS的学习 38

第2篇  CSS页面布局技巧

第4章  网页头部元素的详细定义 43

4.1  DOCTYPE的选择 44

4.1.1  什么是DOCTYPE 44

4.1.2  选择什么样的DOCTYPE 44

4.2  名字空间 45

4.3  编码问题 45

4.4  meta标签 45

4.5  CSS的调用 46

4.5.1  调用样式表的几种方法 46

4.5.2  应用样式的优先级 49

4.6  网页头部实例 52

第5章  CSS基本布局属性 55

5.1  页面的制作流程和整体分析 56

5.2  元素定位基础知识 57

5.2.1  块元素的默认排列 57

5.2.2  内联元素的默认排列 58

5.2.3  块元素和内联元素的混合默认排列 58

5.2.4  使用浮动属性进行定位 59

5.3  定位属性详解 60

5.3.1  定位模式 60

5.3.2  边偏移 60

5.3.3  层叠定位属性 60

5.4  定位属性的应用 61

5.4.1  绝对定位 61

5.4.2  相对定位 63

5.4.3  固定定位 65

5.4.4  层叠定位属性的使用 65

5.5  页面的背景设定 66

5.5.1  使用背景色定义背景 66

5.5.2  背景图片默认使用 66

5.5.3  背景图片的重复 67

5.5.4  背景图片的位置 68

5.5.5  背景图片的附件 71

5.6  背景的综合应用 72

5.6.1  背景颜色和背景图片的层叠 72

5.6.2  背景图片的重复和位置的关系 73

5.6.3  背景属性在内联元素中的使用 73

5.6.4  背景属性的缩写 74

5.6.5  页面文本的样式 75

5.6.6  链接的样式 75

5.7  布局的基础 76

5.7.1  布局页面的步骤 76

5.7.2  使用ID还是Class 77

5.7.3  控制内容显示的display属性 78

5.7.4  控制内容显示的visibility属性 79

5.7.5  使用text-align属性的水平居中 80

5.7.6  使用margin属性的水平居中 81

5.8  浮动属性 82

5.8.1  浮动属性详解 82

5.8.2  相邻的浮动元素和固定元素 82

5.8.3  相邻的两个浮动元素 83

5.8.4  相邻的多个浮动元素 84

5.9  关于ul和li的样式详解 85

5.9.1  使用list-style-type属性 85

5.9.2  使用list-style-position属性 86

5.9.3  使用list-style-image属性 87

5.9.4  list-style属性 87

5.10  一个纵向导航菜单的制作 88

5.10.1  菜单原理 88

5.10.2  制作菜单内容和结构部分 88

5.10.3  CSS代码编写 89

5.11  一个横向导航菜单的制作 93

5.11.1  菜单原理 93

5.11.2  制作菜单内容和结构部分 93

5.11.3  CSS代码编写 94

5.12  清除浮动 97

5.12.1  清除浮动属性详解 97

5.12.2  清除浮动属性的使用 99

5.13  页面header部分的制作 100

5.13.1  效果图的分析 100

5.13.2  第一次切图 101

5.13.3  第二次切图 102

5.13.4  制作前的准备工作 103

5.13.5  分析效果图 104

5.13.6  页面结构的制作 105

5.13.7  基础样式的定义 105

5.13.8  banner部分样式的定义 106

5.13.9  menu部分样式的定义 107

5.13.10  页面全部的CSS代码 109

第6章  CSS容器属性 111

6.1  什么是盒模型 112

6.1.1  内容与盒模型 112

6.1.2  背景与盒模型 113

6.2  补白属性 113

6.2.1  补白属性详解 113

6.2.2  百分比值的使用 115

6.2.3  单侧的补白属性 117

6.2.4  补白属性的简写 117

6.3  边框属性 119

6.3.1  边框样式 119

6.3.2  边框宽度 121

6.3.3  边框颜色 122

6.3.4  边框的综合定义 123

6.3.5  单侧边框的综合定义 124

6.3.6  一个有用的表格边框属性 125

6.3.7  应用边框属性的实例 126

6.4  边界属性 127

6.4.1  边界属性 127

6.4.2  单侧的边界和简写 128

6.4.3  垂直方向的边界重叠 129

6.4.4  水平方向的边界 130

6.4.5  负的边界值 131

6.4.6  在内联元素中使用边界属性 132

6.5  父元素与子元素之间的距离 133

6.5.1  子元素边界属性值为0 133

6.5.2  父元素的补白属性为0 134

6.5.3  父元素含有padding属性同时子元素含有margin属性 135

6.6  嵌套的元素中使用负边界 136

6.7  固定大小的问题 137

6.7.1  盒模型大小的计算 138

6.7.2  使用overflow属性固定长度和宽度 138

6.8  自适应问题 139

6.8.1  什么叫自适应 139

6.8.2  独立元素的高度自适应 139

6.8.3  利用背景色的两列自适应 141

6.8.4  左右均能自适应的两列布局 143

6.8.5  三列布局中有两列内容固定 145

6.8.6  三列布局中有一列内容固定 147

6.8.7  三列布局中高度都不确定的情况 151

6.8.8  水平自适应的原理 153

6.9  制作一个简单的页面框架 154

6.9.1  框架结构分析 154

6.9.2  页面结构的制作 155

6.9.3  定义CSS代码 156

6.9.4  页面最终效果及注意的问题 160

6.10  header部分的进一步完善 161

6.10.1  标题及签名部分的完善 161

6.10.2  导航部分的完善 163

6.10.3  调整后的页面效果 164

6.11  页面主体结构的制作 165

6.11.1  效果图的分析 165

6.11.2  主体大表格和内容部分 166

6.11.3  右侧分类导航部分 167

6.12  页面主体部分CSS的编写 169

6.12.1  3个主要结构的样式 169

6.12.2  内容部分的样式 171

6.12.3  导航列表部分的CSS编写 172

6.12.4  主体部分最后的显示效果和CSS代码 175

第7章  CSS定义文本属性 179

7.1  文本的缩进和对齐 180

7.1.1  段首缩进 180

7.1.2  段首字符下沉与大写 181

7.1.3  文本的对齐 181

7.1.4  图文混排 183

7.2  行高与间隔 184

7.2.1  行高属性详解 184

7.2.2  利用行高属性使文本垂直居中 187

7.2.3  间隔与空白 188

7.2.4  文本的转换 190

7.3  水平和垂直居中问题 191

7.3.1  已知容器和内容大小的水平和垂直居中问题 191

7.3.2  未知容器的大小而已知内容大小的水平和垂直居中问题 192

7.3.3  已知容器的大小而未知内容大小的水平和垂直居中问题 193

7.3.4  容器的大小和内容大小均未知的水平和垂直居中 196

7.3.5  修饰图片的水平和垂直居中 197

7.4  字体的综合属性 198

7.4.1  字体的选择 198

7.4.2  字体的大小 199

7.4.3  字体的加粗 201

7.4.4  字体的样式 202

7.4.5  字体的变形 202

7.4.6  字体属性的简写 203

7.5  文本的修饰和链接 204

7.5.1  文本的修饰 204

7.5.2  链接属性详解 206

7.5.3  使用链接的顺序 208

7.5.4  链接的继承性 209

7.5.5  cursor属性 210

7.6  完成页面header部分的制作 211

7.6.1  标题和签名部分 211

7.6.2  menu导航部分 213

7.7  main部分的完善 215

7.7.1  内容部分的完善 215

7.7.2  分类导航部分的完善 217

7.8  footer部分的制作 220

7.8.1  效果图的分析 220

7.8.2  结构部分的制作 221

7.8.3  页面样式的添加 221

7.9  页面在IE浏览器中的显示效果 224

第8章  元素的修饰和CSS常见应用 225

8.1  图片的修饰 226

8.1.1  网页中常用的图片格式 226

8.1.2  需要使用图片的情况 226

8.1.3  作为背景的图片修饰 227

8.1.4  修饰内容图片 227

8.2  使用图片制作简单圆角框 229

8.2.1  单色或者单线圆角框自适应高度 229

8.2.2  单色或者单线圆角框自适应宽度 231

8.2.3  单色或者单线圆角框完全自适应 232

8.3  复杂圆角框的制作 234

8.3.1  自适应高度 235

8.3.2  自适应宽度 235

8.3.3  完全自适应 236

8.4  用CSS制作代替图片的圆角 239

8.4.1  CSS圆角实现原理 239

8.4.2  CSS圆角的制作 240

8.5  表单的修饰 243

8.5.1  表单的分类 243

8.5.2  文本域的修饰 245

8.5.3  文本区域的修饰 245

8.5.4  按钮的修饰 246

8.5.5  复选框的修饰 246

8.5.6  单选按钮的修饰 247

8.5.7  列表的修饰 247

8.5.8  文件域的修饰 247

8.5.9  图像域的修饰 248

8.6  登录框的制作 248

8.6.1  效果图的分析 248

8.6.2  页面结构部分制作 249

8.6.3  CSS部分的编写 249

8.7  滚条的修饰 252

8.7.1  滚条的显示 253

8.7.2  滚条的修饰 254

8.8  表格的修饰 255

8.8.1  控制表格的边线和背景 255

8.8.2  表格中的高度和宽度 256

8.8.3  表格的居中问题 257

8.8.4  表格的内容与高度 258

8.9  分隔线的修饰 258

8.10  关于导航栏的制作和修饰 260

8.10.1  纵向导航栏的修饰 260

8.10.2  制作链接样式 262

8.10.3  制作鼠标悬停效果 262

8.10.4  横向导航栏 265

8.11  下拉菜单的制作 266

8.11.1  下拉菜单的显示效果 266

8.11.2  菜单的原理 266

8.11.3  制作菜单结构部分 266

8.11.4  编写主导航部分的样式 267

8.11.5  编写子栏目的样式 268

8.11.6  隐藏子栏目 269

8.11.7  制作显示效果的样式 269

8.11.8  使用的脚本代码 270

8.12  遮盖的问题 270

第9章  浏览器及兼容问题 273

9.1  浏览器介绍 274

9.2  要兼容哪些浏览器 274

9.3  解决兼容问题的原理 275

9.4  !important的使用 275

9.5  水平居中的问题 276

9.5.1  IE 6.0中的水平居中 277

9.5.2  FIREFOX 2.0中的水平居中 277

9.5.3  解决方法 278

9.6  非浮动内容和容器的问题 278

9.6.1  IE 6.0中固定宽度和高度的容器和内容 278

9.6.2  FIREFOX 2.0中的容器与内容 278

9.6.3  可能出现的问题和解决方法 279

9.7  使用:after伪类解决浮动的问题 280

9.7.1  IE 6.0中的浮动元素和容器 280

9.7.2  FIREFOX 2.0中的浮动元素和容器 281

9.7.3  使用:after伪类清除浮动 281

9.7.4  并列浮动元素默认宽度的问题 282

9.8  嵌套元素宽度和高度叠加的问题 283

9.8.1  父元素和子元素均没有定义宽度和高度 283

9.8.2  定义子元素的宽度后的效果 284

9.8.3  定义父元素宽度后的效果 284

9.8.4  解决的方法 285

9.9  子元素负边界的问题 286

9.9.1  IE 6.0中子元素的负边界 287

9.9.2  FIREFOX 2.0中子元素的负边界 287

9.9.3  解决方法 287

9.10  列表的默认显示问题 288

9.10.1  列表的默认显示方式 288

9.10.2  默认属性的取消 289

9.11  IE 6.0中的问题 290

9.11.1  浮动元素的双边距和零边距问题 290

9.11.2  浮动列表的问题 294

9.11.3  图片的间隙问题 295

9.12  IE 7.0中的问题 295

9.12.1  内容和容器的显示方式不同 296

9.12.2  支持!important的声明 296

9.12.3  嵌套的问题 297

9.12.4  浮动子元素的问题 298

9.12.5  和IE 6.0相同的问题 299

9.13  兼容问题实例 299

9.13.1  纵向导航菜单的兼容 299

9.13.2  横向导航菜单的兼容 303

9.13.3  自适应高度的兼容 305

9.13.4  实例制作中的兼容问题 307

第3篇  整站的css定义技巧

第10章  关于整站样式表的分析 315

10.1  站点页面分析 316

10.1.1  规划样式表的原则 316

10.1.2  规划样式表的方法 316

10.1.3  实例分析 317

10.2  站点二级页面的制作 318

10.2.1  日志内容页面结构的规划 318

10.2.2  日志内容页面CSS部分的制作 319

10.2.3  日志列表页面的制作 322

第11章  关于标准的校验 325

11.1  为什么要进行标准的校验 326

11.2  怎样进行标准的校验 326

11.2.1  XHTML校验的方法 326

11.2.2  CSS校验的方法 328

11.2.3  XHTML校验常见错误 329

11.2.4  CSS校验常见错误 330

11.3  实例页面的校验 330

11.3.1  实例首页的校验 330

11.3.2  一个二级页面的校验 332

第4篇  实例制作

第12章  一个英文网站的制作 337

12.1  分析效果图 338

12.2  切图 339

12.2.1  制作首页的切图 340

12.2.2  二级页面的切图 341

12.3  制作站点首页头部 341

12.3.1  首页头部的信息和基础样式的制作 342

12.3.2  首页头部的分析 343

12.3.3  首页头部结构的制作 343

12.3.4  首页头部CSS代码的编写 344

12.4  制作首页的主体部分 346

12.4.1  分析主体部分效果图 346

12.4.2  制作主体左侧部分的结构 347

12.4.3  制作主体左侧部分的样式 348

12.4.4  制作主体中间部分的结构 351

12.4.5  制作主体中间部分的样式 352

12.4.6  制作主体右侧部分的结构 354

12.4.7  制作主体右侧部分的样式 355

12.5  制作首页的底部 357

12.6  首页的兼容问题 358

12.7  二级页面的制作 359

12.7.1  分析二级页面的效果图 359

12.7.2  制作二级页面中间内容部分的结构 360

12.7.3  制作二级页面中间内容部分的样式 361

12.7.4  制作二级页面右侧部分的结构 363

12.7.5  制作二级页面右侧部分的样式 363

第13章  使用Dreamweaver制作中文网站 365

13.1  分析效果图 366

13.2  切图 367

13.3  制作站点首页头部 369

13.3.1  首页头部的信息和基础样式的制作 369

13.3.2  首页头部的分析 371

13.3.3  首页头部logo和banner部分的制作 372

13.3.4  导航列表的制作 375

13.4  制作首页的主体部分 378

13.4.1  分析主体部分效果图 378

13.4.2  制作主体部分的父元素 378

13.4.3  制作主体左侧部分的样式 379

13.4.4  制作主体右侧内容中关于我们的部分 382

13.4.5  制作今日新闻部分 385

13.4.6  制作点拨和时评的部分 387

13.4.7  制作合作伙伴部分 389

13.5  制作首页的底部 390

13.6  首页的兼容问题 391

13.7  二级页面的制作 392

附录A  CSS标记速查 395