响应式web设计html5和css3实战第2版

响应式web设计是一种统一的解决方案，可以让web作品适配手机，平板和桌面电脑。但如何才能更好的学习和入门呢？响应式web设计html5和css3实战第2版将为用户提供最全面的讲解，是一本html和css3的实战手册，由英国程序员本·弗莱恩编著。

本书涵盖响应式web设计的所有相关内容，不仅如此，通过介绍最新和最有用的html5和css3技术，还扩充了响应式设计的方法库，让设计变得更简单，更好维护。此外，本书还讨论了编写和交付代码、图片、文件的最佳实践，适用于所有Web开发和设计人员，欢迎免费下载阅读。

内容介绍

响应式Web设计 HTML5和CSS3实战（第2版）将当前Web 设计中热门的响应式设计技术与HTML5 和CSS3 结合起来，为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。书中不仅讨论了媒体查询、弹性布局、响应式图片，更将新的和有用的HTML5 和CSS3 技术一并讲解，是学习新Web 设计技术不可多得的佳作。

全书具体内容如下：

第1章，“响应式Web设计基础”，简要介绍响应式Web设计相关的技术。

第2章，“媒体查询”，系统讲解CSS媒体查询，包括它的能力、语法，以及各种使用方式。

第3章，“弹性布局与响应式图片”，展示如何设计比例缩放布局和响应式图片，并对Flexbox布局进行全方位介绍。

第4章，“HTML5与响应式Web设计”，探讨HTML5中的语义元素、文本级语义，以及无障碍方面的考虑，还介绍了如何在网页中添加视频和音频。

第5章，“CSS3新特性”，探讨CSS选择符、HSLA及RGBA颜色、Web排版、视口相对单位，等等。

第6章，“CSS3高级技术”，探讨CSS滤镜、盒阴影、线性与放射渐变、多背影，以及如何为高分辨率设备提供背景图片。

第7章，“SVG与响应式Web设计”，讲述在文档中使用SVG、将SVG作为背影图片，以及通过JavaScript添加交互。

第8章，“CSS3过渡、变形和动画”，看一看使用CSS能够做出哪些交互与动画效果。

第9章，“表单”，在HTML5和CSS3之前，表单一直是个难题，现在不同了。

第10章，“实现响应式Web设计”，阐述在着手实现响应式Web设计时需要考虑的重要因素，

并给大家提供一些实用的建议。

响应式web设计html5和css3实战第2版章节目录

第1 章 响应式Web 设计基础 1

1．1　定义需求　1

1．2　什么是响应式Web 设计　2

1．3　浏览器支持　2

1．4　第一个响应式的例子　4

1．4．1　HTML　5

1．4．2　图片　8

1．4．3　媒体查询　10

1．5　示例的不足之处　14

1．6　小结　15

第2　章 媒体查询　16

2．1　为什么响应式Web 设计需要媒体查询　17

2．2　媒体查询的语法　18

2．3　组合媒体查询　19

2．3．1　@import 与媒体查询　20

2．3．2　在CSS 中使用媒体查询　20

2．3．3　媒体查询可以测试哪些特性　20

2．4　通过媒体查询修改设计　21

2．4．1　任何CSS 都可以放在媒体查询里　23

2．4．2　针对高分辨率设备的媒体查询　23

2．5　组织和编写媒体查询的注意事项　24

2．5．1　使用媒体查询链接不同的CSS文件　24

2．5．2　分隔媒体查询的利弊　25

2．5．3　把媒体查询写在常规样式表中　25

2．6　组合媒体查询还是把它们写在需要的地方　25

2．7　关于视口的meta 标签　27

2．8　媒体查询4 级　28

2．8．1　可编程的媒体特性　29

2．8．2　交互媒体特性　30

2．8．3　悬停媒体特性　30

2．8．4　环境媒体特性　31

2．9　小结　31

第3　章 弹性布局与响应式图片　32

3．1　将固定像素大小转换为弹性比例大小　33

3．1．1　为什么需要Flexbox　36

3．1．2　行内块与空白　37

3．1．3　浮动　37

3．1．4　表格与表元　37

3．2　Flexbox 概述　38

3．2．1　Flexbox 三级跳　38

3．2．2　浏览器对Flexbox 的支持　38

3．3　使用Flexbox　39

3．3．1　完美垂直居中文本　40

