响应式Web设计：HTML5和CSS3实战作品目录

时间：2023-02-21 04:54:01 | 来源：营销百科

时间：2023-02-21 04:54:01 来源：营销百科

响应式Web设计：HTML5和CSS3实战作品目录：版权声明

Copyright©2012PacktPublishing.FirstpublishedintheEnglishlanguageunderthetitleResponsiveWebDesignwithHTML5andCSS3.SimplifiedChine……

译者序

蒂姆·伯纳斯-李在1991年制作并发布了第一个网站，如今刚刚过去21个年头。在这21年里，计算机和互联网快速发展，这个世界的面貌也日新月异。在这个过程中，网页设计从无到有，从简单渐至专业，从可有可无变为广受关注。网页设计方法也在跟随时代不断创新，从最初简单的文字排版，到表格布局，再到DIV CSS，……

前言

前言如果你想给自己的网站做一个单独的'手机版'，请三思而后行！响应式网页设计提供了一种设计方法，可以使同一网站在智能手机、桌面电脑，以及介于这两者之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸，合理地为现有及将来的各种设备提供最佳的浏览体验。本书提供了一整套方法，用来将一个现有的固定……

致谢

致谢首先要感谢网络社区。没有大家集思广益的才智、慷慨大方的文档和开放共享的解决方案，我不可能在互联网行业做出现在这点还稍稍令我自豪的事情。其次，我要感谢响应式网页设计之父EthanMarcotte。他和我从未谋面或交谈过，但他的方法论现在每时每刻都在影响着我制作网页的方法。毫无疑问，假如有哪……

第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.7CSS3为响应式设计和更多创新奠定了基础

1.7.1底线：CSS3不破坏任何东西

1.7.2CSS3如何解决日常设计问题

1.8看呐，不用图片

1.9HTML5和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阻止移动浏览器自动调整页面大小

2.5针对不同视口宽度修正设计

2.6响应式设计中内容始终优先

2.7媒体查询只是必要条件之一

2.8小结

第3章拥抱流式布局

20世纪90年代末，我刚学习做网页的时候，页面布局结构都是基于表格的。通常，屏幕上显示的各部分元素都是百分比宽度。例如，左侧的导航栏可能占据20%的屏幕宽度，主内容区占据80%。那时的浏览器视口还没有像今天这样天差地别，所以表格式布局在有限范围的视口中表现良好且能自由伸缩。没人太在意某些句子在不同大……

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为不同的屏幕尺寸提供不同的图片

3.7流动网格布局和媒体查询的默契配合

3.8CSS网格系统

3.9小结

第4章响应式设计中的HTML5

HTML5是从WebApplications1.0项目发展而来的，由网页超文本技术工作小组（WHATWG）发起，后被W3C采纳。HTML5规范的大部分内容都偏重于处理Web应用程序。就算你不创建Web应用程序，也并不意味着HTML5对你制作响应式设计就没有太大价值。所以，HTML5的一部分特性与制……

4.1HTML5的哪些部分现在就能用

4.1.1大多数网站可以用HTML5编写

4.1.2腻子脚本和Modernizr

4.2如何编写HTML5网页

4.2.1HTML5的精简之道

4.2.2HTML5标签的合理写法

4.2.3伟大的标签万岁

4.2.4HTML的废弃零件

4.3HTML5的全新语义化元素

4.3.1

4.3.2

4.3.3

4.3.4

4.3.5

4.3.6

4.3.7

4.3.8

4.4HTML5结构元素的实际用法

4.5HTML5的文本级语义元素

4.5.1

4.5.2

4.5.3

4.5.4在页面中应用文本层语义元素

4.6遵循WAI-ARIA实现无障碍站点

4.7在HTML5中嵌入媒体

4.8用HTML5的方法为页面添加视频或音频

4.8.1提供备用的媒体源文件

4.8.2针对老版本浏览器的备用方案

4.8.3和标签的用法基本一致

4.9响应式视频

4.10离线Web应用

4.10.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：选择器、字体和颜色模式

