第1篇 CSS技术基础 2
第1章 网页制作入门 2
1.1 了解浏览器和网页文档的关系 2
1.2 初识HTML和XHTML 3
1.2.1 HTML 3
1.2.2 XHTML 4
1.2.3 XHTML语法 5
1.3 初识CSS的作用 6
1.4 选择一个合适的开发工具 8
1.4.1 CSS专业开发编辑器TopStyle 8
1.4.2 网页开发编辑器Dreamweaver 10
1.5 常见面试题 10
1.6 小结 11
1.7 习题 11
第2章 CSS初体验——编写一个简单的网页文档 12
2.1 编写XHTML文档 12
2.1.1 使用Dreamweaver新建一个XHTML框架文档 12
2.1.2 手工编写XHTML文档 14
2.2 使CSS在XHTML文档中生效 15
2.2.1 在标签中加入CSS样式 15
2.2.2 在＜style＞＜／style＞标签中加入CSS样式 16
2.2.3 链入外部CSS样式表 17
2.2.4 导入样式 18
2.2.5 优先级问题 19
2.3 初探CSS语句的结构和工作原理 20
2.3.1 CSS语句的结构 20
2.3.2 CSS语句的工作原理 20
2.4 CSS的注释 21
2.5 实例——从无到有建网页 21
2.6 常见面试题 24
2.7 小结 25
2.8 习题 25
第3章 CSS的基本语法 26
3.1 选择器 26
3.1.1 标签选择器 26
3.1.2 类选择器 27
3.1.3 ID选择器 28
3.1.4 全局选择器 30
3.1.5 组合选择器 30
3.1.6 继承选择器 32
3.1.7 伪类 35
3.2 声明 35
3.2.1 多重声明 36
3.2.2 集体声明 36
3.3 CSS的层叠原理 38
3.3.1 CSS样式来源 38
3.3.2 选择器的优先级 38
3.3.3 !important语句 39
3.3.4 顺序优先级 40
3.3.5 CSS的层叠规则 41
3.4 实例——制作简单的竖形菜单 42
3.5 常见面试题 44
3.6 小结 44
3.7 习题 44
第4章 CSS的单位 46
4.1 颜色单位 46
4.1.1 颜色名称 46
4.1.2 百分比颜色 47
4.1.3 数字颜色 48
4.1.4 十六进制颜色 49
4.2 长度单位 51
4.2.1 绝对单位 51
4.2.2 相对单位 51
4.3 常见面试题 53
4.4 小结 53
4.5 习题 54
第2篇 使用CSS控制页面样式 56
第5章 用CSS控制文本样式 56
5.1 字体 56
5.2 文字大小概述 57
5.2.1 设置文字大小 58
5.2.2 定义文字的相对大小 58
5.2.3 定义文字的绝对大小 60
5.3 文字颜色 62
5.4 文字粗细 63
5.5 斜体 65
5.6 下划线、顶划线和删除线 66
5.7 英文字母大小写 68
5.8 属性的缩写法 69
5.9 用段落属性改变文字的段落样式 69
5.9.1 段落的水平对齐方式 70
5.9.2 段落的垂直对齐方式 71
5.9.3 首行缩进 73
5.9.4 行间距与字间距 74
5.10 实例——简单的文章页面 78
5.11 常见面试题 81
5.12 小结 81
5.13 习题 81
第6章 用CSS设置图片样式 82
6.1 用CSS设置图片的样式 82
6.1.1 在网页中插入图片 82
6.1.2 控制图片的大小 83
6.1.3 给图片添加边框的技巧 87
6.1.4 图片不显示的解决办法 88
6.1.5 给图片增加链接 89
6.2 实例——文字环绕 90
6.3 实例——制作简单相册 92
6.4 常见面试题 97
6.5 小结 98
6.6 习题 98
第7章 用CSS设置背景 99
7.1 设置背景颜色 99
7.2 设置背景图片 100
7.2.1 为元素添加背景图案 100
7.2.2 背景图的重复 101
7.2.3 背景图的位置 103
7.2.4 滚动和固定背景图 107
7.2.5 背景属性缩写 109
7.3 实例——制作圆角 109
7.4 常见面试题 113
7.5 小结 114
7.6 习题 114
第8章 用CSS控制超链接样式 115
8.1 改变超链接的基本样式 115
8.2 丰富超链接的表现形式 116
8.2.1 超链接背景图的巧妙运用 116
8.2.2 超链接翻转效果 119
8.3 实例——制作实用工具栏 122
8.4 常见面试题 126
8.5 小结 126
8.6 习题 127
第9章 用CSS控制列表样式 128
9.1 列表的类型 128
9.1.1 无序列表 128
9.1.2 有序列表 129
9.1.3 定义列表 130
9.2 改变列表符的样式 131
9.2.1 使用自带的列表符 131
9.2.2 用背景图片改变列表符 133
9.2.3 改变列表符的位置 134
9.2.4 列表属性的速写法 135
9.3 实例——制作带时间显示的新闻列表 135
9.4 实例——制作WEB 2.0风格导航 137
9.5 常见面试题 141
9.6 小结 141
9.7 习题 141
第10章 用CSS美化表格 143
10.1 表格的基本页面元素 143
10.2 使用CSS控制表格元素 146
10.2.1 设置表格元素宽度 146
10.2.2 设置表格元素边框 147
10.3 实例——制作日历 147
10.4 常见面试题 151
10.5 小结 151
10.6 习题 151
第11章 用CSS控制表单样式 153
11.1 了解表单元素 153
11.1.1 form标签和fieldset标签 153
11.1.2 表单域和表单按钮 155
11.2 使用CSS美化表单元素 155
11.2.1 美化fieldset标签 156
11.2.2 美化表单域 157
11.3 实例——制作整洁的用户登录框 160
11.4 实例——制作简单的留言板 165
11.5 常见面试题 170
11.6 小结 170
11.7 习题 170
第12章 CSS滤镜的应用 172
12.1 滤镜概述 172
12.2 透明层次滤镜（alpha） 172
12.3 颜色透明滤镜（chroma） 176
12.4 模糊滤镜（blur） 177
12.5 固定阴影滤镜（dropshadow） 179
12.6 移动阴影滤镜（shadow） 180
12.7 光晕滤镜（glow） 181
12.8 灰度滤镜（gray） 182
12.9 反色滤镜（invert） 183
12.10 镜像滤镜（flip） 184
12.11 遮罩滤镜（mask） 185
12.12 X射线滤镜（x-ray） 185
12.13 波纹滤镜（wave） 186
12.14 常见面试题 187
12.15 小结 188
12.16 习题 188
第13章 CSS代码的编写规范 189
13.1 使用语义明确的标记 189
13.2 使用有意义的CSS命名 189
13.3 CSS代码的缩写 191
13.4 合理的CSS注释 192
13.5 常见面试题 192
13.6 小结 193
13.7 习题 193
第3篇 DIV+CSS布局 196
第14章 DIV+CSS布局基础 196
14.1 初识DIV+CSS布局的流程 196
14.2 了解盒模型 198
14.2.1 div标签的盒模型举例 198
14.2.2 基本盒模型 201
14.2.3 边距 202
14.2.4 补白 206
14.2.5 边框 207
14.3 页面元素的布局 211
14.3.1 块级元素与行内元素 211
14.3.2 CSS布局方式——常规流 213
14.4 CSS布局方式——浮动 213
14.4.1 两个元素的浮动应用 214
14.4.2 多个元素的浮动应用 216
14.4.3 清除浮动 218
14.4.4 解决火狐浏览器的计算高度问题 219
14.5 CSS布局方式——相对定位 221
14.5.1 单个元素的相对定位 222
14.5.2 两个元素的相对定位 224
14.6 CSS布局方式——绝对定位 226
14.6.1 单个元素的绝对定位 226
14.6.2 两个元素的绝对定位 227
14.7 实例——制作歌曲专辑列表 229
14.8 实例——给图片加入信息 232
14.9 常见面试题 234
14.10 小结 234
14.11 习题 235
第15章 CSS页面基本排版技术 236
15.1 固定宽度布局 236
15.1.1 一列的水平居中布局 236
15.1.2 两列浮动布局 239
15.1.3 三列浮动布局 243
15.2 自适应宽度布局 248
15.2.1 两列布局——两列自适应宽度 248
15.2.2 两列布局——左列固定右列自适应 250
15.2.3 三列布局——中间列自适应 252
15.3 复杂的页面排版 254
15.3.1 复杂的页面排版——垂直布局 255
15.3.2 复杂的页面排版——水平布局 261
15.4 常见面试题 266
15.5 小结 266
15.6 习题 266
第16章 CSS的过滤器和HACK 268
16.1 CSS的过滤器和HACK概述 268
16.2 常用的HACK技术 269
16.2.1 全局选择器html 269
16.2.2 !important和下划线 270
16.2.3 区分IE6、IE7和火狐浏览器的HACK技术 270
16.3 修复浏览器中常见的bug 271
16.3.1 修正浮动元素的双倍边距 272
16.3.2 修正IE6的消隐 273
16.3.3 修正IE6的重复字符 275
16.3.4 让火狐浏览器自动计算容器高度 276
16.3.5 实现容器的最小高度 278
16.4 常见面试题 281
16.5 小结 281
16.6 习题 281
第17章 了解WEB标准和重构 283
17.1 网页的组成 283
17.1.1 结构 283
17.1.2 表现 285
17.1.3 行为 286
17.2 了解WEB标准 286
17.2.1 什么是WEB标准 286
17.2.2 什么是W3C 287
17.2.3 使用WEB标准的必要性 288
17.3 如何建立标准WEB网页 289
17.3.1 正确书写网页文档头部 289
17.3.2 遵循XHTML语法 289
17.4 常见面试题 291
17.5 小结 292
17.6 习题 292
第4篇 精彩案例剖析 294
第18章 DIV+CSS页面布局实例：制作个人网站首页 294
18.1 个人网站首页构架分析 294
18.2 分块制作个人网站首页 295
18.2.1 制作个人网站首页的总体布局 295
18.2.2 实现左中右浮动布局 297
18.2.3 制作个人网站首页的左边栏目（leftCol） 299
18.2.4 制作个人网站首页的中间栏目（midCol） 301
18.2.5 制作个人网站首页的右边栏目（rightCol） 304
18.3 小结 305
第19章 DIV+CSS页面布局实例：制作个人博客 306
19.1 个人博客网站构架分析 306
19.2 个人博客首页的总体布局 308
19.2.1 建立网站文件夹以及构建整体网页的结构 308
19.2.2 构建整体网页的布局 309
19.2.3 实现mian容器中栏目的左中右浮动布局 309
19.3 制作个人博客的首页头部（header） 310
19.4 制作个人博客的着页左边栏目（leftCol） 311
19.4.1 制作左边栏中网文的结构 312
19.4.2 制作左边栏中网文的样式 314
19.4.3 完成leftCol其余部分的布局 316
19.5 制作个人博客首页的中间栏目（midCol） 318
19.6 制作个人博客首页的右边栏目（rightCol） 321
19.7 制作个人博客分页 322
19.7.1 制作个人博客网站的文章页（article.html）分页 322
19.7.2 制作个人博客网站的留言板（guestbook.html）分页 327
19.7.3 制作个人博客网站的主题页（archives.html）分页 327
19.3.4 制作个人博客关于（about.html）分页 329
19.8 小结 331
第20章 DIV+CSS页面布局实例：制作服饰商城 332
20.1 服饰商城构架分析 332
20.2 制作服饰商城首页的总体布局 333
20.2.1 建立网站文件夹以及构建整体网页的结构 333
20.2.2 构建整体网页的布局 334
20.3 制作服饰商城首页头部（header） 335
20.4 制作服饰商城导航（nav） 336
20.5 制作服饰商城第一栏（firstCol） 338
20.5.1 制作服饰商城第一栏的布局 338
20.5.2 制作服饰商城第一栏的左边部分sortList 339
20.5.3 制作服饰商城第一栏的中间部分midFlash和右边部分rightBox 341
20.6 制作服饰商城第二栏（secondCol） 344
20.6.1 制作服饰商城第二栏的布局 344
20.6.2 制作服饰商城第二栏的左列secondColLeft 344
20.6.3 制作服饰商城第二栏的右列secondColRight 347
20.7 制作服饰商城购物指导部分（guide） 350
20.8 制作服饰商城的商品列表页（list.html）分页 352
20.8.1 制作list.html的总体布局 353
20.8.2 制作list.html的左列subLeftCol 353
20.8.3 制作list.html的左列subRightCol 357
20.9 制作服饰商城的商品详细页（detail.html）分页 359
20.9.1 制作detail.html的右边栏目 359
20.9.2 制作产品评论栏目 362
20.10 小结 365
第21章 DIV+CSS页面布局实例：制作门户网站 366
21.1 门户网站构架分析 366
21.2 制作门户网站首页的总体布局 367
21.2.1 建立网站文件夹以及构建整体网页的结构 367
21.2.2 构建整体网页的布局 367
21.3 制作门户网站首页头部（header） 368
21.4 制作门户网站首页的第一栏（firstCol） 370
21.4.1 制作firstCol的总体布局 370
21.4.2 制作firstCol的左边栏firstColLeft 371
21.4.3 制作firstCol的中间栏firstColMid 374
21.4.4 制作firstCol的右边栏firstColRight 378
21.5 制作门户网站首页的精选图片（picture） 381
21.6 制作门户网站首页的校园栏目和教育栏目（ceWrapper） 382
21.6.1 制作门户网站首页的校园栏目 382
21.6.2 制作门户网站首页的教育栏目 385
21.7 制作门户网站首页的四栏布局（fourCols） 388
21.8 制作门户网站首页的广告位（adImg）和两栏布局（twoCols） 392
21.9 制作门户网站首页的尾部（footer） 397
21.10 制作门户网站的资讯内容页（content.html） 398
21.10.1 制作contenthtml的总体布局 398
21.10.2 制作content.html的左列leftCol 399
21.10.3 制作content.html的右列rightCol 403
21.11 小结 406