响应式Web设计 HTML5和CSS3实践指南PDF电子书下载

第1章 响应式元素及媒介 1

1.1 简介 2

1.2 基于宽度百分比的图像缩放 2

1.3 基于cookie及JavaScript的响应式图像 5

1.4 使视频自适应于屏幕宽度 8

1.5 基于媒介查询的图像缩放 11

1.6 基于媒介查询的动态导航栏 13

1.7 基于尺寸的响应式内边距 18

1.8 基于CSS3按钮的进度条 19

第2章 响应式字体 25

2.1 简介 26

2.2 创建自适应的响应式字体 26

2.3 使用画布实现文本阴影 28

2.4 使用画布实现内侧阴影和外侧阴影 30

2.5 使用画布旋转文本 32

2.6 使用CSS3旋转文本 33

2.7 使用CSS3制作3D文本 35

2.8 基于文本遮罩的文本纹理 37

2.9 基于位置伪类的交替行样式 39

2.10 基于before及after伪元素添加字符 41

2.11 基于相对字体大小的按钮 42

2.12 为字体添加阴影效果 45

2.13 基于边框半径的圆角实现 47

第3章 响应式布局 51

3.1 简介 52

3.2 基于min-width和max-width属性的响应式布局 52

3.3 基于相对内边距的布局控制 55

3.4 为CSS添加媒介查询 58

3.5 基于媒介查询创建响应式宽度布局 62

3.6 基于媒介查询改变图片大小 68

3.7 基于媒介查询隐藏元素 70

3.8 创建平滑过渡的响应式布局 72

第4章 使用响应式框架 84

4.1 简介 85

4.2 使用流式960网格布局 85

4.3 使用Blueprint网格布局 90

4.4 基于三分法的流式布局 95

4.5 响应式960网格框架——Gumby 101

4.6 易上手的Bootstrap框架 107

第5章 设计移动设备优先的Web应用 115

5.1 简介 116

5.2 使用Safari开发者工具的用户代理设置 116

5.3 通过Chrome插件设置用户代理 120

5.4 使用插件调整浏览器窗口大小 123

5.5 学习视窗及其相关选项 124

5.6 为jQuery Mobile添加标签 128

5.7 基于jQuery Mobile添加子页面 132

5.8 基于jQuery Mobile制作列表元素 135

5.9 基于jQuery Mobile开发具有移动设备外观的按钮 143

5.10 仅通过媒介查询为移动设备设置移动版本的样式表 150

5.11 仅为移动设备添加JavaScript功能特效 152

第6章 优化响应式内容 155

6.1 简介 156

6.2 使用IE开发者工具进行响应式测试 156

6.3 浏览器测试——使用插件 160

6.4 开发环境——使用免费IDE 166

6.5 虚拟化——下载VirtualBox 169

6.6 在Chrome中使用浏览器缩放工具 174

第7章 非侵入式JavaScript 178

7.1 简介 179

7.2 基于非侵入式JavaScript编写“HelloWorld” 179

7.3 基于事件监听器创建发光效果的“提交”按钮 183

7.4 制作鼠标悬停后的按钮突出效果 189

7.5 基于非侵入式jQuery改变页面元素大小 193

7.6 基于非侵入式JavaScript的密码遮罩 197

7.7 基于事件监听器实现图像阴影的动态效果 201