HTML5与CSS3设计模式 PDF 清晰版

内容简介

繁琐的CSS规则和各浏览器支持度的不统一素来都为网页设计师所诟病。通过多年潜心研究与深入测试，作者归纳组合出了多达350条的设计模式，并结合了HTML5与CSS3的最新内容与技巧，大大简化和丰富了设计过程。编排合理的内容、由浅入深的讲解方式，极具实用性的代码范例......一览本书，设计师的美妙灵感必能得以充分释放，进而创作出无穷可能的精致作品。

新版加入了HTML5及CSS3全新功能，将所有的主流浏览器解决方法一网打尽，IE6/7/8/9、Firefox7、Chrome12、Opera9还有Safari5均能适用，无需依赖浏览器兼容性技巧。

多达350种立即可用的模式（包含范例代码段），仅需复制粘贴，就可应用。

仿佛孩童堆积乐高，每种模式都可与其他模式契合使用，创造无穷的精美效果。

模式名称显明易懂，方便查阅引用。每种模式、范例及相关代码都经过精心设计，便捷高效。

模式范例与详尽说明分列左右页面，无需翻页，即可一览无余。

模式讲解由浅入深，层层衔接，易于阅读。

目录

• 第1章设计模式：简化CSS使用1
• 1.1设计模式——结构化方法2
• 1.2使用设计模式2
• 1.3使用样式表7
• 1.4CSS语法7
• 1.4.1CSS语法详解8
• 1.4.2在CSS中使用空白字符9
• 1.4.3使用属性值9
• 1.5使用层叠顺序12
• 1.6简化层叠顺序14
• 1.7CSS和HTML链接15
• 1.8CSS常用属性16
• 1.9CSS属性与值：常用17
• 1.10CSS属性与值：内容18
• 1.11CSS属性与值：布局19
• 1.12CSS属性与值：专用20
• 1.13选择器20
• 1.14媒体查询21
• 1.15灵活尺寸单位22
• 1.16固定度量单位22
• 1.1796dpi下度量单位的换算23
• 1.1896dpi下的常用字号23
• 1.19过渡、动画与2D变换23
• 1.20修复CSS错误24
• 1.21样式表的规范化26
• 第2章HTML设计模式29
• 2.1概述29
• 2.2HTML结构30
• 2.3HTML结构（续）32
• 2.4XHTML37
• 2.5DOCTYPE39
• 2.6页头元素41
• 2.7条件样式表43
• 2.8结构块元素45
• 2.9终止块元素47
• 2.10多功能块元素49
• 2.11行内元素51
• 2.12类和ID属性53
• 2.13HTML空白字符55
• 第3章CSS选择器与继承57
• 3.1概述57
• 3.2类型、类和ID选择器58
• 3.3位置选择器和选择器分组60
• 3.4属性选择器62
• 3.5伪元素选择器64
• 3.6伪类选择器66
• 3.7子类选择器68
• 3.8继承70
• 3.9可视化继承72
• 第4章框模型75
• 4.1概述75
• 4.2Display76
• 4.3框模型78
• 4.4行内框80
• 4.5行内块级框82
• 4.6块级框84
• 4.7表格框86
• 4.8绝对框88
• 4.9浮动框90
• 第5章框模型的范围93
• 5.1概述93
• 5.2宽度94
• 5.3高度96
• 5.4设定尺寸98
• 5.5收缩适应100
• 5.6拉伸102
• 第6章框模型属性105
• 6.1概述105
• 6.2外边距106
• 6.3边框108
• 6.4内边距111
• 6.5背景113
• 6.6溢出115
• 6.7可见性117
• 6.8分页符119
• 第7章定位模型121
• 7.1概述121
• 7.2定位模型122
• 7.3设定位置124
• 7.4最近定位祖先元素126
• 7.5堆叠上下文128
• 7.6原子显示130
• 7.7静态定位132
• 7.8绝对定位134
• 7.9固定定位136
• 7.10相对定位138
• 7.11浮动定位与复位140
• 7.12相对浮动定位142
• 第8章定位方式：缩进、偏移与对齐145
• 8.1概述145
• 8.2缩进146
• 8.3静态偏移148
• 8.4静态表格偏移与缩进150
• 8.5浮动偏移152
• 8.6绝对偏移与固定偏移154
• 8.7相对偏移156
• 8.8静态行内对齐158
• 8.9静态块级对齐与偏移160
• 8.10静态表格对齐与偏移162
• 8.11绝对对齐与偏移164
• 8.12绝对居中对齐166
• 8.13外部对齐168
• 第9章高级定位171
• 9.1概述171
• 9.2左对齐172
• 9.3左偏移174
• 9.4右对齐176
• 9.5右偏移178
• 9.6居中对齐180
• 9.7居中偏移182
• 9.8上对齐184
• 9.9上偏移186
• 9.10下对齐188
• 9.11下偏移190
• 9.12垂直居中对齐192
• 9.13垂直居中偏移194
• 第10章设置文字样式197
• 10.1概述197
• 10.2字体198
• 10.3高亮显示200
• 10.4文字修饰202
• 10.5文字阴影204
• 10.6使用图片替换文字206
• 10.7使用Canvas和VML替换文字208
• 10.8嵌入字体210
• 10.9不可见文字212
• 10.10仅供屏幕阅读器读取214
• 第11章内容间隔217
• 11.1间隔218
• 11.2块级化220
• 11.3不换行222
• 11.4保留空格224
• 11.5代码226
• 11.6填充内容228
• 11.7行内分隔区230
• 11.8行内装饰232
• 11.9换行234
• 11.10行内水平线规则236
• 第12章内容对齐239
• 12.1文字缩进240
• 12.2悬挂缩进242
• 12.3水平对齐内容244
• 12.4垂直对齐内容246
• 12.5垂直偏移内容248
• 12.6下标与上标250
• 12.7嵌套对齐252
• 12.8高级对齐示例254
• 第13章块级元素257
• 13.1概述257
• 13.2结构含义258
• 13.3可视化结构260
• 13.4节262
• 13.5列表264
• 13.6项目符号背景266
• 13.7行内化268
• 13.8合并外边距270
• 13.9插入272
• 13.10水平线规则274
• 13.11块级分隔区276
• 13.12块级间隔删除器278
• 13.13左旁注280
• 13.14右旁注282
• 第14章图片285
• 14.1概述285
• 14.2图片286
• 14.3图片地图288
• 14.4淡出290
• 14.5半透明292
• 14.6替换文字294
• 14.7内容覆盖图片296
• 14.8内容覆盖背景图片298
• 14.9CSS精灵图300
• 14.10CSS精灵图（续）302
• 14.11基本阴影图片304
• 14.12阴影图片306
• 14.13阴影图片（续）308
• 14.14阴影图片（再续）310
• 14.15圆角312
• 14.16圆角（续）314
• 14.17图片示例316
• 第15章表格319
• 15.1概述319
• 15.2表格320
• 15.3行组与列组322
• 15.4表格选择器324
• 15.5拆分边框326
• 15.6合并边框328
• 15.7合并边框样式330
• 15.8隐藏与删除单元格332
• 15.9删除与隐藏行和列334
• 15.10垂直对齐数据336
• 15.11表格条纹338
• 15.12表格化、行化和单元格化340
• 15.13表格布局342
• 第16章表格列布局345
• 16.1表格布局模型345
• 16.2使用列布局346
• 16.3概述346
• 16.4列宽348
• 16.5收缩适应列350
• 16.6设定尺寸列352
• 16.7按内容比例划分列354
• 16.8按宽度比例划分列356
• 16.9按百分比比例划分列358
• 16.10按反比例划分列360
• 16.11最小等宽列362
• 16.12等宽列364
• 16.13小尺寸列366
• 16.14弹性列368
• 16.15混合列布局370
• 第17章布局373
• 17.1概述373
• 17.2流动布局概述374
• 17.3由外而内框376
• 17.4浮动节380
• 17.5浮动分隔区382
• 17.6流动布局384
• 17.7两侧浮动386
• 17.8事件样式388
• 17.9卷起390
• 17.10选项卡菜单394
• 17.11选项卡398
• 17.12飞出菜单402
• 17.13按钮406
• 17.14布局链接410
• 17.15多列布局412
• 17.16模板布局414
• 17.17布局示例416
• 第18章首字下沉419
• 18.1概述419
• 18.2对齐首字下沉420
• 18.3首字母下沉422
• 18.4悬挂首字下沉424
• 18.5嵌入式图片下沉426
• 18.6浮动首字下沉428
• 18.7浮动图片下沉430
• 18.8旁注式首字下沉432
• 18.9旁注式图片下沉434
• 第19章突出引用与普通引用437
• 19.1概述437
• 19.2左浮动突出引用438
• 19.3右浮动突出引用440
• 19.4居中突出引用442
• 19.5左旁注突出引用444
• 19.6右旁注突出引用446
• 19.7块级普通引用448
• 19.8行内块级普通引用450
• 19.9行内普通引用452
• 第20章警告框455
• 20.1概述455
• 20.2JavaScript警告框456
• 20.3工具提示警告框458
• 20.4弹出式警告框460
• 20.5弹出式警告框（续）462
• 20.6警告框464
• 20.7行内警告框466
• 20.8悬挂式警告框468
• 20.9图片警告框470
• 20.10插入警告框472
• 20.11浮动警告框474
• 20.12左旁注警告框476
• 20.13右旁注警告框478
• 20.14表单验证480