第1章我们提到过，通过移动通信网络来浏览网页的人越来越多。当前电信网络的速度差异很大，所以我们需要考虑带宽限制和网站的加载时间。这就像回到了当年使用56K调制解调器的时代，不得不考虑页面及其中包含的图片和多媒体文件需要加载多长时间。现在，我们得面对与之类似的加载时间问题。正如表格布局技术中的百分比规……

5.1CSS3给前端开发人员带来了什么

5.1.1InternetExplorer6到8对CSS3的支持

5.1.2使用CSS3设计和开发页面

5.2CSS规则解析

5.3私有前缀及其用法

5.4快速而有效的CSS技巧

5.4.1CSS3多栏布局

5.4.2文字换行

5.5CSS3的新增选择器及其用法

5.5.1CSS3属性选择器

5.5.2CSS3结构伪类

5.5.3对伪元素的修正

5.6自定义网页字体

5.6.1@font-face规则

5.6.2使用@font-face嵌入网页字体

5.7帮帮我，标题模糊怎么办

5.8新的CSS3颜色格式和透明度

5.8.1RGB颜色

5.8.2HSL颜色

5.8.3针对IE6、IE7和IE8提供备用颜色值

5.8.4透明通道

5.9小结

第6章用CSS3创造令人惊艳的美

上一章，我们学习了一些简捷有效的CSS3技巧，対制作响应式设计很有帮助。另外还使用CSS3的@font-face规则为网页添加了自定义字体，使其视觉效果大大提升。此外还学习了CSS3中选择DOM元素的工具。在学习了这些基础知识之后，我们来看看CSS3的一些高级特性，这些特性能给我们的响应式设计带来显……

6.1文字阴影

6.1.1HEX、HSL或RGB颜色都可以

6.1.2px、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.3.2径向背景渐变

6.3.3重复渐变

6.4背景渐变图案

6.5CSS3的响应性

6.6组合使用CSS3属性

6.7多重背景图片

6.7.1背景图片大小

6.7.2背景图片位置

6.7.3背景属性的缩写语法

6.8更多CSS特性

6.9可缩放图标：响应式设计中的完美选择

6.10小结

第7章CSS3过渡、变形和动画

在前面两章中，我们学习了一些CSS3的新特性和新功能。不过到目前为止，我们看到的所有效果都是静态的。其实CSS3能做的远不止于此。目前的情况是，如果页面上需要一些动画效果，要么你自己编写JavaScript，要么使用JavaScript框架（如jQuery）来提高效率。但是，一些熟悉CSS3的同志……

7.1什么是CSS3过渡以及如何使用它

7.1.1过渡相关的属性

7.1.2响应式网站中的有趣过渡

7.2CSS3的2D变形

7.3尝试CSS3的3D变形

7.3.1分析3D变形效果

7.3.23D变形尚未成熟

7.4CSS3动画效果

7.5小结

第8章用HTML5和CSS3征服表单

过去，想要让表单风格跨浏览器保持一致是很困难的。而且还需要JavaScript来验证表单输入，此外，也缺少一些处理日常信息（如电话号码、电子邮箱以及URL）的输入类型。好消息是HTML5基本上解决了这些常见的问题。接下来我们来熟悉一下新的HTML5表单特性，来看看它们如何减轻我们的负担。在响应式……

8.1HTML5表单

8.1.1理解HTML5表单中的元素

8.1.2placeholder

8.1.3required

8.1.4autofocus

8.1.5autocomplete

8.1.6list（及对应的datalist元素）

8.1.7HTML5的新输入类型

8.1.8日期和时间输入类型

8.2如何给不支持新特性的浏览器打补丁

8.3使用CSS3美化HTML5表单

8.4小结

第9章解决跨浏览器问题

在最后一章，我们将学习以下内容渐进增强和优雅降级之间的根本区别如何让老版本InternetExplorer支持响应式设计何如使用Modernizr按需加载CSS文件何如使用Modernizr按需加载JavaScript补丁文件如何将超长导航列表在小视口中转换为选择菜单如何为高分辨率（视……

9.1渐进增强与优雅降级

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小结