第1篇CSS基础篇 2
第1章 CSS的初步体验 2
1.1 CSS的概念 3
1.1.1 网页中标记的概念 3
1.1.2 HTML与CSS的优缺点 5
1.1.3 浏览器对CSS的支持 7
1.2 网页设计中的CSS 8
1.2.1 CSS能做什么 8
1.2.2 CSS的局限性是什么 9
1.3 网站CSS赏析 9
1.3.1 案例1——商务网站CSS样式赏析 9
1.3.2 案例2——游戏网站CSS样式赏析 10
1.4 编写我的第一个CSS样式 10
1.4.1 从零开始 11
1.4.2 加入图片 13
1.4.3 加入CSS代码控制图片 14
1.4.4 CSS的注释 14
1.5 CSS语法书写标准及功能 15
1.5.1 规则块 15
1.5.2 ＠规则 15
1.5.3 规则集 17
1.5.4 关键字 17
1.5.5 字符串 18
1.5.6 CSS样式标准 19
高手私房菜 19
技巧：Dreamweaver的多种视图方式 19
第2章 CSS样式核心基础 21
2.1 使用CSS选择器 22
2.1.1 标记选择器 22
2.1.2 类别选择器 23
2.1.3 ID选择器 26
2.2 在HTML中调用CSS的方法 27
2.2.1 直接定义CSS样式 27
2.2.2 内嵌式CSS样式 28
2.2.3 链接式CSS样式 29
2.2.4 导入外部CSS样式 31
2.2.5 CSS样式生效的优先级 33
高手私房菜 33
技巧1：使用图形工具创建CSS样式 33
技巧2： CSS字体属性简写规则 34
第3章 网页样式代码的生成方法 35
3.1 从零开始手工编写 36
3.1.1 手工编写HTML文件 36
3.1.2 控制网页内容显示 38
3.2 完整网页代码分析 39
3.2.1 获取网页代码 40
3.2.2 查看网页样式代码 40
3.3 使用Dreamweaver辅助工具创建页面 41
3.4 在Dreamweaver中新建CSS样式 41
3.5 在Dreamweaver中编辑CSS样式 44
3.6 为图像创建CSS样式 45
高手私房菜 46
技巧：复制和粘贴文本的方式 46
第4章 用CSS设置文本样式 47
4.1 样式的参数单位 48
4.2 设置网页文本的基本样式 51
4.2.1 网页文本颜色的定义 51
4.2.2 网页文本字体的定义 52
4.2.3 设置具体文字的字体 54
4.2.4 设置文字的倾斜效果 55
4.2.5 设置文字的加粗效果 56
4.3 设置网页文本的行高与间距 57
4.3.1 设置网页文字的间距 58
4.3.2 设置网页文字行间距 59
4.3.3 设置网页文字段落间距 60
4.4 设置网页文本的对齐方式 61
4.4.1 设置文本的水平对齐方式 62
4.4.2 设置文本的垂直对齐方式 63
4.5 设置文字与背景的颜色 64
4.5.1 使用样式参数进行设置 64
4.5.2 更简洁的解决方案 66
4.6 设置其他网页文本样式 68
4.6.1 英文字母大小写自动转换效果 68
4.6.2 网页文字的装饰效果 69
4.6.3 段落首行缩进效果 70
高手私房菜 72
技巧：标题的图像替换 72
第5章 用CSS设置网页图像特效 73
5.1 设置图片边框 74
5.1.1 图片边框的基本属性 74
5.1.2 为不同的边框分别设置样式 75
5.2 图片缩放功能的实现 77
5.3 图文混排 79
5.3.1 文字环绕 79
5.3.2 设置图片与文字的间距 81
5.4 案例——个人养生网页 83
5.5 设置图片与文字的对齐方式 85
5.5.1 横向对齐方式 85
5.5.2 纵向对齐方式 87
高手私房菜 89
技巧1：解决在浏览器中图片无法显示的问题 89
技巧2：解决图片超出撑破DIV的问题 90
第6章 用CSS设置网页背景颜色与背景图像 91
6.1 设置背景颜色 92
6.2 设置背景图像 93
6.3 设置背景图像平铺 94
6.4 设置背景图像位置 96
6.5 设置固定的背景图像位置 99
6.6 设置图像替换标题 100
6.7 设置滑动门效果的标题 102
高手私房菜 104
技巧：网页文字颜色的搭配技巧 104
第7章 掌握CSS的高级特性 105
7.1 复合选择器 106
7.1.1 “交集”选择器 106
7.1.2 “并集”选择器 107
7.1.3 后代选择器 109
7.2 CSS的继承特性 110
7.2.1 继承关系 110
7.2.2 CSS继承的运用 112
7.3 CSS的层叠特性 113
高手私房菜 116
技巧1：继承性 116
技巧2：组选择器 116
第2篇CSS+DIV美化和布局篇 118
第8章 CSS定位与DIV布局核心技术 118
8.1 块级元素和行内级元素 119
8.1.1 块级元素和行内级元素的不同 119
8.1.2 DIV元素和Span元素 121
8.2 使用DIV标记与span标记布局网页级元素 122
8.3 盒子模型 124
8.3.1 盒子模型的概念 124
8.3.2 网页border区域定义 125
8.3.3 网页padding区域定义 128
8.3.4 网页margin区域定义 130
8.4 box类型和display属性 131
8.4.1 HTML元素默认的box类型 132
8.4.2 块级元素和块级box 133
8.4.3 行内级元素和行内级box 133
8.4.4 插入式box 134
8.5 可视性 135
8.6 案例1——图文层叠效果 137
8.7 案例2——歌曲编辑列表 140
高手私房菜 142
技巧1：什么时候使用Visibility或者Display属性 142
技巧2： CSS border的默认值 142
第9章 CSS+DIV盒子的浮动与定位 143
9.1 定义DIV 144
9.1.1 什么是DIV 144
9.1.2 插入DIV 144
9.1.3 DIV的嵌套和固定格式 146
9.2 CSS布局定位 146
9.2.1 浮动定位 147
9.2.2 position定位 149
9.3 盒子的浮动 151
9.4 盒子的定位 153
9.4.1 静态定位 154
9.4.2 相对定位 154
9.4.3 绝对定位 156
9.4.4 固定定位 157
9.5 可视化盒模型 157
9.5.1 盒子模型 157
9.5.2 视觉可视化模型 158
9.5.3 空白边叠加 158
9.6 固定宽度网页剖析与布局 159
9.6.1 网页单列布局模式 160
9.6.2 网页1-2-1型布局模式 164
9.6.3 网页1-3-1型布局模式 169
9.6.4 网页1-（（1-2）+1）-1型布局模式 171
9.7 自动缩放网页剖析与布局 174
9.7.1 网页1-2-1型布局模式 174
9.7.2 网页1-3-1型布局模式 176
9.7.3 变宽布局方法总结 178
9.7.4 分列布局背景色的设置 178
高手私房菜 180
技巧1：CSS在容器内定位 180
技巧2：框架中百分比的关系 180
第10章 CSS+DIV美化与布局实战 181
10.1 框架搭建 182
10.2 案例1——企业门户网站 183
10.2.1 设计分析 183
10.2.2 布局分析 183
10.2.3 制作步骤 183
10.3 案例2——时政新闻网站 196
10.3.1 设计分析 196
10.3.2 布局分析 196
10.3.3 制作步骤 197
高手私房菜 201
技巧1：控制网页背景颜色 201
技巧2：控制网页背景图片以及显示方式 202
第3篇综合应用篇 204
第11章CSS滤镜的综合应用 204
11.1使用CSS滤镜 205
11.1.1 Alpha滤镜（透明度滤镜） 205
11.1.2 Blur滤镜（模糊滤镜） 208
11.1.3 MotionBlur滤镜（运动模糊滤镜） 209
11.1.4 Dropshadow滤镜（阴影滤镜） 211
11.1.5 Shadow滤镜（文字阴影滤镜） 212
11.1.6 Flip滤镜（翻转滤镜） 213
11.1.7 Glow滤镜（光晕滤镜） 215
11.1.8 Gray滤镜（灰度滤镜） 216
11.1.9 Invert滤镜（可视化属性翻转滤镜） 217
11.1.10 Xray滤镜（X光滤镜） 218
11.1.11 Mask滤镜（遮罩滤镜） 219
11.1.12 Wave滤镜（波浪滤镜） 221
11.2 CSS 3中其他模块的新增属性 222
11.2.1@media 222
11.2.2 Columns 224
11.2.3@font-face 226
11.2.4 Speech 226
11.3案例1——制作商务类网站 228
11.3.1设计分析 228
11.3.2制作步骤 228
11.4案例2——制作娱乐类网站 234
11.4.1案例分析 234
11.4.2制作步骤 234
高手私房菜 240
技巧：使用滤镜控制图片的颜色变化 240
第12章 CSS3与HTML的综合应用 241
12.1使用CSS滤镜 242
12.1.1 HTML基本结构 242
12.1.2 HTML基本语法 243
12.2 CSS3与HTML的结合 244
12.3 案例1——渐变式数据表 245
12.4 案例2——浮雕式链接特效 246
12.5 案例3——网页文字阴影特效 248
12.6 案例4——古文诗画特效 249
高手私房菜 252
技巧1：图片的标题 252
技巧2：去掉了CSS标签的type属性 252
第13章 CSS 3与JavaScript的综合应用 253
13.1 JavaScript概述 254
13.1.1 HTML基本结构 254
13.1.2 JavaScript的应用范围 255
13.2 JavaScript的语法基础 255
13.2.1 JavaScript的基本架构 256
13.2.2 JavaScript的基本语法 257
13.2.3 数据类型和变量 257
13.2.4 表达式和运算符 258
13.2.5 基本语句 260
13.3 应用Spry构件 262
13.3.1 HTML基本结构 262
13.3.2 插入Spry菜单 263
13.3.3 插入Spry选项卡式面板 264
13.3.4 插入Spry折叠式构件 264
13.3.5 插入Spry可折叠面板 264
13.4 案例1——在网页中应用Spry构件 265
13.4.1 设计分析 265
13.4.2 制作步骤 265
13.4.3 案例总结 267
13.5 案例2——制作婚纱摄影网站 267
13.5.1 案例分析 267
13.5.2 制作步骤 268
13.5.3 案例总结 273
高手私房菜 274
技巧：制作弹出信息窗口 274
第14章 CSS 3与jQuery的综合应用 275
14.1 jQuery基础 276
14.1.1 认识jQuery 276
14.1.2 jQuery的优势 276
14.2 jQuery代码的编写 277
14.2.1 搭建jQuery环境 277
14.2.2 编写简单的jQuery功能代码 278
14.2.3 jQuery代码规范 280
14.3 jQuery对象 280
14.3.1 jQuery对象简介 281
14.3.2 jQuery对象的应用 281
14.4 案例——制作幻灯片 282
14.4.1 设计分析 282
14.4.2 制作步骤 283
14.4.3 案例分析 285
高手私房菜 285
技巧1：直接使用谷歌和微软的服务器上的jQuery 285
技巧2：获取最新的Google CDN 286
第5章 CSS 3与XML的综合应用 287
15.1 XML基础 288
15.1.1 XML的特点 288
15.1.2 XML与HTML 290
15.1.3 XML基本语法 292
15.1.4 格式正确的XML文档 294
15.2 XML与CSS的链接 294
15.2.1 使用xml ： stylesheet指令 294
15.2.2 使用＠import指令 297
15.3 XML与CSS的应用 297
15.3.1 显示学生信息 297
15.3.2 实现隔行变色的表格 299
15.4 案例1——在HTML页面中调用XML数据 302
15.4.1 设计分析 302
15.4.2 制作步骤 302
15.5 案例2——制作企业网站 304
15.5.1 设计分析 304
15.5.2 制作步骤 304
高手私房菜 306
技巧：XML转义字符 306
第16章 CSS与Ajax的综合应用 307
16.1 Ajax简介 308
16.1.1 Ajax的关键元素 309
16.1.2 Ajax的优势 309
16.1.3 实现Ajax的步骤 310
16.1.4 使用CSS的必要性 310
16.2 Ajax应用 310
16.2.1 创建XMLHttpRequest对象 310
16.2.2 发出Ajax请求 311
16.2.3 处理服务器响应 312
16.2.4 使用CSS样式 313
16.3 案例1——使用Ajax实现页面特效 314
16.3.1 设计分析 314
16.3.2 制作步骤 314
16.4 案例2——实现可拖动DIV块 317
16.4.1 设计分析 317
16.4.2 制作步骤 317
高手私房菜 323
技巧1：编码问题 323
技巧2： IE下的reponseXML问题 324
第4篇实战篇 326
第17章 购物类网站布局分析 326
17.1 淘宝网整体布局分析 327
17.1.1 整体设计分析 327
17.1.2 排版架构分析 328
17.2 制作自己的网站——图书购物网站 332
17.2.1 版面架构分析 333
17.2.2 网站模块组成 334
高手私房菜 340
技巧：固定宽度汉字（词）折行 340
第18章 社交类网站布局分析 341
18.1 开心网整体布局 342
18.1.1 布局结构分析 342
18.1.2 版面架构分析 343
18.1.3 模块组成 343
18.2 制作自己的网站——社交网站 345
18.2.1 版面架构分析 345
18.2.2 网站模块组成 346
高手私房菜 350
技巧：如何减小CSS体积 350