CSS3实战 开发与设计PDF电子书下载

第1章 CSS3和现代Web设计 1

1.1 为什么要使用CSS3 2

1.2 现代Web设计理念 3

1.2.1 可访问性第一 3

1.2.2 可用性其次 5

1.2.3 优雅降级和渐进增强 5

1.3 对内容的思考过程 6

1.4 本书中的CSS3模块 7

1.5 常用CSS3特性 9

1.5.1 厂商前缀 9

1.5.2 CSS3颜色 11

1.5.3 用rem调整文本大小 13

1.5.4 CSS3选择器 15

小结 24

第2章 利用HTML5与JavaScript构建坚实的跨浏览器模板 25

2.1 从HTML5语义开始 26

2.1.1 为什么用HTML5 26

2.1.2 HTML5错误处理 27

2.2 建立模板 28

2.2.1 HTML5的DOCTYPE 28

2.2.2 语言和基本文档纲要 29

2.2.3 定义文档字符集 29

2.2.4 XHTML5和代码风格 30

2.2.5 为HTML5语义元素添加跨浏览器支持性 30

2.3 校验HTML5 32

2.4 探索HTML5元素 33

2.4.1 <audio>与<video> 34

2.4.2 <article>与<section> 36

2.4.3 <header>与<footer> 38

2.4.4 <aside> 38

2.4.5 <nav> 39

2.4.6 <hgroup> 39

2.4.7 <figure>与<figcaption> 40

2.4.8 <time> 40

2.4.9 <mark> 42

2.4.1 0 HTML5表单元素 42

2.4.1 1 <canvas> 44

2.5 CSS重置和normalize.css 45

2.6 JavaScript库综述 46

2.6.1 css3-mediaqueries-js 46

2.6.2 CSS3PIE 47

2.6.3 Modernizr 48

2.6.4 Selectivizr 48

2.7 IE条件注释 48

小结 50

第3章 让字体和文本变得有趣 51

3.1 蟒蛇来啦 52

3.2 使用Web字体 53

3.2.1 给示例使用Web字体 54

3.2.2 Web-Font问题 56

3.2.3 Windows渲染问题 59

3.2.4 商用字体服务 62

3.3 CSS3文本争执 64

3.3.1 文本阴影 65

3.3.2 控制文本溢出 67

3.3.3 word-wrap打破长单词 68

3.3.4 控制断字 69

3.4 CSS3排版 70

3.4.1 基于Web的连写和文本渲染优化 71

3.4.2 启用Web高级的字体特性font-feature-settings 72

3.4.3 连写和自由连写 73

3.4.4 数字、分数和序数 73

3.4.5 小型大写字母和小号大写字母 75

3.4.6 字距调整 76

3.4.7 样式集和其他组合效果 76

3.4.8 font-feature用途的小贴士 77

小结 78

第4章 CSS3修饰的增强盒子 79

4.1 CSS3修饰的光明前景 80

4.2 border-radius：圆角的福音 82

4.3 使用box-shadow添加立体效果 85

4.4 用CSS渐变来修饰 88

4.4.1 线性渐变 88

4.4.2 径向渐变 92

4.4.3 为旧版IE提供渐变支持 98

4.5 多重背景 99

4.6 构思巧妙的盒子：border-image 101

4.7 box-decoration-break 106

4.8 给横幅广告添加修饰 107

4.8.1 构建基础 107

4.8.2 添加CSS3火花 109

4.8.3 支持旧版浏览器 110

4.8.4 改进广告 110

小结 111

第5章 用CSS3制作动画效果 112

5.1 CSS动画 113

5.2 变形 114

5.2.1 2D变形 115

5.2.2 3D变形 121

5.3 过渡 134

5.3.1 选择过渡的元素 135

5.3.2 选择过渡持续时间 136

5.3.3 过渡延迟时间 136

5.3.4 过渡的速率变化 136

5.3.5 过渡简写及多重过渡 141

5.4 动画 142

5.4.1 建立基本动画 142

5.4.2 给元素应用动画 144

5.4.3 设置动画持续时间 145

5.4.4 调整动画的速率 146

5.4.5 增加延迟时间 147

5.4.6 选择animation-direction：back还是forth 147

5.4.7 animation-fill-mode 148

5.4.8 简写和多重动画 148

5.5 用动画提升横幅广告 149

5.6 用Modemizr提供备选方案 153

5.6.1 给页面添加Modemizr 154

5.6.2 提供替换样式 155

5.6.3 动画和脚本 157

小结 163

第6章 使用CSS生成图标 164

6.1 翻滚吧，图标 165

6.2 在页面上使用图标 165

6.3 何时使用图标 167

6.4 生成图标的基础 168

6.4.1 内容生成图标 170

6.4.2 CSS Sprite图 170

6.4.3 更“防弹式”的图标 171

6.4.4 多背景图片的修饰图标 172

6.5 Web字体作为图标 173

6.6 独特的纯CSS图标 176

小结 179

第7章 CSS3布局排版 180

7.1 CSS3布局模块简介 181

7.2 多栏布局 182

7.2.1 设置分栏的数量 183

7.2.2 根据宽度分栏而非数量 184

7.2.3 定义分栏空隙 185

7.2.4 定义分栏内容的填充方式 185

7.2.5 内容的跨栏目布置 187

7.2.6 控制栏目的划分 188

7.2.7 实战多栏布局 189

7.2.8 多栏布局的问题 189

7.3 使用Flexbox 191

7.3.1 控制Flexbox的子项伸缩流的方向 192

7.3.2 自定义子元素的显示顺序 195

7.3.3 对齐Flexbox子项 195

7.3.4 弹性的Flexbox 197

7.3.5 用Modernizr实现跨浏览器Flexbox 201

7.4 探索网格 201

7.4.1 定义网格结构 202

7.4.2 将内容嵌套在网格上 203

7.4.3 一个真实的网格例子 204

7.4.4 网格问题 205

7.5 值得一提的其他布局模块 206

7.5.1 区域 206

7.5.2 排除 208

7.5.3 GCPM 210

小结 211

第8章 响应式和自适应设计 212

8.1 网络浏览器简史 213

8.2 响应式设计策略 214

8.2.1 不做任何特殊处理 215

8.2.2 不同的设备提供不同的内容 215

8.2.3 为不同浏览器/设备优化网站 218

8.3 弹性布局技术 219

8.3.1 可伸缩的容器 219

8.3.2 响应式媒体布局 220

8.4 媒介查询 223

8.4.1 一些媒介查询的例子 225

8.4.2 移动设备优先 230

8.5 媒介查询补丁 231

8.6 提供响应式图片 232

8.7 移动浏览器是个骗子 233

8.8 高保真设备 237

8.9 一个响应式的重金属横幅广告 239

8.9.1 第一种选择：800px或者更小 239

8.9.2 第二种选择：480px或者更小、 239

小结 241