阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      响应式 Web 设计 HTML5 和 CSS3 实战

      响应式 Web 设计 HTML5 和 CSS3 实战

      编辑推荐

      适读人群 :所有 Web 开发和设计人员。

      随着移动设备的普及,用户上网的方式发生了巨大变化,无论从样式还是可用性来讲,只适合桌面显示器的网站已经过时了。如今,在设计网站的时候必须同时考虑多种屏幕尺寸和用户体验。如果网站对你或你的客户非常重要,那么实现响应式设计就是当务之急。

      “响应式和移动优先”的设计理念,可以确保无论使用什么设备都可以正常访问你的网站。在这一理念的指导下,本书围绕实战案例,全面讲解了与响应式设计相关的现代 Web 技术,堪称一部“响应式设计大全”。

      这一版根据新的 Web 设计趋势进行了更新,展示了实现现代响应式设计有效的方式,涵盖了创建响应式设计所必需的全部新技术和工具。掌握了这些内容,你设计的网站不仅可以适应当下,更可以顺应未来。

      • 理解响应式设计,以及为何它对现代 Web 设计如此重要
      • 清晰、高效地编写富有语义的 HTML5 标记
      • 使用 CSS3 媒体查询基于设备应用不同的样式,了解媒体查询的新进展
      • 根据不同的屏幕大小、分辨率和使用环境加载不同的图片
      • 掌握表单处理,使用 HTML5 标记添加日期选择器、范围滑块等交互控件
      • 在响应式设计里使用 SVG 提供分辨率无关的图片,修改 SVG 并添加动画效果
      • 使用 CSS 新的特性,如自定义字体、nth-child 选择符、自定义属性及 CSS calc

      内容简介

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

      作者简介

      Ben Frain,Web 开发者、图书作者、演讲者。从 1996 年开始从事 Web 设计与开发,目前是 Bet365 的高级前端工程师。另著有《Sass 和 Compass 设计师指南》。

      在从事 Web 开发之前,他曾是一名怀才不遇的(而且谦虚的)电视演员和科技记者,毕业于索尔福德大学媒体与表演专业。他写过四部(自认为)均被低估的剧本,且至今仍觉得有望卖出其中一部(尽管不像当初那么有信心了)。

      工作之余,在身体和妻子都允许的情况下,他会玩一玩室内足球,或者跟两个儿子练练摔跤。个人网站 www.benfrain.com

      目录

      第 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
      目录
      目录