响应式web设计：html5和css3实战

《响应式web设计：html5和css3实战》由会员分享，可在线阅读，更多相关《响应式web设计：html5和css3实战（33页珍藏版）》请在金锄头文库上搜索。

1、前端笔记米点优站 关于作者 译者序 前言 第1章 HTML5、CSS3和响应式网页设计入门 1.1 为什么智能手机很重要（而老版的 IE 不再重要） 1.2 响应式设计一定是最佳选择吗 1.3 响应式网页设计的定义 1.4 为什么要在响应式设计上停滞不前 1.5 响应式网页设计示例 1.5.1 下载视口调试工具 1.5.2 在线创意源泉 1.6 为什么 HTML5很优秀 1.6.1 省时省力 1.6.2 新增了语义化标签元素 1.7 CSS3为响应式设计和更多创新奠定了基础 1.7.1 底线：CSS3不破坏任何东西 1.7.2 CSS3如何解决日常设计问题 1.8 看呐，不用图片 CSS3还带

2、来了什么 1.9 HTML5和 CSS3现在就能用吗 1.10 响应式网页设计不是灵丹妙药 1.11 引导客户：网站不必在所有浏览器中表现一致 前端笔记米点优站 1.12 小结 第2章 媒体查询：支持不同的视口 2.1 现在就能使用媒体查询 2.2 为什么响应式设计需要媒体查询 2.2.1 媒体查询语法 2.2.2 媒体查询能检测那些特性 2.2.3 用媒体查询改造我们的设计 2.2.4 加载媒体查询的最佳方法 2.3 我们的第一个响应式设计 2.3.1 我们的设计是固定宽度的，不要惊讶 2.3.2 响应式设计中要保证图片尽可能精简 2.3.3 小视口下的内容剪切 2.4 阻止移动浏览器自动调

3、整页面大小 2.5 针对不同视口宽度修正设计 2.6 响应式设计中内容始终优先 2.7 媒体查询只是必要条件之一 我们需要流动布局 2.8 小结 第3章 拥抱流式布局 3.1 固定布局经不起未来考验 3.2 为什么响应式设计需要百分比布局 3.3 将网页从固定布局修改为百分比布局 前端笔记米点优站 3.3.1 需要牢记的公式 3.3.2 设置百分比元素的上下文 3.3.3 必须时刻牢记上下文 3.4 用 em 替换 px 3.5 弹性图片 3.5.1 让图片随视口缩放 3.5.2 为特定图片指定特定规则 3.5.3 给弹性图片设置阈值 3.5.4 超级全能的 max-width 属性 3.6

4、为不同的屏幕尺寸提供不同的图片 设置自适应图片 把背景图片放在其他地方 3.7 流动网格布局和媒体查询的默契配合 3.8 CSS 网格系统 使用网格系统快速搭建网站 3.9 小结 第4章 响应式设计中的 HTML5 4.1 HTML5的哪些部分现在就能用 4.1.1 大多数网站可以用 HTML5编写 4.1.2 腻子脚本和 Modernizr 4.2 如何编写 HTML5网页 4.2.1 HTML5的精简之道 4.2.2 HTML5标签的合理写法 前端笔记米点优站 4.2.3 伟大的标签万岁 4.2.4 HTML 的废弃零件 4.3 HTML5的全新语义化元素 4.3.1 4.3.2 4.3.

5、3 4.3.4 4.3.5 HTML5的大纲结构算法 4.3.6 4.3.7 4.3.8 4.4 HTML5结构元素的实际用法 网站的主体内容怎么办？ 4.5 HTML5的文本级语义元素 4.5.1 4.5.2 4.5.3 4.5.4 在页面中应用文本层语义元素 4.6 遵循 WAI-ARIA 实现无障碍站点 ARIA 的地标角色 4.7 在 HTML5中嵌入媒体 4.8 用 HTML5的方法为页面添加视频或音频 前端笔记米点优站 4.8.1 提供备用的媒体源文件 4.8.2 针对老版本浏览器的备用方案 4.8.3 和标签的用法基本一致 4.9 响应式视频 4.10 离线 Web 应用 4.1

