DIV+CSS 3网页样式与布局全程揭秘（第3版）

目录
第1章  网页和网站开发知识
1.1　了解网页 1
1.1.1　网页与网站的关系 1
1.1.2　网页基本构成元素 3
1.2　定义网页设计 3
1.2.1　简述网页设计 3
1.2.2　网页设计的特点 4
1.2.3　网页设计的相关术语 6
1.2.4　常见网站类型 8
1.3　网站开发流程 11
1.3.1　网站策划 11
1.3.2　规划网站结构 11
1.3.3　素材收集整理 11
1.3.4　网页版式与布局分析 12
1.3.5　确定网站主色调 12
1.3.6　设计网站页面 13
1.3.7　切割和优化网页 13
1.3.8　制作HTML页面 13
1.3.9　使用CSS样式控制网页外观 13
1.3.10　为网页应用JavaScript特效 14
1.3.11　网站后台程序开发 14
1.3.12　申请域名和服务器空间 14
1.3.13　测试并上传网站 14
1.4　关于DIV CSS布局 14
1.4.1　布局特点 14
1.4.2　DIV CSS布局的优势 15
1.5　Web标准 16
1.5.1　什么是Web标准 16
1.5.2　Web标准的内容 16
1.5.3　结构、表现、行为和内容 16
1.5.4　遵循Web标准的好处 18
第2章  了解HTML5
2.1　HTML基本概念 19
2.1.1　了解HTML 19
2.1.2　HTML的作用 20
2.1.3　HTML的基础结构 20
2.1.4　HTML的基本语法 21
2.2　HTML发展史 22
2.2.1　HTML 22
2.2.2　XML  23
2.2.3　XHTML 23
2.2.4　制作HTML页面 24
实例01　制作简单的HTML页面 24
2.3　HTML常用标签 25
2.3.1　区块标签 25
2.3.2　文本标签 26
2.3.3　格式标签 26
2.3.4　图像标签 27
2.3.5　表格标签 27
2.3.6　超链接标签 27
2.4　HTML5基础 28
2.4.1　了解HTML5 28
2.4.2　HTML5的简化操作 28
2.4.3　HTML5标签 29
2.4.4　HTML5废弃标签 30
2.4.5　HTML5的选择器 31
2.4.6　HTML5的优势 31
2.5　HTML5的应用 32
2.5.1　标签 32
实例02　在网页中实现绘图效果 33
2.5.2　声音和视频标签 34
实例03　在网页中嵌入音频和视频 35
第3章  初识CSS样式 3.1　了解CSS样式 38
3.1.1　使用CSS样式的原因 38
3.1.2　使用CSS样式的优势 39
3.1.3　使用CSS样式的作用 40
3.1.4　使用CSS样式的局限性 41
3.1.5　CSS样式的基础语法 41
3.1.6　认识CSS规则的构成 42
3.2　在网页中应用CSS样式的4种方法 42
3.2.1　内联CSS样式 42
实例04　使用style属性添加内联CSS样式 43
3.2.2　内部CSS样式 44
实例05　使用style标签添加内部CSS样式 44
3.2.3　链接外部CSS样式文件 45
实例06　使用link标签链接外部CSS样式文件 45
3.2.4　导入外部CSS样式文件 46
实例07　使用@import命令导入外部CSS样式文件 47
3.3　CSS选择器 48
3.3.1　通配选择器 48
3.3.2　标签选择器 48
3.3.3　ID选择器 48
3.3.4　类选择器 48
3.3.5　伪类和伪对象选择器 49
实例08　设置酒店网站文字链接效果 49
3.3.6　群选择器 50
实例09　设置女装网站图片效果 50
3.3.7　派生选择器 53
3.3.8　层次选择器 54
3.4　CSS3中的选择器 55
3.4.1　属性选择器 55
3.4.2　结构伪类选择器 56
3.4.3　UI元素状态伪类选择器 56
3.5　CSS样式的特性 57
3.5.1　继承性 57
3.5.2　层叠性 58
3.5.3　权重 58
3.6　CSS样式中的颜色设置和单位 60
3.6.1　CSS中的多种颜色设置方法 60
3.6.2　CSS中的单位 61
3.6.3　CSS中的相对单位 61
3.6.4　CSS3中新增的颜色定义方法 62
第4章  使用CSS设置文本和段落样式
4.1　设置文本CSS样式 63
4.1.1　设置字体font-family 63
4.1.2　设置字体大小font-size 63
实例10　设置欢迎页面中文字的字体和大小 64
4.1.3　设置字体颜色color 65
4.1.4　设置字体粗细font-weight 65
实例11　设置网页中字体的颜色和粗细 66
4.1.5　设置字体样式font-style 68
4.1.6　设置英文字体大小写text-transform 68
4.1.7　设置文字修饰text-decoration 68
实例12　设置网页中英文字体的属性 68
4.2　设置段落样式 72
4.2.1　字间距letter-spacing 72
4.2.2　行间距line-height 72
实例13　在网页中设计文字间距 72
4.2.3　段落首字下沉 74
4.2.4　段落首行缩进text-indent 74
实例14　设置段落文字首字下沉和缩进样式 74
4.2.5　段落水平对齐text-align 76
4.2.6　文本垂直对齐vertical-align 76
实例15　设置文本水平居中和垂直居中对齐 76
4.3　使用CSS3嵌入Web字体 78
4.3.1　@font-face语法 78
4.3.2　自定义字体方法 79
4.3.3　声明多个字体来源 79
4.3.4　@font-face规则的浏览器兼容性 80
4.4　在网页中应用特殊字体 80
实例16　在卡通网页中使用特殊字体 80
4.5　CSS3中文字效果设置 82
4.5.1　文字阴影text-shadow 82
4.5.2　文本溢出处理text-overflow 83
实例17　为网页中的文字设置效果 83
第5章  使用CSS设置背景和图片样式
5.1　设置背景颜色CSS样式 86
5.1.1　背景颜色background-color 86
5.1.2　为页面元素设置不同的背景颜色 86
实例18　为网页设置背景颜色 86
5.1.3　背景图像大小background-size 88
5.1.4　背景图像显示区域background-origin 88
5.1.5　背景图像裁剪区域background-clip 88
实例19　控制网页元素背景图像 89
5.2　设置背景图像CSS样式 91
5.2.1　背景图像background-image 91
5.2.2　背景图像重复方式background-repeat 91
实例20　设置图片网站背景图像 91
5.2.3　背景图像固定background-attachment 93
5.2.4　背景图像位置background-position 93
实例21　设置网页背景和图像固定位置 94
5.2.5　渐变背景 95
5.3　设置图片CSS样式 96
5.3.1　图片边框border 96
实例22　设置卡通网站中的图片边框 99
5.3.2　图片缩放 100
实例23　实现跟随浏览器窗口缩放的图片 100
5.3.3　图片水平对齐 102
5.3.4　图片的垂直对齐 103
5.4　在网页中实现图文混排 104
5.4.1　使用CSS样式实现文本绕图效果 104
5.4.2　设置文本绕图间距 105
实例24　实现图文混排并设置间距 105
5.5　网页中特殊的图像效果应用 106
5.5.1　全屏大图切换 106
实例25　设计作品展示页面 107
5.5.2　鼠标经过图像动态效果 109
实例26　制作图片展示网页 109
第6章  使用CSS设置列表样式
6.1　了解网页中的列表 113
6.2　设置列表的CSS样式 113
6.2.1　ul无序项目列表 114
6.2.2　ol有序编号列表 114
实例27　制作无序列表和有序列表 114
6.2.3　dl定义列表 116
6.2.4　更改列表项目样式 117
6.2.5　自定义列表符号 117
6.3　使用列表制作导航菜单 118
6.3.1　使用CSS样式创建横向导航菜单 118
实例28　制作游戏网站导航 118
6.3.2　使用CSS样式创建竖向导航菜单 119
6.4　列表在网页中的特殊应用 120
6.4.1　滚动图像 120
实例29　在网页中实现四图横向滚动效果 120
6.4.2　动态堆叠卡 124
实例30　制作个性网站欢迎页面 124
第7章  使用CSS设置超链接样式
7.1　了解网页超链接 128
7.1.1　什么是超链接 128
7.1.2　关于链接路径 128
7.1.3　超链接对象 129
7.1.4　创建超链接原则 129
7.2　CSS样式伪类 130
7.2.1　:link伪类 130
7.2.2　:hover伪类 130
7.2.3　:active伪类 131
7.2.4　:visited伪类 131
7.3　超链接CSS样式应用 132
7.3.1　超链接文字样式 132
实例31　设置游戏网站文字超链接效果 132
7.3.2　按钮式超链接 134
实例32　制作设计网站导航菜单 134
7.3.3　为超链接添加背景 136
实例33　背景翻转导航菜单 136
7.4　设置网页中的光标效果 138
7.5　超链接在网页中的特殊应用 139
7.5.1　倾斜导航菜单 139
实例34　玩具网站倾斜导航 139
7.5.2　动感超链接 141
实例35　卡通网站动感导航菜单 142
第8章  使用CSS设置表格样式
8.1　了解表格 145
8.1.1　认识表格标签与结构 145
8.1.2　表格标题标签 147
8.1.3　表格列和标签 148
8.1.4　水平对齐和垂直对齐 149
8.2　使用CSS样式控制表格外观 150
8.2.1　设置表格边框 150
8.2.2　设置表格背景颜色 150
8.2.3　设置表格背景图像 150
实例36　制作网站新闻栏目 150
8.3　使用CSS样式实现表格特效 154
8.3.1　设置单元行背景颜色 154
8.3.2　:hover伪类在表格中的应用 154
实例37　使用CSS实现表格的交互效果 154
第9章  使用CSS设置表单元素样式
9.1　关于表单 157
9.1.1　表单标签 157
9.1.2　输入标签 158
9.1.3　文本域标签 158
9.1.4　选择域标签和 159
9.1.5　其他表单元素 159
9.1.6　关于、和标签 162
实例38　创建简单的网页表单 163
9.2　使用CSS样式控制表单元素 165
9.2.1　使用CSS样式设置表单元素的背景色和边框 165
实例39　制作网站登录页面 165
9.2.2　使用CSS样式实现圆角文本字段 169
实例40　制作圆角登录框 169
9.2.3　使用CSS样式设置下拉列表效果 170
实例41　制作网站搜索栏 170
9.3　表单在网页中的特殊应用 173
9.3.1　聚焦型提示语消失 173
实例42　文本字段提示语效果1 173
9.3.2　输入型提示语消失 176
实例43　文本字段提示语效果2 176
第10章  使用CSS设置动画效果
10.1　CSS3变形属性简介 178
10.2　实现网页元素2D变形效果 179
10.2.1　旋转变形 179
实例44　实现网页元素的旋转效果 179
10.2.2　缩放和翻转变形 181
实例45　实现网页元素的缩放效果 181
10.2.3　移动变形 182
实例46　实现网页元素位置的移动 183
10.2.4　倾斜变形 184
实例47　实现网页元素的倾斜效果 184
10.2.5　矩阵变形 186
10.3　实现元素3D变形效果 186
10.3.1　3D位移 186
实例48　实现网页元素的3D位移效果 187
10.3.2　3D旋转 188
实例49　实现网页元素的3D旋转效果 189
10.3.3　3D缩放 191
实例50　实现网页元素的3D缩放效果 191
10.3.4　3D矩阵 192
10.4　CSS3过渡简介 193
10.4.1　CSS3过渡属性 193
10.4.2　如何创建过渡动画 193
10.5　CSS3实现元素过渡效果 194
10.5.1　transition-property属性——实现过渡效果 194
10.5.2　transition-duration属性——过渡时间 195
实例51　实现网页元素的变形过渡效果 195
10.5.3　transition-delay属性——过渡延迟时间 197
10.5.4　transition-timing-function属性——过渡方式 198
10.6　CSS3关键帧动画简介 198
10.6.1　CSS3新增的animation属性 198
10.6.2　@keyframes的语法 199
10.7　为网页元素应用关键帧动画 200
10.7.1　使用@keyframes声明动画 200
10.7.2　调用@keyframes声明的动画 201
10.8　CSS3动画子属性详解 201
10.8.1　animation-name属性——调用动画 201
10.8.2　animation-duration属性——动画播放时间 202
10.8.3　animation-timing-function属性——动画播放方式 202
10.8.4　animation-delay属性——动画开始播放时间 202
10.8.5　animation-iteration-count属性——动画播放次数 202
10.8.6　animation-direction属性——动画播放方向 202
10.8.7　animation-play-state属性——动画播放状态 203
10.8.8　animation-fill-mode属性——动画时间外属性 203
实例52　制作关键帧动画效果 203
第11章  CSS样式的浏览器兼容性
11.1　CSS选择器的浏览器兼容性 207
11.1.1　基础选择器的浏览器兼容性 207
11.1.2　层次选择器的浏览器兼容性 207
11.1.3　伪类选择器的浏览器兼容性 208
实例53　美化超链接按钮样式 209
11.1.4　属性选择器的浏览器兼容性 211
11.2　文本属性的浏览器兼容性 212
11.2.1　文字和段落样式的浏览器兼容性 212
11.2.2　text-overflow属性的浏览器兼容性 213
11.2.3　text-shadow属性的浏览器兼容性 214
11.2.4　@font-face规则的浏览器兼容性 214
11.3　背景和图片的浏览器兼容性 216
11.3.1　background-clip属性的浏览器兼容性 216
11.3.2　CSS3多背景的浏览器兼容性 217
11.3.3　opacity属性的浏览器兼容性 218
11.4　边框属性的浏览器兼容性 218
11.4.1　边框基础属性的浏览器兼容性 218
11.4.2　border-color属性的浏览器兼容性 219
11.4.3　border-radius属性的浏览器兼容性 219
实例54　为网页元素设置圆角效果 220
11.4.4　border-image属性的浏览器兼容性 222
11.4.5　box-shadow属性的浏览器兼容性 223
11.5　盒模型的浏览器兼容性 224
11.5.1　CSS盒模型的浏览器兼容性 224
11.5.2　定位属性的浏览器兼容性 224
11.5.3　outline属性的浏览器兼容性 226
11.5.4　多列布局属性的浏览器兼容性 226
实例55　实现网页内容分列布局 227
11.6　CSS动画的浏览器兼容性 229
11.6.1　CSS3变形属性的浏览器兼容性 229
11.6.2　CSS3过渡属性的浏览器兼容性 230
11.6.3　animation属性的浏览器兼容性 231
11.6.4　@keyframes的浏览器兼容性 231
第12章   使用DIV CSS布局网页
12.1　关于DIV 232
12.1.1　什么是DIV 232
12.1.2　如何在网页中插入DIV 232
12.1.3　与标签的区别 233
12.2　ID与class 234
12.2.1　什么是ID 234
12.2.2　什么时候使用ID 235
12.2.3　什么是class 235
12.2.4　什么时候使用class 235
12.3　CSS盒模型 236
12.3.1　什么是CSS盒模型 236
12.3.2　CSS盒模型的要点 237
12.3.3　margin属性 237
实例56　制作房产网站欢迎页 237
12.3.4　border属性 238
12.3.5　padding属性 239
实例57　制作图片网页 239
12.3.6　content部分 240
12.4　CSS3中的弹性盒模型 240
12.4.1　box-orient属性控制盒子取向 241
12.4.2　box-direction属性控制盒子顺序 242
12.4.3　box-ordinal-group属性控制盒子位置 243
12.4.4　box-flex属性控制盒子弹性空间 245
12.4.5　盒子空间管理box-pack和box-align属性 246
12.4.6　盒子空间溢出管理box-lines属性 248
12.5　网页元素定位 248
12.5.1　关于position属性 248
12.5.2　relative定位方式 249
实例58　实现图像的叠加效果 249
12.5.3　absolute定位方式 250
实例59　制作科技公司网站页面 250
12.5.4　fixed定位方式 252
实例60　固定不动的网站导航菜单 252
12.5.5　float定位方式 253
实例61　制作图片列表页面 253
12.6　常用DIV CSS布局解析 256
12.6.1　内容居中的网页布局 256
12.6.2　浮动的网页布局 257
12.6.3　自适应高度的解决方法 261
12.7　CSS3中的界面相关属性 261
12.7.1　内容溢出处理overflow 262
12.7.2　区域缩放调节resize 263
12.7.3　轮廓外边框outline 264
12.7.4　多列布局column 265
12.7.5　航序列号nav-index 265
12.8　CSS3的其他属性 265
12.8.1　判断对象@media 265
实例62　根据不同的浏览器窗口显示不同的背景颜色 266
12.8.2　加载服务器端字体@font-face 266
12.9　使用CSS3制作网页特效 267
实例63　网页动态交互导航菜单 267
第13章  CSS与JavaScript实现网页特效
13.1　JavaScript基础 272
13.1.1　JavaScript的发展 272
13.1.2　JavaScript的特点 273
13.1.3　JavaScript语法中的基本要求 273
13.1.4　CSS样式与JavaScript 275
13.2　使用JavaScript的方法 275
13.2.1　使用