第Ⅰ篇 基础入门 3
第1章 CSS样式入门 3
1.1 认识CSS 4
1.1.1 CSS的功能 4
1.1.2 浏览器与CSS 4
1.1.3 CSS的发展历史 5
1.2 CSS常用单位 5
1.2.1 颜色单位 5
1.2.2 长度单位 9
1.3 编辑和浏览CSS 10
1.3.1 手工编写CSS 10
1.3.2 使用Dreamweaver编写CSS 11
1.4 在HTML中调用CSS的方法 13
1.4.1 行内样式 13
1.4.2 内嵌样式 14
1.4.3 链接样式 15
1.4.4 导入样式 16
1.5 调用方法的优先级 17
1.5.1 行内样式和内嵌样式的比较 18
1.5.2 内嵌样式和链接样式的比较 18
1.5.3 链接样式和导入样式的比较 19
1.6 综合案例——制作产品销售统计表 20
1.7 大神解惑 22
1.8 跟我练练手 22
第2章 CSS3样式的基本语法 23
2.1 CSS基础语法 24
2.1.1 CSS构造规则 24
2.1.2 CSS的注释 24
2.2 CSS的常用选择器 25
2.2.1 标签选择器 25
2.2.2 类选择器 26
2.2.3 ID选择器 27
2.2.4 选择器的声明 27
2.3 综合案例——制作炫彩网站Logo 28
2.4 大神解惑 31
2.5 跟我练练手 31
第3章 CSS3的高级特性 33
3.1 复合选择器 34
3.1.1 全局选择器 34
3.1.2 交集选择器 35
3.1.3 并集选择器 35
3.1.4 继承选择器 36
3.2 CSS3新增的选择器 37
3.2.1 属性选择器 37
3.2.2 结构伪类选择器 39
3.2.3 UI元素状态伪类选择器 40
3.2.4 伪类选择器 42
3.3 CSS的继承特性 43
3.3.1 继承关系 43
3.3.2 CSS继承的运用 44
3.4 CSS的层叠特性 45
3.4.1 同一选择器被多次定义的处理 45
3.4.2 同一标签运用不同类型选择器的处理 46
3.5 综合案例——制作新闻菜单 47
3.6 大神解惑 49
3.7 跟我练练手 50
第Ⅱ篇 核心技术 53
第4章 使用CSS3控制网页字体与段落样式 53
4.1 通过CSS控制字体样式 54
4.1.1 控制字体类型 54
4.1.2 定义字体大小 55
4.1.3 定义字体风格 56
4.1.4 控制文字的粗细 57
4.1.5 将小写字母转换为大写字母 58
4.1.6 设置字体的复合属性 59
4.1.7 定义文字的颜色 59
4.2 CSS3中新增的文本高级样式 61
4.2.1 添加文本的阴影效果 61
4.2.2 设置文本溢出效果 62
4.2.3 控制文本的换行 63
4.2.4 设置字体尺寸 64
4.3 通过CSS控制文本间距与对齐方式 65
4.3.1 设置单词之间的间隔 65
4.3.2 设置字符之间的间隔 66
4.3.3 为文本添加下划线、上划线、删除线 67
4.3.4 设置垂直对齐方式 68
4.3.5 转换文本的大小写 69
4.3.6 设置文本的水平对齐方式 70
4.3.7 设置文本的缩进效果 72
4.3.8 设置文本的行高 73
4.3.9 文本的空白处理 74
4.3.10 文本的反排 75
4.4 综合案例1——设置网页标题 76
4.5 综合案例2——制作新闻页面 78
4.6 大神解惑 79
4.7 跟我练练手 80
第5章 使用CSS控制网页图片样式 81
5.1 图片缩放 82
5.1.1 通过描述标记width和height缩放图片 82
5.1.2 使用CSS3中的max-width和max-height缩放图片 82
5.1.3 使用CSS3中的width和height缩放图片 83
5.2 设置图片的对齐方式 84
5.2.1 设置图片横向对齐 84
5.2.2 设置图片纵向对齐 85
5.3 图文混排 87
5.3.1 设置文字环绕效果 87
5.3.2 设置图片与文字的间距 88
5.4 综合案例1——制作学校宣传单 90
5.5 综合案例2——制作简单图文混排网页 92
5.6 大神解惑 94
5.7 跟我练练手 94
第6章 使用CSS控制网页背景与边框样式 95
6.1 使用CSS控制网页背景 96
6.1.1 设置背景颜色 96
6.1.2 设置背景图片 97
6.1.3 背景图片重复 98
6.1.4 背景图片显示 100
6.1.5 背景图片位置 101
6.2 CSS3中新增控制网页背景属性 102
6.2.1 背景图片大小 102
6.2.2 背景显示区域 104
6.2.3 背景图片裁剪区域 105
6.2.4 背景复合属性 107
6.3 使用CSS控制边框样式 108
6.3.1 设置边框样式 108
6.3.2 设置边框颜色 109
6.3.3 设置边框线宽 110
6.3.4 设置边框复合属性 112
6.4 CSS3中新增边框圆角效果 113
6.4.1 设置圆角边框 113
6.4.2 指定两个圆角半径 114
6.4.3 绘制4个不同圆角边框 115
6.4.4 绘制不同种类的边框 117
6.5 CSS3中的渐变效果 119
6.5.1 线性渐变效果 119
6.5.2 径向渐变效果 121
6.6 综合案例1——制作简单公司主页 122
6.7 综合案例2——制作简单生活资讯主页 126
6.8 大神解惑 127
6.9 跟我练练手 128
第7章 使用CSS3美化网页浏览效果 129
7.1 使用CSS3美化超链接 130
7.1.1 改变超级链接基本样式 130
7.1.2 设置带有提示信息的超级链接 131
7.1.3 设置超级链接的背景图 132
7.1.4 设置超级链接的按钮效果 133
7.2 使用CSS3美化鼠标特效 134
7.2.1 使用CSS3控制鼠标箭头 134
7.2.2 设置鼠标变幻式超链接 135
7.2.3 设置网页页面滚动条 136
7.3 综合案例1——图片版本超级链接 138
7.4 综合案例2——鼠标特效 140
7.5 综合案例3——制作一个简单的导航栏 142
7.6 大神解惑 144
7.7 跟我练练手 144
第8章 使用CSS控制表格和表单样式 145
8.1 美化表格样式 146
8.1.1 设置表格边框样式 146
8.1.2 设置表格边框宽度 148
8.1.3 设置表格边框颜色 149
8.2 美化表单样式 150
8.2.1 美化表单中的元素 150
8.2.2 美化提交按钮 152
8.2.3 美化下拉菜单 153
8.3 综合案例1——制作用户登录页面 155
8.4 综合案例2——制作用户注册页面 156
8.5 大神解惑 159
8.6 跟我练练手 159
第9章 控制列表和菜单样式 161
9.1 美化项目列表的样式 162
9.1.1 美化无序列表 162
9.1.2 美化有序列表 163
9.1.3 美化自定义列表 165
9.1.4 制作图片列表 166
9.1.5 缩进图片列表 167
9.1.6 列表复合属性 168
9.2 使用CSS制作网页菜单 169
9.2.1 制作无须表格的菜单 169
9.2.2 制作水平和垂直菜单 171
9.3 综合案例1——模拟soso导航栏 173
9.4 综合案例2——将段落转变成列表 177
9.5 大神解惑 178
9.6 跟我练练手 178
第10章 使用滤镜美化网页元素 179
10.1 滤镜概述 180
10.2 设置基本滤镜效果 181
10.2.1 高斯模糊滤镜 181
10.2.2 明暗度滤镜 182
10.2.3 对比度滤镜 183
10.2.4 阴影滤镜 184
10.2.5 灰度滤镜 185
10.2.6 反相滤镜 186
10.2.7 透明度滤镜 187
10.2.8 饱和度滤镜 188
10.2.9 深褐色滤镜 189
10.3 使用复合滤镜效果 190
10.4 大神解惑 191
10.5 跟我练练手 192
第Ⅲ篇 网页布局 195
第11章 CSS定位与DIV布局核心技术 195
11.1 了解块级元素和行内级元素 196
11.1.1 块级元素和行内级元素的应用 196
11.1.2 div元素和span元素的区别 198
11.2 盒子模型 198
11.2.1 盒子模型的概念 198
11.2.2 定义网页border区域 199
11.2.3 定义网页padding区域 200
11.2.4 定义网页margin区域 201
11.3 弹性盒模型 204
11.3.1 定义盒子布局方向 205
11.3.2 定义盒子布局顺序 206
11.3.3 定义盒子布局位置 208
11.3.4 定义盒子弹性空间 209
11.3.5 管理盒子空间 211
11.3.6 盒子空间的溢出管理 213
11.4 综合案例1——图文排版效果 214
11.5 综合案例2——淘宝导购菜单 217
11.6 大神解惑 219
11.7 跟我练练手 220
第12章 CSS+DIV盒子的浮动与定位 221
12.1 定义DIV 222
12.1.1 什么是DIV 222
12.1.2 创建DIV 222
12.2 盒子的定位 223
12.2.1 静态定位 223
12.2.2 相对定位 224
12.2.3 绝对定位 225
12.2.4 固定定位 226
12.2.5 盒子的浮动 227
12.3 其他CSS布局定位方式 229
12.3.1 溢出定位 229
12.3.2 隐藏定位 231
12.3.3 z-index空间定位 233
12.4 新增CSS3多列布局 234
12.4.1 设置列宽度 234
12.4.2 设置列数 236
12.4.3 设置列间距 237
12.4.4 设置列边框样式 238
12.5 综合案例1——定位网页布局样式 240
12.6 综合案例2——制作阴影文字效果 243
12.7 大神解惑 244
12.8 跟我练练手 244
第13章 固定宽度网页布局剖析与制作 245
13.1 CSS排版观念 246
13.1.1 将页面用div分块 246
13.1.2 设置各块位置 246
13.1.3 用CSS定位 247
13.2 固定宽度网页剖析与布局 250
13.2.1 网页单列布局模式 250
13.2.2 网页1-2-1型布局模式 254
13.2.3 网页1-3-1型布局模式 258
13.3 大神解惑 261
13.4 跟我练练手 262
第14章 自动缩放网页布局剖析与制作 263
14.1 自动缩放网页1-2-1型布局模式 264
14.1.1 “1-2-1”等比例变宽布局 264
14.1.2 “1-2-1”单列变宽布局 265
14.2 自动缩放网页1-3-1型布局模式 266
14.2.1 “1-3-1”三列宽度等比例布局 266
14.2.2 “1-3-1”单侧列宽度固定的变宽布局 266
14.2.3 “1-3-1”中间列宽度固定的变宽布局 270
14.2.4 “1-3-1”双侧列宽度固定的变宽布局 273
14.2.5 “1-3-1”中列和左侧列宽度固定的变宽布局 277
14.3 分列布局背景色的使用 280
14.3.1 设置固定宽度布局的列背景色 280
14.3.2 设置特殊宽度变化布局的列背景色 282
14.4 综合案例1——单列宽度变化布局 284
14.5 综合案例2——多列等比例宽度变化布局 285
14.6 大神解惑 288
14.7 跟我练练手 288
第Ⅳ篇 高级技能 291
第15章 过渡和动画效果 291
15.1 了解过渡效果 292
15.2 添加过渡效果 292
15.3 了解动画效果 295
15.4 添加动画效果 296
15.5 大神解惑 297
15.6 跟我练练手 298
第16章 2D和3D效果 299
16.1 了解2D转换效果 300
16.2 添加2D转换效果 300
16.2.1 添加2D移动效果 300
16.2.2 添加2D旋转效果 301
16.2.3 添加2D缩放效果 302
16.2.4 添加2D倾斜效果 303
16.2.5 添加综合变幻效果 304
16.3 添加3D转换效果 305
16.4 大神解惑 308
16.5 跟我练练手 308
第17章 创建响应式页面 309
17.1 了解弹性盒子 310
17.2 使用弹性盒子 310
17.3 设置弹性子元素的位置 313
17.4 设置弹性子元素的横向对齐方式 314
17.5 设置弹性子元素的纵向对齐方式 319
17.6 设置弹性子元素的换行方式 321
17.7 综合案例——使用弹性盒子创建响应式页面 323
17.8 大神解惑 325
17.9 跟我练练手 326
第Ⅴ篇 综合案例 329
第18章 商业门户类网站赏析 329
18.1 整体设计 330
18.1.1 颜色应用分析 330
18.1.2 架构布局分析 331
18.2 主要模块设计 331
18.2.1 网页整体样式插入 331
18.2.2 网页局部样式 333
18.2.3 顶部模块样式代码分析 340
18.2.4 中间主体代码分析 341
18.2.5 底部模块分析 344
18.3 网站调整 345
18.3.1 部分内容调整 345
18.3.2 模块调整 345
18.3.3 调整后预览测试 347
第19章 设计在线购物类网页 349
19.1 整体布局 350
19.1.1 设计分析 350
19.1.2 排版架构 350
19.2 主要模块设计 351
19.2.1 Logo与导航区 351
19.2.2 Banner与资讯区 353
19.2.3 产品类别区域 354
19.2.4 页脚区域 355
第20章 设计企业门户类网页 357
20.1 构思布局 358
20.1.1 设计分析 358
20.1.2 排版架构 358
20.2 主要模块设计 359
20.2.1 Logo与导航菜单 359
20.2.2 Banner区 360
20.2.3 资讯区 361
20.2.4 版权信息 363
第21章 设计娱乐休闲类网页 365
21.1 整体设计 366
21.1.1 应用设计分析 366
21.1.2 架构布局分析 367
21.2 主要模块设计 368
21.2.1 网页整体样式插入 368
21.2.2 顶部模块代码分析 369
21.2.3 视频模块代码分析 370
21.2.4 评论模块代码分析 371
21.2.5 热门推荐模块代码分析 373
21.2.6 底部模块分析 375
21.3 网页调整 376
21.3.1 部分内容调整 376
21.3.2 调整后预览测试 377
第22章 设计图像影音类网页 379
22.1 整体设计 380
22.1.1 颜色应用分析 380
22.1.2 架构布局分析 381
22.2 主要模块设计 382
22.2.1 样式代码分析 382
22.2.2 顶部模块样式代码分析 386
22.2.3 网站主体模块代码分析 387
22.2.4 底部模块分析 391
22.3 网站调整 392
22.3.1 部分内容调整 392
22.3.2 模块调整 392
22.3.3 调整后预览测试 395