万本电子书0元读

万本电子书0元读

顶部广告

响应式Web设计HTML5和CSS3实战第2版电子书

售       价:¥

纸质售价:¥43.90购买纸书

240人正在读 | 0人评论 6.2

作       者:本·弗莱恩(BenFrain)

出  版  社:人民邮电出版社

出版时间:2017-01-01

字       数:17.3万

所属分类: 科技 > 计算机/网络 > 程序设计

温馨提示:数字商品不支持退换货,不提供源文件,不支持导出打印

为你推荐

  • 读书简介
  • 目录
  • 累计评论(0条)
  • 读书简介
  • 目录
  • 累计评论(0条)
本书将当前Web 设计中热门的响应式设计技术与HTML5 和CSS3 结合起来,为读者全面深地讲解了针对各种屏幕大小设计和发现代网站的各种技术。书中不仅讨论了媒体查询、弹性布局、响应式图片,更将新的和有用的HTML5 和CSS3 技术一并讲解,是学习新Web 设计技术不可多得的佳作。<br/>【推荐语】<br/>随着移动设备的普及,用户上网的方式发生了巨大变化,无论从样式还是可用性来讲,只适合桌面显示器的网站已经过时了。如今,在设计网站的时候必须同时考虑多种屏幕尺寸和用户体验。如果网站对你或你的客户品牌非常重要,那么实现响应式设计就是当务之急。   “响应式和移动优先”的设计理念,可以确保无论使用什么设备都可以正常访问你的网站。在这一理念的指导下,本书围绕实战案例,全面讲解了与响应式设计相关的现代Web技术,堪称一部“响应式设计大全”。   这一版根据*的Web设计趋势行了更新,展示了实现现代响应式设计*有效的方式,涵盖了创建优秀的响应式设计所必需的全部*技术和工具。掌握了这些内容,你设计的网站不仅可以适应当下,更可以顺应未来。   - 理解响应式设计,以及为何它对现代Web设计如此重要 - 清晰、高效地编写富有语义的HTML5标记 - 使用CSS3媒体查询基于设备应用不同的样式,了解媒体查询的*展 - 根据不同的屏幕大小、分辨率和使用环境加载不同的图片 - 掌握表单处理,使用HTML5标记添加日期选择器、范围滑块等交互控件 - 在响应式设计里使用SVG提供分辨率无关的图片,修改SVG并添加动画效果 - 使用CSS*的特性,如自定义字体、nth-child选择符、自定义属性及CSScalc<br/>【作者】<br/>BenFrain   Web发者、图书作者、演讲者。从1996年始从事Web设计与发,目前是***365的高级前端工程师。另著有《Sass和Compass设计师指南》。   在从事Web发之前,他曾是一名怀才不遇的(而且谦虚的)电视演员和科技记者,毕业于索尔福德大学媒体与表演专业。他写过四部(自认为)均被低估的剧本,且至今仍觉得有望卖出其中一部(尽管不像初那么有信心了)。   工作之余,在身体和妻子都允许的情况下,他会玩一玩室内足球,或者跟两个儿子练练摔跤。个人网站www.benfrain.com,Twitter账号@benfrain。   译者简介: 本书译者均来自由月影领衔的奇虎360*前端团队——奇舞团(75team)。   李松峰 资深技术翻译,译有《JavaScript高级程序设计》《简约至上:交互式设计四策略》等数十部技术和设计书籍,现为“奇舞团”高级发工程师、《奇舞周刊》总编。   钟恒 360奇舞团前端工程师。<br/>
目录展开

版权声明

致谢

前言

本书内容

阅读前提

读者对象

排版约定

读者反馈

客户支持

第 1 章 响应式Web设计基础

1.1 定义需求

1.2 什么是响应式Web设计

响应式Web设计的由来

1.3 浏览器支持

关于工具和文本编辑器

1.4 第一个响应式的例子

1.4.1 HTML

1.4.2 图片

1.4.3 媒体查询

1.5 示例的不足之处

1.6 小结

第 2 章 媒体查询

2.1 为什么响应式Web设计需要媒体查询

CSS中基本的条件逻辑

2.2 媒体查询的语法

在link标签中使用媒体查询

2.3 组合媒体查询

2.3.1 @import与媒体查询

2.3.2 在CSS中使用媒体查询

2.3.3 媒体查询可以测试哪些特性

