[图灵程序设计丛书].响应式Web设计:HTML5和CSS3实战.第2版【neikuw.com】.pdf
《[图灵程序设计丛书].响应式Web设计:HTML5和CSS3实战.第2版【neikuw.com】.pdf》由会员分享,可在线阅读,更多相关《[图灵程序设计丛书].响应式Web设计:HTML5和CSS3实战.第2版【neikuw.com】.pdf(231页珍藏版)》请在文库网上搜索。
1、内 容 提 要本书将当前 Web 设计中热门的响应式设计技术与 HTML5 和 CSS3 结合起来,为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。书中不仅讨论了媒体查询、弹性布局、响应式图片,更将最新和最有用的 HTML5 和 CSS3 技术一并讲解,是学习最新 Web 设计技术不可多得的佳作。本书适合所有 Web 开发和设计人员阅读。定价:59.00元读者服务热线:(010)51095186转600印装质量热线:(010)81055316反盗版热线:(010)81055315广告经营许可证:京东工商广字第 8052 号著英 Ben Frain译奇舞团责任编辑岳新欣责任印
2、制彭志环人民邮电出版社出版发行北京市丰台区成寿寺路11号邮编100164电子邮件网址http:/北京印刷开本:80010001/16印张:14.5 字数:343千字2017年 2 月第 1 版印数:1 4 000册2017年 2 月北京第 1 次印刷著作权合同登记号 图字:01-2016-4800号前 言 1 1 2 3 4 5 8 10 13 9 6 7 12 11 前 言响应式Web设计是一种统一的解决方案,可以让Web作品适配手机、平板和桌面电脑。响应式的网站可以适应用户的屏幕大小,为今天和明天的设备都提供最佳用户体验。 本书涵盖响应式Web设计的所有相关内容。不仅如此,通过介绍最新和最
3、有用的HTML5和CSS3技术,还扩充了响应式设计的方法库,让设计变得更简单,更好维护。此外,本书还讨论了编写和交付代码、图片、文件的最佳实践。 只要会用HTML和CSS,就可以学会响应式Web设计。 本书内容第1章, “响应式Web设计基础” ,简要介绍响应式Web设计相关的技术。 第2章, “媒体查询” ,系统讲解CSS媒体查询,包括它的能力、语法,以及各种使用方式。 第3章, “弹性布局与响应式图片” ,展示如何设计比例缩放布局和响应式图片,并对Flexbox布局进行全方位介绍。 第4章, “HTML5与响应式Web设计” ,探讨HTML5中的语义元素、文本级语义,以及无障碍方面的考虑,
4、还介绍了如何在网页中添加视频和音频。 第5章, “CSS3新特性” ,探讨CSS选择符、HSLA及RGBA颜色、Web排版、视口相对单位,等等。 第6章, “CSS3高级技术” ,探讨CSS滤镜、盒阴影、线性与放射渐变、多背影,以及如何为高分辨率设备提供背景图片。 第7章, “SVG与响应式Web设计” ,讲述在文档中使用SVG、将SVG作为背影图片,以及通过JavaScript添加交互。 第8章, “CSS3过渡、变形和动画” ,看一看使用CSS能够做出哪些交互与动画效果。 第9章, “表单” ,在HTML5和CSS3之前,表单一直是个难题,现在不同了。 2 前 言 第10章, “实现响应式
5、Web设计” ,阐述在着手实现响应式Web设计时需要考虑的重要因素,并给大家提供一些实用的建议。 阅读前提需要一个文本编辑器需要一个主流浏览器喜欢一些无聊的笑话读者对象你是否需要写两个网站,一个针对手机,一个针对大显示器?或者你已经完成了一版响应式Web设计作品,但不知道怎么把它跟之前的网站集成起来?好,本书可以告诉你想知道的一切。 只需一些HTML和CSS基础就可以轻松看懂这本书,而本书还包含了关于响应式Web设计及优秀网站设计的更多内容。 排版约定在本书中,你会发现一些不同的文本样式,用以区别不同种类的信息。下面是这些样式的一些例子和解释。 正文中的代码、数据库表名、用户输入会以等宽字体进
6、行表示,如: “为了解决前面的问题,可以在网页的中添加下面这行代码。 ” 代码段格式如下所示: img max-width: 100%; 新术语和重点词汇均采用楷体字表示。这个图标表示警告或需要特别注意的内容。 这个图标表示提示或者技巧。 前 言 3 1 2 3 4 5 8 10 13 9 6 7 12 11 读者反馈我们总是欢迎读者的反馈。如果你对本书有些想法,有什么喜欢或是不喜欢的,请反馈给我们。这将有助于我们开发出能够充分满足读者需求的图书。 一般的反馈,请发送电子邮件至,并在邮件主题中包含书名。 如果你在某个领域有专长,并有意编写一本书或是贡献一份力量,请参考我们的作者指南,地址为ht
7、tp:/ 客户支持现在,你是一位令我们自豪的Packt图书的拥有者,我们会尽全力帮你充分利用你手中的书。 下载示例代码你可以用你的账户从http:/下载所有已购买Packt图书的示例代码文件。如果你从其他地方购买本书,可以访问http:/ 勘误表虽然我们已尽力确保本书内容正确,但出错仍旧在所难免。如果你在我们的书中发现错误,不管是文本还是代码,希望能告知我们,我们不胜感激。这样做,你可以使其他读者免受挫败,帮助我们改进本书的后续版本。如果你发现任何错误,请访问http:/ submit-errata提交,选择你的书,点击勘误表提交表单的链接,并输入详细说明。勘误一经核实,你的提交将被接受,此勘
8、误将上传到本公司网站或添加到现有勘误表。从http:/www.packtpub. com/support选择书名就可以查看现有的勘误表。 侵权行为版权材料在互联网上的盗版是所有媒体都要面对的问题。Packt非常重视保护版权和许可证。如果你发现我们的作品在互联网上被非法复制,不管以什么形式,都请立即为我们提供位置地址或网站名称,以便我们可以寻求补救。 请把可疑盗版材料的链接发到。 非常感谢你帮助我们保护作者,以及保护我们给你带来有价值内容的能力。 4 前 言 问题如果你对本书内容存有疑问,不管是哪个方面,都可以通过联系我们,我们将尽最大努力来解决。 电子书扫描如下二维码,即可购买本书电子版。 目
9、 录 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 18 17 目 录第 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 im
10、port与媒体查询 . 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 级
11、 . 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 .
12、 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 2 目 录 3.4.2 通过srcset切换分辨率 . 59 3.4.3 srcset及sizes联合切换 . 59 3.4.4
13、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 元素.
14、 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 如果你只能
15、记住一件事 . 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 在 CS
16、S 中创建分支 . 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.
17、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 目 录 3 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 18 17 5.11.2 通过font-face实现 Web字体 . 107 5.11.3 注意
18、事项 . 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
19、.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 第
20、 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.
21、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 为
22、 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 4 目 录 8.1.4 理解
23、过渡调速函数 . 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
24、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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 图灵程序设计丛书 neikuw.com 程序设计 丛书 响应 Web 设计 HTML5 CSS3 实战 neikuw com
链接地址:https://www.wenkunet.com/p-9477173.html