《CSS3+DIV网页样式与布局案例课堂（第2版）》是2019年出版的图书，作者是刘春茂。
基本介绍
- 书名：CSS3+DIV网页样式与布局案例课堂（第2版）
- 作者：刘春茂
- ISBN：9787302515432
- 出版时间：2019年1月1日
出版信息
CSS3+DIV网页样式与布局案例课堂（第2版）
作者：刘春茂
定价：89元
印次：2-1
ISBN：9787302515432
出版日期：2019年1月1日
印刷日期：2018年12月28日
定价：89元
印次：2-1
ISBN：9787302515432
出版日期：2019年1月1日
印刷日期：2018年12月28日
内容简介
《CSS3+DIV网页样式与布局案例课堂(第2版)》以零基础讲解为宗旨，用实例引导读者深入学习，採取“基础知识→核心技术→高级套用→网页布局→项目案例实战”的讲解模式，深入浅出地讲解CSS3+DIV的各项技术及实战技能。《CSS3+DIV网页样式与布局案例课堂(第2版)》第Ⅰ篇主要讲解网页设计的必备技能、CSS样式入门和CSS3样式的基本语法等；第Ⅱ篇主要讲解设计网页字型与段落样式、设计网页图片样式、设计网页背景与框线样式、设计网页超级连结和滑鼠样式、设计表格和表单样式、设计列表和选单样式、使用滤镜美化网页元素等；第Ⅲ篇主要讲解CSS3的高级特性、过渡和动画效果、2D和3D变幻效果、CSS3和JavaScript的搭配套用、CSS3与XML的综合运用等；
目录
第Ⅰ篇基础知识
第1章网页设计的必备技能 3
1.1认识网页和网站 4
1.1.1什幺是网页 4
1.1.2什幺是网站 4
1.2网页中需要包含的要素 5
1.2.1需要HTML档案 5
1.2.2需要DIV层 5
1.2.3需要CSS定义网页样式 6
1.2.4需要JavaScript设定网页动画 6
1.2.5需要域名与伺服器空间 7
1.3一个简单网页的基本构成 7
1.3.1Head部分 8
1.3.2Body部分 8
1.3.3注释部分 8
1.4设计网页的总体流程 9
1.4.1网页规划 9
1.4.2蒐集资料 9
1.4.3设计网页的总体效果 10
1.4.4製作网页素材档案 11
1.4.5搭建网页DIV层 12
1.4.6使用CSS与JavaScript 12
1.4.7测试网页 13
1.5网站的种类与网页布局方式 14
1.5.1网站的种类 14
1.5.2网页布局方式 15
1.6在Photoshop中构建网页结构 16
1.7大神解惑 18
1.8跟我练练手 18
第2章CSS样式入门 19
2.1认识CSS 20
2.1.1CSS功能 20
2.1.2浏览器与CSS 20
2.1.3CSS发展历史 21
2.2CSS常用单位 21
2.2.1颜色单位 21
2.2.2长度单位 25
2.3编辑和浏览CSS 26
2.3.1案例1——手工编写CSS 26
2.3.2案例2——使用Dreamweaver编写CSS 27
2.4在HTML中调用CSS的方法 28
2.4.1案例3——行内样式 28
2.4.2案例4——内嵌样式 29
2.4.3案例5——连结样式 31
2.4.4案例6——导入样式 32
2.5调用CSS方法的优先权问题 33
2.5.1案例7——行内样式和内嵌样式比较 33
2.5.2案例8——内嵌样式和连结样式比较 34
2.5.3案例9——连结样式和导入样式比较 34
2.6综合案例——製作产品销售统计表 35
2.7大神解惑 37
2.8跟我练练手 37
第3章CSS3样式的基本语法 39
3.1CSS基本语法 40
3.1.1CSS构造规则 40
3.1.2CSS的注释 40
3.2CSS的常用选择器 40
3.2.1案例1——标籤选择器 41
3.2.2案例2——类选择器 41
3.2.3案例3——ID选择器 42
3.2.4案例4——选择器的声明 43
3.3综合案例——製作炫彩网站Logo 44
3.4大神解惑 46
3.5跟我练练手 47
第II篇核心技术
第4章设计网页字型与段落样式 51
4.1美化字型样式 52
4.1.1案例1——控制字型类型 52
4.1.2案例2——定义字型大小 53
4.1.3案例3——定义字型风格 54
4.1.4案例4——控制文字的粗细 55
4.1.5案例5——将小写字母转为大写字母 56
4.1.6案例6——设定字型的複合属性 57
4.1.7案例7——定义文字的颜色 58
4.2CSS3中新增的文本高级样式 59
4.2.1案例8——添加文本的阴影效果 59
4.2.2案例9——设定文本溢出效果 60
4.2.3案例10——控制文本的换行 62
4.2.4案例11——设定字型尺寸 63
4.3通过CSS控制文本间距与对齐方式 64
4.3.1案例12——设定单词之间的间隔 64
4.3.2案例13——设定字元之间的间隔 65
4.3.3案例14——为文本添加下画线、上画线、删除线 66
4.3.4案例15——设定垂直对齐方式 66
4.3.5案例16——转换文本的大小写 68
4.3.6案例17——设定文本的水平对齐方式 69
4.3.7案例18——设定文本的缩进效果 71
4.3.8案例19——设定文本的行高 71
4.3.9案例20——文本的空白处理 72
4.3.10案例21——文本的反排 73
4.4综合案例1——设定网页标题 75
4.5综合案例2——製作新闻页面 76
4.6大神解惑 77
4.7跟我练练手 78
第5章设计网页图片样式 79
5.1图片缩放 80
5.1.1案例1——通过描述标记width和height缩放图片 80
5.1.2案例2——使用CSS3中的max-width和max-height缩放图片 80
5.1.3案例3——使用CSS3中的width和height缩放图片 81
5.2设定图片的对齐方式 82
5.2.1案例4——设定图片横向对齐 82
5.2.2案例5——设定图片纵向对齐 83
5.3图文混排 84
5.3.1案例6——设定文字环绕效果 84
5.3.2案例7——设定图片与文字的间距 85
5.4综合案例1——製作学校宣传单 87
5.5综合案例2——製作简单图文混排网页 89
5.6大神解惑 90
5.7跟我练练手 90
第6章设计网页背景与框线样式 91
6.1设计网页背景样式 92
6.1.1案例1——设定背景颜色 92
6.1.2案例2——设定背景图片 93
6.1.3案例3——背景图片重複 94
6.1.4案例4——背景图片显示 95
6.1.5案例5——设定背景图片位置 97
6.2CSS3中新增的控制网页背景属性 99
6.2.1案例6——设定背景图片大小 99
6.2.2案例7——设定背景显示区域 100
6.2.3案例8——设定背景图像裁剪区域 102
6.2.4案例9——设定背景的複合属性 103
6.3设计框线样式 104
6.3.1案例10——设定框线样式 104
6.3.2案例11——设定框线颜色 106
6.3.3案例12——设定框线线宽 107
6.3.4案例13——设定框线的複合属性 109
6.4CSS3中新增的框线圆角效果 110
6.4.1案例14——设定圆角框线 110
6.4.2案例15——指定两个圆角半径 111
6.4.3案例16——绘製四个不同圆角框线 112
6.4.4案例17——绘製不同种类的框线 114
6.5CSS3中的渐变效果 115
6.5.1案例18——线性渐变效果 116
6.5.2案例19——径向渐变效果 118
6.6综合案例1——製作简单公司主页 119
6.7综合案例2——製作简单生活资讯主页 122
6.8大神解惑 124
6.9跟我练练手 124
第7章设计网页超级连结和滑鼠样式 125
7.1使用CSS3美化超连结 126
7.1.1案例1——改变超级连结基本样式 126
7.1.2案例2——设定带有提示信息的超级连结 127
7.1.3案例3——设定超级连结的背景图 128
7.1.4案例4——设定超级连结的按钮效果 129
7.2使用CSS3美化滑鼠 130
7.2.1案例5——使用CSS3控制滑鼠箭头 130
7.2.2案例6——设定滑鼠变幻式超连结 132
7.2.3案例7——设定网页页面滚动条 133
7.3综合案例1——图片版本超级连结 135
7.4综合案例2——关于滑鼠特效案例 136
7.5综合案例3——製作一个简单的导航栏 139
7.6大神解惑 140
7.7跟我练练手 141
第8章设计表格和表单样式 143
8.1美化表格样式 144
8.1.1案例1——设定表格框线样式 144
8.1.2案例2——设定表格框线宽度 146
8.1.3案例3——设定表格框线颜色 147
8.2美化表单样式 148
8.2.1案例4——美化表单中的元素 148
8.2.2案例5——美化提交按钮 150
8.2.3案例6——美化下拉选单 151
8.3综合案例1——製作用户登录页面 153
8.4综合案例2——製作用户注册页面 155
8.5大神解惑 157
8.6跟我练练手 158
第9章设计列表和选单样式 159
9.1美化项目列表的样式 160
9.1.1案例1——美化无序列表 160
9.1.2案例2——美化有序列表 161
9.1.3案例3——美化自定义列表 163
9.1.4案例4——製作图片列表 164
9.1.5案例5——缩进图片列表 165
9.1.6案例6——列表複合属性 166
9.2使用CSS製作网页选单 168
9.2.1案例7——製作动态导航选单 168
9.2.2案例8——製作水平和垂直选单 170
9.3综合案例1——模拟SOSO导航栏 172
9.4综合案例2——将段落转变成列表 175
9.5大神解惑 177
9.6跟我练练手 177
第10章使用滤镜美化网页元素 179
10.1滤镜概述 180
10.2设定基本滤镜效果 181
10.2.1案例1——高斯模糊(blur)滤镜 181
10.2.2案例2——明暗度(brightness)滤镜 182
10.2.3案例3——对比度(contrast)滤镜 183
10.2.4案例4——阴影(drop-shadow)滤镜 184
10.2.5案例5——灰度(grayscale)滤镜 185
10.2.6案例6——反相(invert)滤镜 186
10.2.7案例7——透明度(opacity)滤镜 187
10.2.8案例8——饱和度(saturate)滤镜 188
10.2.9案例9——深褐色(sepia)滤镜 189
10.3使用複合滤镜效果 190
10.4大神解惑 191
10.5跟我练练手 191
第III篇高级套用
第11章CSS3的高级特性 195
11.1複合选择器 196
11.1.1案例1——全局选择器 196
11.1.2案例2——交集选择器 197
11.1.3案例3——并集选择器 197
11.1.4案例4——继承(后代)选择器 198
11.2CSS3新增的选择器 199
11.2.1案例5——属性选择器 199
11.2.2案例6——结构伪类选择器 201
11.2.3案例7——UI元素状态伪类选择器 202
11.2.4案例8——伪类选择器 204
11.3CSS3的继承特性 205
11.3.1案例9——继承关係 205
11.3.2案例10——CSS继承的运用 206
11.4CSS3的层叠特性 207
11.4.1案例11——同一选择器被多次定义的处理 207
11.4.2案例12——同一标籤运用不同类型选择器的处理 208
11.5综合案例——製作新闻选单 209
11.6大神解惑 212
11.7跟我练练手 212
第12章过渡和动画效果 213
12.1认识过渡效果 214
12.2案例1——添加过渡效果 214
12.3了解动画效果 217
12.4案例2——添加动画效果 218
12.5大神解惑 219
12.6跟我练练手 220
第13章2D和3D变幻效果 221
13.1认识2D转换效果 222
13.2添加2D转换效果 222
13.2.1案例1——添加移动效果 222
13.2.2案例2——添加旋转效果 223
13.2.3案例3——添加缩放效果 224
13.2.4案例4——添加倾斜效果 225
13.2.5案例5——添加综合变幻效果 227
13.3添加3D转换效果 228
13.4大神解惑 230
13.5跟我练练手 230
第14章CSS3和JavaScript的搭配套用 231
14.1JavaScript语法基础 232
14.1.1什幺是JavaScript 232
14.1.2数据类型 232
14.1.3变数 234
14.1.4案例1——运算符的简单套用 234
14.1.5案例2——流程控制语句的简单套用 237
14.1.6案例3——函式的简单套用 240
14.2常见的JavaScript编写工具 243
14.2.1记事本编写工具 243
14.2.2Dreamweaver编写工具 244
14.3JavaScript在HTML中的使用 244
14.3.1案例4——在HTML网页头中嵌入JavaScript代码 245
14.3.2案例5——在HTML网页中嵌入JavaScript代码 246
14.3.3案例6——在HTML网页的元素事件中嵌入JavaScript代码 247
14.3.4案例7——在HTML中调用已经存在的JavaScript档案 248
14.3.5案例8——通过JavaScript伪URL引入JavaScript脚本代码 249
14.4JavaScript与CSS3的结合使用 250
14.4.1案例9——设定动态内容 250
14.4.2案例10——改变动态样式 251
14.4.3案例11——动态定位网页元素 252
14.4.4案例12——设定网页元素的显示与隐藏 254
14.5HTML5、CSS3和JavaScript的搭配套用 255
14.5.1案例13——设定左右移动的图片 256
14.5.2案例14——製作颜色选择器 258
14.5.3案例15——製作跑马灯效果 260
14.6综合案例——製作树形导航选单 262
14.7大神解惑 267
14.8跟我练练手 268
第15章CSS与XML的综合运用 269
15.1XML语法基础 270
15.1.1实例1——XML的基本套用 270
15.1.2实例2——XML文档的组成和声明 271
15.1.3实例3——XML元素介绍 272
15.2使用CSS修饰XML档案 274
15.2.1实例4——XML使用CSS 274
15.2.2实例5——设定字型属性 275
15.2.3实例6——设定色彩属性 276
15.2.4实例7——设定框线属性 277
15.2.5实例8——设定文本属性 278
15.3综合实例1——招聘广告 279
15.4综合实例2——图文混排页面 281
15.5综合实例3——古诗欣赏 283
15.6大神解惑 286
15.7跟我练练手 286
第IV篇网页布局
第16章CSS定位与DIV布局核心技术 289
16.1认识块级元素和行内级元素 290
16.1.1案例1——块级元素和行内级元素的套用 290
16.1.2案例2——div元素和span元素的区别 292
16.2盒子模型 292
16.2.1盒子模型的概念 293
16.2.2案例3——定义网页border区域 293
16.2.3案例4——定义网页padding区域 295
16.2.4案例5——定义网页margin区域 296
16.3弹性盒模型 299
16.3.1案例6——定义盒子布局方向(box-orient) 300
16.3.2案例7——定义盒子布局顺序(box-direction) 301
16.3.3案例8——定义盒子布局位置(box-ordinal-group) 303
16.3.4案例9——定义盒子弹性空间(box-flex) 304
16.3.5案例10——管理盒子空间(box-pack和box-align) 306
16.3.6案例11——盒子空间的溢出管理(box-lines) 307
16.4综合案例1——图文排版效果 308
16.5综合案例2——淘宝导购选单 310
16.6大神解惑 313
16.7跟我练练手 314
第17章CSS+DIV盒子的浮动与定位 315
17.1定义DIV 316
17.1.1什幺是DIV 316
17.1.2案例1——创建DIV 316
17.2盒子的定位 317
17.2.1案例2——静态定位 317
17.2.2案例3——相对定位 318
17.2.3案例4——绝对定位 319
17.2.4案例5——固定定位 320
17.2.5案例6——盒子的浮动 321
17.3其他CSS布局定位方式 323
17.3.1案例7——溢出(overflow)定位 323
17.3.2案例8——隐藏(visibility)定位 325
17.3.3案例9——z-index空间定位 327
17.4新增CSS3多列布局 328
17.4.1案例10——设定列宽度 328
17.4.2案例11——设定列数 330
17.4.3案例12——设定列间距 331
17.4.4案例13——设定列框线样式 332
17.5综合案例1——定位网页布局样式 334
17.6综合案例2——製作阴影文字效果 337
17.7大神解惑 338
17.8跟我练练手 338
第18章固定宽度网页布局剖析与製作 339
18.1CSS排版的观念 340
18.1.1将页面用div分块 340
18.1.2设定各块位置 340
18.1.3案例1——用CSS定位 341
18.2固定宽度网页剖析与布局 344
18.2.1案例2——网页单列布局模式 344
18.2.2案例3——网页“1-2-1”型布局模式 348
18.2.3案例4——网页“1-3-1”型布局模式 350
18.3大神解惑 354
18.4跟我练练手 354
第19章自动缩放网页布局剖析与製作 355
19.1自动缩放网页“1-2-1”型布局模式 356
19.1.1案例1——“1-2-1”等比例变宽布局 356
19.1.2案例2——“1-2-1”单列变宽布局 357
19.2自动缩放网页“1-3-1”型布局模式 358
19.2.1“1-3-1”三列宽度等比例布局 358
19.2.2案例3——“1-3-1”单侧列宽度固定的变宽布局 358
19.2.3案例4——“1-3-1”中间列宽度固定的变宽布局 361
19.2.4案例5——“1-3-1”双侧列宽度固定的变宽布局 365
19.2.5案例6——“1-3-1”中列和左侧列宽度固定的变宽布局 368
19.3分列布局背景色的使用 371
19.3.1案例7——设定固定宽度布局的列背景色 372
19.3.2案例8——设定特殊宽度变化布局的列背景色 373
19.4综合案例1——单列宽度变化布局 374
19.5综合案例2——多列等比例宽度变化布局 376
19.6大神解惑 378
19.7跟我练练手 378
第20章创建回响式页面 379
20.1了解弹性盒子 380
20.2案例1——使用弹性盒子 380
20.3案例2——设定弹性子元素的位置 383
20.4案例3——设定弹性子元素的横向对齐方式 384
20.5案例4——设定弹性子元素的纵向对齐方式 389
20.6案例5——设定弹性子元素的换行方式 390
20.7综合案例——使用弹性盒子创建回响式页面 393
20.8大神解惑 395
20.9跟我练练手 396
第V篇项目案例实战
第21章设计商业门户类网页 399
21.1整体设计 400
21.1.1颜色套用分析 400
21.1.2架构布局分析 400
21.2主要模组设计 401
21.2.1网页整体样式插入 401
21.2.2网页局部样式 403
21.2.3顶部模组样式代码分析 410
21.2.4中间主体代码分析 411
21.2.5底部模组分析 414
21.3网站调整 415
21.3.1部分内容调整 415
21.3.2模组调整 415
21.3.3调整后预览测试 417
第22章设计图像影音类网页 419
22.1整体设计 420
22.1.1颜色套用分析 420
22.1.2架构布局分析 421
22.2主要模组设计 422
22.2.1样式代码分析 422
22.2.2顶部模组样式代码分析 425
22.2.3网站主体模组代码分析 427
22.2.4底部模组分析 430
22.3网站调整 431
22.3.1部分内容调整 431
22.3.2模组调整 432
22.3.3调整后预览测试 435
第23章设计娱乐休闲类网页 437
23.1整体设计 438
23.1.1套用设计分析 438
23.1.2架构布局分析 439
23.2主要模组设计 440
23.2.1网页整体样式插入 440
23.2.2顶部模组代码分析 441
23.2.3视频模组代码分析 442
23.2.4评论模组代码分析 443
23.2.5热门推荐模组代码分析 444
23.2.6底部模组分析 446
23.3网页调整 446
23.3.1部分内容调整 446
23.3.2调整后预览测试 448
第24章设计企业门户类网页 449
24.1构思布局 450
24.1.1设计分析 450
24.1.2排版架构 450
24.2主要模组设计 451
24.2.1Logo与导航选单 451
24.2.2Banner区 452
24.2.3资讯区 453
24.2.4版权资讯 455
第25章设计线上购物类网页 457
25.1整体布局 458
25.1.1设计分析 458
25.1.2排版架构 458
25.2主要模组设计 459
25.2.1Logo与导航区 459
25.2.2Banner与资讯区 460
25.2.3产品类别区域 462
25.2.4页脚区域 463