2.4 通过媒体查询修改设计

2.4.1 任何CSS都可以放在媒体查询里

2.4.2 针对高分辨率设备的媒体查询

2.5 组织和编写媒体查询的注意事项

2.5.1 使用媒体查询链接不同的CSS文件

2.5.2 分隔媒体查询的利弊

2.5.3 把媒体查询写在常规样式表中

2.6 组合媒体查询还是把它们写在需要的地方

2.7 关于视口的meta标签

2.8 媒体查询4级

2.8.1 可编程的媒体特性

2.8.2 交互媒体特性

2.8.3 悬停媒体特性

2.8.4 环境媒体特性

2.9 小结

第 3 章 弹性布局与响应式图片

3.1 将固定像素大小转换为弹性比例大小

3.1.1 为什么需要Flexbox

3.1.2 行内块与空白

3.1.3 浮动

3.1.4 表格与表元

3.2 Flexbox概述

3.2.1 Flexbox三级跳

3.2.2 浏览器对Flexbox的支持

3.3 使用Flexbox

3.3.1 完美垂直居中文本

3.3.2 偏移

3.3.3 反序

3.3.4 不同媒体查询中的不同Flexbox布局

3.3.5 行内伸缩

3.3.6 Flexbox的对齐

3.3.7 flex

3.3.8 简单的粘附页脚

3.3.9 改变原始次序

3.3.10 Flexbox小结

3.4 响应式图片

3.4.1 响应式图片的固有问题

3.4.2 通过srcset切换分辨率

3.4.3 srcset及sizes联合切换

3.4.4 picture元素

3.5 小结

第 4 章 HTML5与响应式Web设计

4.1 得到普遍支持的HTML5标记

4.2 开始写HTML5网页

4.2.1 doctype

4.2.2 HTML标签与lang属性

4.2.3 指定替代语言

4.2.4 字符编码

4.3 宽容的HTML5

4.3.1 理性编写HTML5

4.3.2 向<a>标签致敬

4.4 HTML5的新语义元素

4.4.1 <main>元素

4.4.2 <section>元素

4.4.3 <nav>元素

4.4.4 <article>元素

4.4.5 <aside>元素

4.4.6 <figure>和<figcaption>元素

4.4.7 <detail>和<summary>元素

4.4.8 <header>元素

4.4.9 <footer>元素

4.4.10 <address>元素

4.4.11 h1到h6

4.5 HTML5文本级元素

4.5.1 <b>元素

4.5.2 <em>元素

4.5.3 <i>元素

4.6 作废的HTML特性

4.7 使用HTML5元素

凭常识选择元素

4.8 WCAG和WAI-ARIA

4.8.1 WCAG

4.8.2 WAI-ARIA

4.8.3 如果你只能记住一件事

4.8.4 ARIA的更多用途

4.9 在HTML5中嵌入媒体

4.9.1 使用HTML5视频和音频

4.9.2 audio与video几乎一样

4.10 响应式HTML5视频与内嵌框架

4.11 关于“离线优先”

4.12 小结

第 5 章 CSS3新特性

5.1 没人无所不知

5.2 剖析CSS规则

5.3 便捷的CSS技巧

CSS响应式多列布局

5.4 断字

5.4.1 截短文本

5.4.2 创建水平滚动面板

5.5 在CSS中创建分支

5.5.1 特性查询

5.5.2 组合条件

5.5.3 Modernizr

5.6 新CSS3选择符

5.6.1 CSS3属性选择符

5.6.2 CSS3子字符串匹配属性选择符

5.6.3 属性选择符的注意事项

5.6.4 属性选择符选择以数值开头的ID和类

5.7 CSS3结构化伪类

5.7.1 :last-child

5.7.2 nth-child

5.7.3 理解nth

5.7.4 基于nth的选择与响应式设计

5.7.5 :not

5.7.6 :empty

5.7.7 :first-line

5.8 CSS自定义属性和变量

5.9 CSS calc

5.10 CSS Level 4选择符

5.10.1 :has伪类

5.10.2 相对视口的长度

5.11 Web排版

5.11.1 @font-face

5.11.2 通过@font-face实现Web字体

5.11.3 注意事项

5.12 CSS3的新颜色格式及透明度

5.12.1 RGB

5.12.2 HSL

5.12.3 alpha通道

5.12.4 CSS Color Module Level 4的颜色操作