6、0.1 离线 Web 应用概述 4.10.2 让网页可离线使用 4.10.3 理解 manifest 文件 4.10.4 页面被自动加载到离线缓存 4.10.5 版本注释的用途 4.10.6 离线访问网站 4.10.7 离线 Web 应用的故障诊断 4.11 小结 第5章 CSS3：选择器、字体和颜色模式 5.1 CSS3给前端开发人员带来了什么 5.1.1 Internet Explorer 6到8对 CSS3的支持 5.1.2 使用 CSS3设计和开发页面 5.2 CSS 规则解析 5.3 私有前缀及其用法 5.4 快速而有效的 CSS 技巧 5.4.1 CSS3多栏布局 增加栏位间隙和分

7、割线 前端笔记米点优站 5.4.2 文字换行 5.5 CSS3的新增选择器及其用法 5.5.1 CSS3属性选择器 1. CSS3的子字符串匹配属性选择器 2. 一个活生生的例子 5.5.2 CSS3结构伪类 1. :last-child 选择器 2. nth-child 选择器 3. 理解 nth 规则的作用 4. 否定（:not）选择器 5.5.3 对伪元素的修正 :first-line 对响应式设计来说好用吗 5.6 自定义网页字体 5.6.1 font-face 规则 5.6.2 使用font-face 嵌入网页字体 5.7 帮帮我，标题模糊怎么办 在响应式设计中使用自定义font-f

8、ace 字体的注意事项 5.8 新的 CSS3颜色格式和透明度 5.8.1 RGB 颜色 5.8.2 HSL 颜色 5.8.3 针对 IE6、IE7和 IE8提供备用颜色值 5.8.4 透明通道 前端笔记米点优站 5.9 小结 第6章 用 CSS3创造令人惊艳的美 6.1 文字阴影 6.1.1 HEX、HSL 或 RGB 颜色都可以 6.1.2 px、em 或 rem 都行 6.1.3 取消文字阴影 左上方阴影 6.1.4 制作浮雕文字阴影效果 6.1.5 多重文字阴影 6.2 盒阴影 6.2.1 内阴影 6.2.2 多重阴影 6.3 背景渐变 6.3.1 线性背景渐变 分解线性渐变语法 6.

9、3.2 径向背景渐变 分解径向渐变语法 6.3.3 重复渐变 6.4 背景渐变图案 6.5 CSS3的响应性 6.6 组合使用 CSS3属性 6.7 多重背景图片 6.7.1 背景图片大小 前端笔记米点优站 6.7.2 背景图片位置 6.7.3 背景属性的缩写语法 6.8 更多 CSS 特性 6.9 可缩放图标：响应式设计中的完美选择 6.10 小结 第7章 CSS3过渡、变形和动画 7.1 什么是 CSS3过渡以及如何使用它 7.1.1 过渡相关的属性 1. 过渡的简写语法 2. 在不同时间段内过渡不同属性 3. 理解过渡调速函数 7.1.2 响应式网站中的有趣过渡 7.2 CSS3的2D

10、变形 我们能做哪些变形 1. scale 2. translate 3. rotate 4. skew 5. matrix 6. transform-origin 属性 7.3 尝试 CSS3的3D 变形 7.3.1 分析3D 变形效果 前端笔记米点优站 7.3.2 3D 变形尚未成熟 7.4 CSS3动画效果 组合使用 CSS3变形和动画 7.5 小结 第8章 用 HTML5和 CSS3征服表单 8.1 HTML5表单 8.1.1 理解 HTML5表单中的元素 8.1.2 placeholder 8.1.3 required 8.1.4 autofocus 8.1.5 autocomplet

