第1章 CSS样式设计基础 1
1.1 网页设计需要学什么 1
1.1.1 学习HTML 1
1.1.2 掌握DIV布局 2
1.1.3 学习CSS 2
1.1.4 学习JavaScript 3
1.2 设计良好的结构 4
1.2.1 一个简单的文档必须包含的内容 4
1.2.2 认识标签 5
1.2.3 选用标签 7
1.2.4 使用div和span 7
1.2.5 使用id和class 8
1.2.6 设置文档类型 9
1.2.7 认识显示模式 9
1.3 初识CSS 11
1.3.1 CSS发展历史 11
1.3.2 CSS优势 12
1.3.3 CSS样式 12
1.3.4 应用CSS样式 12
1.3.5 CSS样式表 14
1.3.6 导入样式表 14
1.3.7 CSS注释和格式化 14
1.3.8 设计第一个样式示例 15
1.4 CSS选择器 16
1.4.1 认识CSS选择器 16
1.4.2 标签选择器 16
1.4.3 ID选择器 17
1.4.4 类选择器 18
1.4.5 指定选择器 20
1.4.6 包含选择器 20
1.4.7 子选择器 22
1.4.8 相邻选择器 22
1.4.9 兄弟选择器 23
1.4.10 分组选择器 25
1.4.11 伪选择器 25
1.4.12 属性选择器 26
1.4.13 通用选择器 28
1.5 CSS特性 28
1.5.1 层叠性 28
1.5.2 继承性 29
第2章 使用CSS设置字体和文本样式 30
2.1 字体和文本样式基础 30
2.1.1 字体类型 30
2.1.2 字体大小 32
2.1.3 字体颜色 35
2.1.4 字体粗细 35
2.1.5 斜体字体 36
2.1.6 装饰线 37
2.1.7 字体大小写 38
2.1.8 文本水平对齐 39
2.1.9 文本垂直对齐 41
2.1.10 字间距和词间距 42
2.1.11 行高 43
2.1.12 首行缩进 45
2.2 实战案例 47
2.2.1 模拟百度Logo样式 47
2.2.2 定义标题样式 49
2.2.3 定义正文样式 51
2.2.4 设计文本块样式 52
2.2.5 设计新闻版面 55
2.2.6 设计图文版面 59
2.2.7 设计单页版式 63
第3章 使用CSS设置图片样式 66
3.1 图片样式基础 66
3.1.1 图片边框 66
3.1.2 图片大小 68
3.1.3 图片对齐 69
3.1.4 半透明图片 71
3.1.5 圆角图片 72
3.1.6 阴影图片 73
3.2 实战案例 75
3.2.1 设计镶边效果 75
3.2.2 设计水印效果 76
3.2.3 图文混排 78
3.2.4 图片布局 81
3.2.5 多图版式 84
3.2.6 圆角栏目 87
3.2.7 设计个人简历1 90
3.2.8 设计个人简历2 94
第4章 使用CSS控制背景图像 98
4.1 背景样式基础 98
4.1.1 背景颜色 98
4.1.2 版块配色 99
4.1.3 设置背景图像 103
4.1.4 背景平铺 104
4.1.5 背景定位 106
4.1.6 固定背景 109
4.1.7 定位参考 110
4.1.8 背景裁剪 112
4.1.9 背景大小 113
4.1.10 多背景图 115
4.2 实战案例 116
4.2.1 设计带花纹的网页边框 116
4.2.2 设计圆边页面 121
4.2.3 设计分栏版式 125
4.2.4 设计滑动门菜单 127
4.2.5 设计焦点图 130
第5章 使用CSS定义链接样式 133
5.1 链接样式基础 133
5.1.1 设置链接样式 133
5.1.2 定义下划线样式 134
5.1.3 定义类型标识样式 136
5.1.4 定义按钮样式 137
5.1.5 案例：基本链接样式应用 140
5.2 实战案例 144
5.2.1 鼠标光标样式 144
5.2.2 文档类型提示 147
5.2.3 工具提示样式 148
5.2.4 立体菜单栏 150
5.2.5 设计CSS Sprites导航栏 152
5.2.6 选项卡 156
5.2.7 浏览大图 160
第6章 使用CSS设计列表样式 163
6.1 列表样式基础 163
6.1.1 设置项目符号 163
6.1.2 自定义项目图标 166
6.1.3 定义列表项目的版式 167
6.2 实战案例 168
6.2.1 设计新闻栏目 168
6.2.2 设计导航菜单 172
6.2.3 设计多级菜单 175
6.2.4 设计列表版式 178
6.2.5 使用列表设计图文混排页面 181
6.2.6 设计水平滑动菜单 187
6.2.7 设计垂直滑动菜单 189
6.2.8 设计Tab面板 191
6.2.9 设计下拉式面板 193
第7章 使用CSS设计表格样式 196
7.1 表格样式基础 196
7.1.1 设置表格背景色和前景色 196
7.1.2 设置表格边框 198
7.1.3 设置单元格边距 199
7.1.4 设置表格标题的位置 200
7.1.5 隐藏空单元格 201
7.2 实战案例 202
7.2.1 设计课程表 202
7.2.2 设计通讯录 204
7.2.3 设计月历 208
7.2.4 设计分组表格 212
第8章 使用CSS设计表单样式 218
8.1 表单样式基础 218
8.1.1 定义表单字体样式 218
8.1.2 定义表单边框和边距样式 221
8.1.3 定义表单背景样式 223
8.2 实战案例 226
8.2.1 定义表单样式 226
8.2.2 设计下拉菜单样式 230
8.2.3 设计注册表 231
8.2.4 设计调查表 235
8.2.5 设计反馈表 241
第9章 使用 DIV＋CSS布局网页 245
9.1 CSS盒模型 245
9.1.1 定义边界 245
9.1.2 定义补白 248
9.1.3 定义边框 251
9.1.4 定义尺寸 253
9.2 CSS布局基础 255
9.2.1 定义显示类型 255
9.2.2 定义显示模式 255
9.2.3 网页布局样式 256
9.2.4 设置浮动显示 257
9.2.5 清除浮动 260
9.2.6 浮动嵌套 262
9.2.7 网页布局方法 263
9.3 实战案例 267
9.3.1 网站重构 267
9.3.2 设计两列网页 272
9.3.3 设计三列网页 277
第10章 使用CSS定位 282
10.1 CSS定位基础 282
10.1.1 设置定位显示 282
10.1.2 静态定位 283
10.1.3 绝对定位 283
10.1.4 相对定位 284
10.1.5 固定定位 285
10.1.6 定位包含框 286
10.1.7 设置定位偏移 289
10.1.8 设置层叠顺序 293
10.1.9 层叠上下文 295
10.2 实战案例 297
10.2.1 画册式网页定位 297
10.2.2 展厅式网页定位 301
10.2.3 书签式网页定位 306
第11章 网页版式设计与实战 311
11.1 HTML结构重构 311
11.1.1 设计基本结构 311
11.1.2 SEO结构优化 313
11.2 单列版式 314
11.3 两列版式 316
11.3.1 弹性版式 316
11.3.2 固宽版式 319
11.3.3 混合版式 320
11.4 三列版式 324
11.4.1 弹性版式 324
11.4.2 固宽版式 328
11.4.3 混合版式 329
11.4.4 多列等高 333
11.5 实战案例 336
11.5.1 设计单列固宽网页 336
11.5.2 设计单列弹性框架网页 341
11.5.3 设计两列弹性网页 347
11.5.4 设计三列弹性网页 352
第12章 使用CSS3布局网页 356
12.1 多列流动布局 356
12.1.1 设置列宽 356
12.1.2 设置列数 357
12.1.3 设置列间距 358
12.1.4 设置列边框样式 359
12.1.5 设置跨列显示 360
12.1.6 设置列高度 361
12.2 弹性盒布局 362
12.2.1 定义Flexbox 363
12.2.2 定义伸缩方向 365
12.2.3 定义行数 366
12.2.4 定义对齐方式 368
12.2.5 定义伸缩项目 370
12.3 实战案例 373
12.3.1 比较三种布局方式 373
12.3.2 设计可伸缩网页模板 377
12.3.3 设计多列网页 381
12.3.4 设计HTML5应用网页模板 383
第13章 使用CSS3设计动画 387
13.1 设计2D变换 387
13.1.1 定义旋转 387
13.1.2 定义缩放 388
13.1.3 定义移动 389
13.1.4 定义倾斜 391
13.1.5 定义矩阵 392
13.1.6 定义变换原点 393
13.2 设计3D变换 394
13.2.1 定义位移 395
13.2.2 定义缩放 397
13.2.3 定义旋转 398
13.3 设计过渡动画 401
13.3.1 设置过渡属性 401
13.3.2 设置过渡时间 402
13.3.3 设置延迟时间 402
13.3.4 设置过渡动画类型 403
13.3.5 设置触发方式 404
13.4 设计帧动画 410
13.4.1 设置关键帧 410
13.4.2 设置动画属性 411
13.5 实战案例 414
13.5.1 设计挂图 414
13.5.2 设计高亮显示 415
13.5.3 设计3D几何体 416
13.5.4 设计旋转的盒子 419
13.5.5 设计可折叠面板 421
13.5.6 设计翻转广告 422
13.5.7 设计跑步动画 424
第14章 设计可响应的移动网页 426
14.1 响应式设计基础 426
14.1.1 响应式设计流程 426
14.1.2 设计响应式图片 427
14.1.3 定义媒体类型 429
14.1.4 使用＠media 430
14.1.5 在＜link＞中定义媒体查询 433
14.1.6 设计响应式布局 437
14.2 实战案例 441
14.2.1 根据设备控制显示内容 441
14.2.2 设计伸缩菜单 444
14.2.3 设计可响应网页模板 446
14.2.4 设计响应式网站首页 448
第15章 使用JavaScript控制CSS样式 452
15.1 在网页中使用JavaScript 452
15.1.1 使用＜script＞标签 452
15.1.2 脚本位置 454
15.1.3 延迟执行 455
15.1.4 异步响应 456
15.1.5 脚本样式与CSS样式 457
15.2 获取网页对象 458
15.2.1 获取元素 458
15.2.2 使用CSS选择器 460
15.2.3 遍历DOM节点 461
15.2.4 遍历元素 462
15.3 操作类样式 464
15.3.1 获取类样式 464
15.3.2 添加类样式 465
15.3.3 删除类样式 466
15.4 读写行内样式 467
15.4.1 CSS脚本特性 467
15.4.2 使用style对象 468
15.5 读写样式表中样式 473
15.5.1 使用styleSheets对象 474
15.5.2 访问样式 475
15.5.3 读取选择符 477
15.5.4 编辑样式 478
15.5.5 添加样式 479
15.5.6 读取最终样式 480
15.6 获取尺寸 483
15.6.1 获取对象大小 483
15.6.2 获取可视区域大小 484
15.6.3 获取偏移大小 487
15.6.4 获取窗口大小 488
15.7 获取位置 489
15.7.1 获取偏移位置 489
15.7.2 获取相对位置 491
15.7.3 获取定位位置 492
15.7.4 获取鼠标指针位置 492
15.7.5 获取鼠标指针相对位置 493
15.7.6 获取滚动条位置 495
15.8 设置位置 495
15.8.1 设置偏移位置 495
15.8.2 设置相对位置 496
15.8.3 设置滚动条位置 497
15.9 显示 497
15.9.1 可见性 497
15.9.2 透明度 498
15.10 实战案例 499
15.10.1 使用定时器 499
15.10.2 设计运动 502
15.10.3 设计渐变 503
15.10.4 设计换肤 504
第16章 使用CSS设计XML文档样式 507
16.1 XML样式基础 507
16.1.1 XML文档结构 507
16.1.2 嵌入CSS样式 509
16.1.3 使用CSS样式表 510
16.2 实战案例 512
16.2.1 设计特效文字 512
16.2.2 设计表格样式 513
16.2.3 设计图文页面 516
16.2.4 设计正文版面 517