5.13 小结

第 6 章 CSS3高级技术

6.1 CSS3的文字阴影特效

6.1.1 省略blur值

6.1.2 多文字阴影

6.2 盒阴影

6.2.1 内阴影

6.2.2 多重阴影

6.2.3 阴影尺寸

6.3 背景渐变

6.3.1 线性渐变语法

6.3.2 径向渐变背景

6.3.3 为响应式而生的关键字

6.4 重复渐变

6.5 使用渐变背景创造图案

6.6 多张背景图片

6.6.1 背景大小

6.6.2 背景位置

6.6.3 背景属性的缩写

6.7 高分辨率背景图像

6.8 CSS滤镜

6.8.1 可用的CSS滤镜

6.8.2 使用多个CSS滤镜

6.9 CSS性能的警告

CSS遮罩和剪裁的注意事项

6.10 小结

第 7 章 SVG与响应式Web设计

7.1 SVG的历史

7.2 用文档表示的图像

7.2.1 SVG的根元素

7.2.2 命名空间

7.2.3 标题和描述标签

7.2.4 defs标签

7.2.5 元素g

7.2.6 SVG形状元素

7.2.7 SVG路径

7.3 使用流行的图像编辑工具和服务创建SVG

利用SVG图标服务

7.4 在Web页面中插入SVG

7.4.1 使用img标签

7.4.2 使用object标签

7.4.3 把SVG作为背景图像插入

7.4.4 关于data URI的简短介绍

7.4.5 生成图像精灵

7.5 内联SVG

7.5.1 利用符号复用图形对象

7.5.2 根据上下文改变内联SVG颜色

7.5.3 复用外部图形对象资源

7.6 不同插入方式下可以使用的功能

浏览器兼容性问题

7.7 SVG的怪癖

7.7.1 SMIL动画

7.7.2 使用外部样式表为SVG添加样式

7.7.3 使用内联样式为SVG添加样式

7.7.4 用CSS为SVG添加动画

7.8 使用JavaScript添加SVG动画

使用GreenSock添加SVG动画

7.9 优化SVG

7.10 把SVG作为滤镜

7.11 SVG中媒体查询的注意事项

7.11.1 实现技巧

7.11.2 更多资料

7.12 小结

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

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

8.1.1 过渡相关的属性

8.1.2 过渡的简写语法

8.1.3 在不同时间段内过渡不同属性

8.1.4 理解过渡调速函数

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

8.2 CSS的2D变形

8.2.1 scale

8.2.2 translate

8.2.3 rotate

8.2.4 skew

8.2.5 matrix

8.2.6 transform-origin属性

8.3 CSS3的3D变形

transform3d属性

8.4 CSS3动画效果

animation-fill-mode属性

8.5 小结

第 9 章 表单

9.1 HTML5表单

9.2 理解HTML5表单中的元素

9.2.1 placeholder

9.2.2 required

9.2.3 autofocus

9.2.4 autocomplete

9.2.5 list及对应的datalist元素

9.3 HTML5的新输入类型

9.3.1 email

9.3.2 number

9.3.3 url

9.3.4 tel

9.3.5 search

9.3.6 pattern

9.3.7 color

9.3.8 日期和时间输入类型

9.3.9 范围值

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

9.5 使用CSS美化HTML5表单

9.5.1 显示必填项

9.5.2 创造一个背景填充效果

9.6 小结

第 10 章 实现响应式Web设计

10.1 尽快让设计在浏览器和真实设备上运行起来

让设计决定断点

10.2 在真实设备上观察和使用设计

10.3 拥抱渐进增强

10.4 确定需要支持的浏览器

10.4.1 等价的功能,而不是等价的外观

10.4.2 选择要支持的浏览器

10.5 分层的用户体验

实现体验分层

10.6 将CSS断点与JavaScript联系起来

10.7 避免在生产中使用CSS框架

10.8 采用务实的解决方案

使用链接代替按钮

10.9 尽可能使用最简单的代码

10.10 根据视口隐藏、展示和加载内容

将复杂的可视化工作交给CSS

10.11 验证器和代码检测工具

10.12 性能

10.13 下一个划时代的产物

10.14 小结

看完了

累计评论(0条) 0个书友正在讨论这本书 发表评论

发表评论

发表评论,分享你的想法吧!

买过这本书的人还买过

读了这本书的人还在读

回顶部