11、e 8.1.6 list（及对应的 datalist 元素） 8.1.7 HTML5的新输入类型 1. email 2. number 3. url 4. tel 5. search 6. pattern 7. color 8.1.8 日期和时间输入类型 1. date 前端笔记米点优站 2. month 3. week 4. time 5. datetime 和 datetime-local 6. range 8.2 如何给不支持新特性的浏览器打补丁 8.3 使用 CSS3美化 HTML5表单 针对表单的 CSS3伪类选择器 8.4 小结 第9章 解决跨浏览器问题 9.1 渐进增强与优雅降级

12、 现状 9.2 该不该修复老版本 IE 9.2.1 统计数据（再看看世界的变化） 9.2.2 个人选择 9.3 前端的瑞士军刀：Modernizr 9.3.1 使用 Modernizr 辅助修正样式问题 9.3.2 使用 Modernizr 让老版本 IE 支持 HTML5元素 9.3.3 给 IE6、7、8追加 min/max 媒体查询功能 9.3.4 使用 Modernizr 按需加载资源 9.4 必要时将导航链接转换为下拉菜单 9.5 高分辨率设备（未来趋势） 前端笔记米点优站 9.6 小结 附录 附录1：响应式 Web 设计（HTML5和 CSS3）工具集 附录2：响应式 Web 设计

13、（HTML5和 CSS3）范例网站 附录3：本书涉及的 HTML5及 CSS3标准索引 附录4：本书提到的电影索引 关于作者 Ben Frain 是一名具有十多年经验的网页设计师和前端工程师，直接与世界各地的客户和设 计机构并肩工作。同时他还是一名技术记者，定期为一些关注 Mac 平台、前沿科技、网页 设计和航空技术的刊物撰稿。 在此之前，他曾是一名怀才不遇的（而且谦虚的）电视演员，毕业于索尔福德大学的媒体与 表演专业。 他写了四部 （个人认为） 同样被低估的剧本， 而且始终心怀能卖出一部的信念 （尽 管不像最初那么强烈了） 。工作之余，在身体（和妻子）允许的情况下，他喜欢玩室内足球。 他的个

14、人网站是 ，Twitter 地址是 首先要感谢网络社区。没有大家集思广益的才智、慷慨大方的文档和开放共享的解决方案， 我不可能在互联网行业做出现在这点还稍稍令我自豪的事情。 其次，我要感谢响应式网页设计之父 Ethan Marcotte。他和我从未谋面或交谈过，但他的方 法论现在每时每刻都在影响着我制作网页的方法。 毫无疑问， 假如有哪些地方造成读者对响 应式方法论的误解，那都要怪我自己表达不好。 最后，感谢我的家人。看过 （同样被低估的） 义海倾情1的人都知道：“血浓于水。其他 人都是陌生人。” 前端笔记米点优站 1义海倾情Wyatt Earp： 。译者注 译者序 蒂姆伯纳斯-李在1991年

15、制作并发布了第一个网站，如今刚刚过去21个年头。在这21年里， 计算机和互联网快速发展， 这个世界的面貌也日新月异。 在这个过程中， 网页设计从无到有， 从简单渐至专业，从可有可无变为广受关注。网页设计方法也在跟随时代不断创新，从最初 简单的文字排版，到表格布局，再到 DIV+CSS，直到现在广为流行的网格布局、流式布局 等，设计师和开发者们一直致力于为全球网民提供更好的设计观感和使用体验。 iOS 和 Android 的发布，掀起了移动互联网的浪潮，智能手机、平板电脑、智能家电等新设 备层出不穷，我们的世界变得更加精彩纷呈。但这却给网页设计带来了新的挑战，在面对形 形色色的终端设备、千差万别的屏幕分辨率，以及良莠不齐的网络连接质量时，目前的设计 方法显得力不从心。 我们无法预料用户的设备和网络状况， 更不可能为每种设备专门设计一 套网站，那么在移动互联网时代，如何创新为用户提供更好的设计和体验呢？ 2010年5月25日，伊桑马科特发表在 A List Apart 上的一篇文章，为我们打开了思路。在这 篇名为Responsive Web Design的文章中，伊桑马科特