3．3．2　偏移　41

3．3．3　反序　42

3．3．4　不同媒体查询中的不同Flexbox 布局　43

3．3．5　行内伸缩　44

3．3．6　Flexbox 的对齐　45

3．3．7　flex　50

3．3．8　简单的粘附页脚　52

3．3．9　改变原始次序　53

3．3．10　Flexbox 小结　57

3．4　响应式图片　58

3．4．1　响应式图片的固有问题　58

3．4．2　通过srcset 切换分辨率　59

3．4．3　srcset 及sizes 联合切换　59

3．4．4　picture 元素　60

3．5　小结　61

第4　章 HTML5 与响应式Web 设计　62

4．1　得到普遍支持的HTML5 标记　63

4．2　开始写HTML5 网页　63

4．2．1　doctype　64

4．2．2　HTML 标签与lang 属性　64

4．2．3　指定替代语言　64

4．2．4　字符编码　64

4．3　宽容的HTML5　65

4．3．1　理性编写HTML5　66

4．3．2　向标签致敬　66

4．4　HTML5 的新语义元素　67

4．4．1　

元素　67

4．4．2　

元素　68

4．4．3　

元素　68

4．4．4　

元素　68

4．4．5　

元素　69

4．4．6　

和

元素　69

4．4．7　和

元素　69

4．4．8　

元素　71

4．4．9　

元素　71

4．4．10　

元素　71

4．4．11　h1 到h6　72

4．5　HTML5 文本级元素　72

4．5．1　元素　72

4．5．2　元素　73

4．5．3　元素　73

4．6　作废的HTML 特性　73

4．7　使用HTML5 元素　74

4．8　WCAG 和WAI-ARIA　75

4．8．1　WCAG　75

4．8．2　WAI-ARIA　75

4．8．3　如果你只能记住一件事　76

4．8．4　ARIA 的更多用途　76

4．9　在HTML5 中嵌入媒体　77

4．9．1　使用HTML5 视频和音频　77

4．9．2　audio 与video 几乎一样　79

4．10　响应式HTML5 视频与内嵌框架　79

4．11　关于“离线优先”　80

4．12　小结　81

第5　章 CSS3 新特性　82

5．1　没人无所不知　82

5．2　剖析CSS 规则　83

5．3　便捷的CSS 技巧　83

5．4　断字　86

5．4．1　截短文本　86

5．4．2　创建水平滚动面板　87

5．5　在CSS 中创建分支　89

5．5．1　特性查询　89

5．5．2　组合条件　90

5．5．3　Modernizr　91

5．6　新CSS3 选择符　93

5．6．1　CSS3 属性选择符　93

5．6．2　CSS3 子字符串匹配属性选择符　93

5．6．3　属性选择符的注意事项　95

5．6．4　属性选择符选择以数值开头的ID 和类　96

5．7　CSS3 结构化伪类　96

5．7．1　：last-child　96

5．7．2　nth-child　97

5．7．3　理解nth　97

5．7．4　基于nth 的选择与响应式设计　100

5．7．5　：not　102

5．7．6　：empty　103

5．7．7　：first-line　104

5．8　CSS 自定义属性和变量　104

5．9　CSS calc　105

5．10　CSS Level 4 选择符　105

5．10．1　：has 伪类　105

5．10．2　相对视口的长度　106

5．11　Web 排版　106

5．11．1　@font-face　107

5．11．2　通过@font-face 实现Web字体　107

5．11．3　注意事项　109

5．12　CSS3 的新颜色格式及透明度　109

5．12．1　RGB　109

5．12．2　HSL　110

5．12．3　alpha 通道　111

5．12．4　CSS Color Module Level 4的颜色操作　112

5．13　小结　112

第6　章 CSS3 高级技术　113

6．1　CSS3 的文字阴影特效　113

6．1．1　省略blur 值　114

6．1．2　多文字阴影　115

6．2　盒阴影　115

6．2．1　内阴影　115

6．2．2　多重阴影　116

6．2．3　阴影尺寸　116

6．3　背景渐变　117

6．3．1　线性渐变语法　118

6．3．2　径向渐变背景　120

6．3．3　为响应式而生的关键字　120

6．4　重复渐变　121

6．5　使用渐变背景创造图案　122

6．6　多张背景图片　123

6．6．1　背景大小　124

6．6．2　背景位置　124

6．6．3　背景属性的缩写　125

6．7　高分辨率背景图像　126

6．8　CSS 滤镜　126

6．8．1　可用的CSS 滤镜　127

6．8．2　使用多个CSS 滤镜　132

6．9　CSS 性能的警告　132

6．10　小结　134

第7　章 SVG 与响应式Web 设计　135

7．1　SVG 的历史　137

7．2　用文档表示的图像　137

7．2．1　SVG 的根元素　138

7．2．2　命名空间　139

7．2．3　标题和描述标签　139

7．2．4　defs 标签　139

7．2．5　元素g　140

7．2．6　SVG 形状元素　140

7．2．7　SVG 路径　140

7．3　使用流行的图像编辑工具和服务创建SVG　140

7．4　在Web 页面中插入SVG　142

7．4．1　使用img 标签　142

7．4．2　使用object 标签　142

7．4．3　把SVG 作为背景图像插入　143

7．4．4　关于data URI 的简短介绍　144

7．4．5　生成图像精灵　145

7．5　内联SVG　145

7．5．1　利用符号复用图形对象　146

7．5．2　根据上下文改变内联SVG颜色　147

7．5．3　复用外部图形对象资源　148

7．6　不同插入方式下可以使用的功能　149

7．7　SVG 的怪癖　150

7．7．1　SMIL 动画　150

7．7．2　使用外部样式表为SVG 添加样式　152

7．7．3　使用内联样式为SVG 添加样式　152

7．7．4　用CSS 为SVG 添加动画　153

7．8　使用JavaScript 添加SVG 动画　154

7．9　优化SVG　156

7．10　把SVG 作为滤镜　157

7．11　SVG 中媒体查询的注意事项　159

7．11．1　实现技巧　160

7．11．2　更多资料　160

7．12　小结　161

第8　章 CSS3 过渡、变形和动画　162

8．1　什么是CSS3 过渡以及如何使用它　162

8．1．1　过渡相关的属性　164

8．1．2　过渡的简写语法　165

8．1．3　在不同时间段内过渡不同属性　165

8．1．4　理解过渡调速函数　166

8．1．5　响应式网站中的有趣过渡　167

8．2　CSS 的2D 变形　167

8．2．1　scale　168

8．2．2　translate　168

8．2．3　rotate　171

8．2．4　skew　171

8．2．5　matrix　172

8．2．6　transform-origin 属性　173

8．3　CSS3 的3D 变形　174

8．4　CSS3 动画效果　180

8．5　小结　183

第9　章 表单　184

9．1　HTML5 表单　184

9．2　理解HTML5 表单中的元素　185

9．2．1　placeholder　186

9．2．2　required　186

9．2．3　autofocus　187

9．2．4　autocomplete　188

9．2．5　list 及对应的datalist元素　188

9．3　HTML5 的新输入类型　190

9．3．1　email　190

9．3．2　number　191

9．3．3　url　192

9．3．4　tel　193

9．3．5　search　194

9．3．6　pattern　195

9．3．7　color　196

9．3．8　日期和时间输入类型　196

9．3．9　范围值　198

9．4　如何给不支持新特性的浏览器打补丁　199

9．5　使用CSS 美化HTML5 表单　200

9．5．1　显示必填项　202

9．5．2　创造一个背景填充效果　204

9．6　小结　205

第10　章 实现响应式Web 设计　206

10．1　尽快让设计在浏览器和真实设备上运行起来　207

10．2　在真实设备上观察和使用设计　207

10．3　拥抱渐进增强　208

10．4　确定需要支持的浏览器　209

10．4．1　等价的功能，而不是等价的外观　209

10．4．2　选择要支持的浏览器　209

10．5　分层的用户体验　210

10．6　将CSS 断点与JavaScript 联系起来　211

10．7　避免在生产中使用CSS 框架　212

10．8　采用务实的解决方案　213

10．9　尽可能使用最简单的代码　215

10．10　根据视口隐藏、展示和加载内容　215

10．11　验证器和代码检测工具　217

10．12　性能　218

10．13　下一个划时代的产物　219

10．14　小结　219

使用说明

1、下载并解压，得出pdf文件

2、如果打不开本文件，请务必下载pdf阅读器

3、安装后，在打开解压得出的pdf文件

4、双击进行阅读