CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation

第一篇　揭开CSS 3的面纱

第1章 CSS 3与现代Web标准 2

1.1 未来Web标准的发展 2

1.1.1 “去Adobe”化 2

第一篇　揭开CSS 3的面纱

第1章 CSS 3与现代Web标准 2

1.1 未来Web标准的发展 2

1.1.1 “去Adobe”化 2

1.1.2 基础功能集成 3

1.1.3 客户端执行更多的逻辑和渲染任务 3

1.1.4 适应移动设备的发展 3

1.2 什么是CSS 3 3

1.3 CSS 3的特性 4

1.3.1 圆角 4

1.3.2 阴影 4

1.3.3 渐变 5

1.3.4 变换 5

1.3.5 动画 6

1.3.6 媒介查询 6

1.4 检测浏览器是否支持CSS 3 7

1.4.1 使用Modernizr检测支持CSS 3 7

1.4.2 支持CSS 3的浏览器 8

1.5 用CSS 3实现的优秀网页 9

1.6 小结 10

第2章　温故知新——HTML、CSS基础 11

2.1 W3C标准、HTML语言和CSS 11

2.1.1 W3C组织与W3C标准 11

2.1.2 什么是HTML 12

2.1.3 什么是CSS 13

2.1.4 HTML+CSS之最佳拍档 13

2.2 不可不知的CSS盒子模型 14

2.3 跨浏览器的CSS 15

2.4 理解浏览器的属性前缀 16

2.4.1 常用的属性前缀 16

2.4.2 属性前缀的排序 17

2.5 揭开浮动布局的秘密 17

2.5.1 浮动导致的布局变动 17

2.5.2 清除浮动 20

2.6 看穿CSS的定位技术 21

2.6.1 相对定位技术与实战 21

2.6.2 绝对定位技术与实战 22

2.7 小结 24

第3章　使用CSS选择器让样式表更健壮 25

3.1 基础选择器 25

3.1.1 标签选择器 25

3.1.2 类选择器 26

3.1.3 id选择器 27

3.1.4 通配符选择器 27

3.1.5 子元素选择器 28

3.1.6 后代元素选择器 28

3.1.7 相邻元素选择器 29

3.1.8 属性选择器 30

3.1.9 组选择器 30

3.1.10 复合选择器 31

3.2 伪类选择器 32

3.2.1 结构化伪类 32

3.2.2 目标伪类:target 39

3.2.3 状态伪类 39

3.2.4 否定伪类:not(S) 40

3.3 实战演练——选择器 41

3.3.1 伪类选择器的实战——新闻聚合类网页 41

3.3.2 基础选择器的组合实战——新闻聚合类网页 43

3.4 小结 44

第4章 设计更炫目的字体 45

4.1 添加和使用自定义字体 45

4.1.1 传统的字体定义 45

4.1.2 个性化的字体定义 46

4.1.3 个性化的字体图标 46

4.2 使用反射让文字倒映 47

4.2.1 反射的基本语法 47

4.2.2 变幻多端的反射效果实例 48

4.3 字体阴影——光晕、浮雕、投影效果 49

4.4 字体描边 50

4.5 字体分栏——让网页像报纸一样分栏排版 51

4.6 实战演练——处理字体溢出和破字 53

4.7 小结 54

第5章 背景和颜色 55

5.1 设定背景图的大小 55

5.2 利用图层叠加实现多背景 57

5.3 使用图片背景的origin和clip属性 58

5.3.1 background-origin属性 58

5.3.2 background-clip属性 59

5.4 颜色模式 60

5.4.1 RGBA模式 60

5.4.2 HSLA模式 61

5.5 透明颜色 62

5.6 语法糖——currentColor属性 63

5.7 渐变——放弃图片的首选良方 63

5.7.1 线性渐变 63

5.7.2 放射渐变 65

5.8 实战演练——渐变效果 67

5.8.1 带有立体凸起效果的按钮 67

5.8.2 构造尺寸更灵活的背景 68

5.8.3 使用放射渐变制作光影效果 68

5.9 小结 69

第6章 更个性的边框 71

6.1 圆角边框 71

6.1.1 圆角边框的基本用法 71

6.1.2 使用百分比作为单位 72

6.1.3 设置不同弧度的圆角 73

6.2 边框阴影 73

6.2.1 内外阴影 74

6.2.2 偏移量 75

6.2.3 阴影尺寸 76

6.2.4 模糊距离 76

6.3 图片边框——让图片环绕在元素周围 77

6.4 通过resize属性来改变输入框的大小 79

6.5 实战演练——CSS 3边框效果 80

6.5.1 边框圆角在Bootstrap和淘宝网中的应用 80

6.5.2 边框阴影在苹果官网中的应用 80

6.6 小结 81

第7章 变换和动画 83

7.1 CSS 3的变换类型 83

7.1.1 rotate旋转变换 83

7.1.2 skew扭曲变换 86

7.1.3 scale比例缩放 86

7.1.4 translate位移变换 86

7.1.5 transform小结 87

7.2 使用transition制作交互动画 87

7.3 使用@keyframes制作动画 89

7.3.1 @keyframes的基本语法 89

7.3.2 用@keyframes制作循环动画 90

7.3.3 @keyframes小结 91

7.4 实战演练——结合变换制作3D旋转卡片 91

7.5 可参考的CSS动画资源 92

7.5.1 Hover.css——鼠标hover动画 92

7.5.2 iHover——hover动画类库 93

7.5.3 CSS 3和JavaScript的结合 94

7.6 小结 94

第8章 媒介查询和响应式设计 95

8.1 媒介类型=各种浏览终端 95

8.2 认识响应式网页设计 96

8.3 媒介查询的基本语法 98

8.4 设备 99

8.4.1 常见设备的宽度和高度 99

8.4.2 检测设备翻转 100

8.5 实战演练——应用媒介查询制作响应式导航栏 101

8.6 小结 103

第9章　更简便的布局——弹性盒子 104

9.1 认识弹性盒子 104

9.2 弹性盒子的语法 105

9.3 操作元素 106

9.3.1 控制子元素的方向 107

9.3.2 控制元素对齐 108

9.3.3 控制元素显示顺序 109

9.4 实战演练——用弹性盒子设计阅读APP 110

9.5 小结 113

第10章 CSS常用工具 114

10.1 使用Prefix free处理CSS 3跨浏览器兼容 114

10.2 应用Normalize统一不同浏览器下的样式 115

10.3 应用Grunt进行CSS压缩 116

10.4 小结 119

第二篇　使用CSS 3框架进行高效开发

第11章 流行的CSS布局设计 122

11.1 固定布局 122

11.1.1 960的秘密 123

11.1.2 定义列宽 123

11.1.3 运用CSS实现固定列宽的栅格 124

11.1.4 实战演练——运用960gs实现固定布局的新闻页面 127

11.2 流式布局 130

11.2.1 计算列百分比 130

11.2.2 使图片更加灵活 132

11.2.3 定义最大/最小宽度 133

11.2.4 实战演练——实现一个流式布局的新闻页面 133

11.3 响应式布局 137

11.3.1 使用媒介查询 137

11.3.2 实战演练——实现一个响应式布局的新闻页面 139

11.4 小结 143

第12章 Bootstrap框架实战 144

12.1 认识Bootstrap 144

12.1.1 初识Bootstrap 144

12.1.2 Bootstrap为何如此流行 145

12.1.3 Bootstrap的版本发展 146

12.2 Bootstrap入门 146

12.2.1 在自己的项目中引入Bootstrap 147

12.2.2 添加Bootstrap的class实现基本样式 147

12.2.3 调用Bootstrap的通用组件 148

12.2.4 添加JavaScript动态效果 149

12.3 Bootstrap的栅格系统 150

12.3.1 固定布局的栅格系统 150

12.3.2 流式布局的栅格系统 151

12.3.3 响应式布局的栅格系统 151

12.4 使用Bootstrap的基本样式 154

12.4.1 字体排版 154

12.4.2 表格 155

12.4.3 表单 158

12.4.4 按钮 161

12.4.5 图片 163

12.4.6 响应式工具 164

12.4.7 工具类 165

12.5 使用Bootstrap的组件 166

12.5.1 下拉菜单 166

12.5.2 按钮组 167

12.5.3 input控件组 168

12.5.4 导航 169

12.5.5 列表组 173

12.5.6 分页 174

12.5.7 标签与Badge 175

12.5.8 缩略图 176

12.5.9 面板 178

12.5.10 进度条 179

12.6 Bootstrap中的JavaScript特效 180

12.6.1 模态对话框 180

12.6.2 标签页切换 182

12.6.3 Tooltip 183

12.6.4 弹出框 183

12.6.5 提示信息 184

12.6.6 按钮 184

12.6.7 折叠 186

12.6.8 幻灯片 187

12.7 定制Bootstrap 188

12.7.1 在官方网站进行Bootstrap的定制 188

12.7.2 修改源代码定制Bootstrap 190

12.8 其他Bootstrap资源 192

12.9 小结 194

第13章 Foundation框架实战 195

13.1 认识Foundation 195

13.2 Foundation的安装和使用 196

13.2.1 传统方式的下载安装 197

13.2.2 使用Compass进行Foundation开发 198

13.2.3 在Rails应用中引入Foundation 199

13.3 使用Foundation栅格系统 199

13.3.1 基本栅格系统 199

13.3.2 块网格（Block Grid） 200

13.4 Foundation基本样式 201

13.4.1 标题和段落 201

13.4.2 列表 202

13.4.3 按钮 204

13.4.4 面板 206

13.4.5 缩略图 207

13.4.6 视频 207

13.4.7 可见性 208

13.5 导航系统 208

13.5.1 面包屑导航 209

13.5.2 侧边栏导航 209

13.5.3 头部导航 210

13.5.4 子导航 212

13.6 Foundation中的JavaScript特效 212

13.6.1 幻灯片 212

13.6.2 Clearing lightboxes 214

13.6.3 弹出层显示 215

13.6.4 长页面滚动效果 216

13.6.5 其他特效 216

13.7 定制Foundation 218

13.7.1 在官方网站进行定制 219

13.7.2 通过配置文件进行定制 219

13.8 小结 220

第14章 LESS和SASS 222

14.1 CSS的缺陷 222

14.1.1 无法定义变量 222

14.1.2 重复代码 223

14.1.3 计算问题 223

14.1.4 作用域和命名空间 223

14.1.5 CSS缺陷总结 224

14.2 LESS 其实更多 224

14.2.1 LESS介绍 224

14.2.2 LESS使用基础 225

14.2.3 使用变量和操作符 225

14.2.4 使用Mixin混入 226

14.2.5 内嵌规则 227

14.2.6 运算 228

14.2.7 LESS总结 228

14.3 使用SASS 228

14.3.1 SASS介绍 228

14.3.2 SASS安装和使用 229

14.3.3 使用变量 229

14.3.4 计算 230

14.3.5 使用@import导入 230

14.3.6 使用@extend继承 230

14.3.7 使用@mixin混入 231

14.3.8 使用@function定义函数 231

14.3.9 控制语句 231

14.3.10 SASS总结 232

14.4 使用SASS的扩展库Compass 232

14.4.1 CSS 3模块 233

14.4.2 Reset模块 235

14.4.3 Utilities模块 235

14.4.4 Helpers模块 236

14.4.5 Compass总结 237

14.5 小结 237

第15章 其他CSS框架简介 238

15.1 轻量级框架代表——Pure CSS 238

15.2 手机页面UI框架——Ratchet框架 239

15.3 优秀的国产CSS框架 240

15.3.1 阿里巴巴的Alice框架 240

15.3.2 网易的NEC 241

15.3.3 百度的GMU框架 242

15.3.4 渴切 243

15.3.5 用于中文排版的Typo.css 243

15.4 小结 245

第三篇　CSS实战项目视频网站 248

16.1 网站的页面效果图分析 248

16.1.1 页面头部和页脚分析 250

16.1.2 首页主体内容分析 250

16.1.3 内页主体内容分析 252

16.2 网站的布局规划 253

16.2.1 页面布局规划 253

16.2.2 切割首页及导出图片 253

16.2.3 切割内页及导出图片 254

16.3 网站HTML框架的编写 255

16.3.1 页面HTML框架搭建 255

16.3.2 页面头部和页脚的HTML 255

16.3.3 页面公共部分的HTML 256

16.3.4 首页主体内容的HTML 258

16.3.5 内页主体内容的HTML 261

16.3.6 首页HTML代码总览 263

16.3.7 内页HTML代码总览 264

16.4 网站CSS样式的编写 265

16.4.1 页面公共部分的CSS 265

16.4.2 页面框架的CSS 267

16.4.3 页面头部和页脚的CSS 268

16.4.4 首页主体内容的CSS 268

16.4.5 内页主体内容的CSS 270

16.4.6 网站CSS代码总览 271

16.5 小结 272

第17章　使用HTML 5+CSS 3开发搜房网 273

17.1 网站前期策划 273

17.1.1 理解HTML 5的语义性元素 273

17.1.2 搜房网网站结构 275

17.1.3 搜房网整站预览 275

17.2 搜房网的首页设计 278

17.2.1 首页的布局 278

17.2.2 设计导航栏 282

17.2.3 设计宣传广告栏 284

17.2.4 CSS布局 287

17.3 搜房网的内容页设计 291

17.3.1 出售房源页面 291

17.3.2 购买房源页面 293

17.3.3 出租房源页面 295

17.3.4 房产过户页面 297

17.3.5 联系我们页面 299

17.4 小结 301

第18章　使用Bootstrap实现论坛后台管理系统 302

18.1 项目开始 302

18.2 页面布局 303

18.2.1 引入Bootstrap 3框架 303

18.2.2 编写布局代码 304

18.3 实现导航栏 305

18.3.1 构建导航的框架代码 305

18.3.2 填写标题和导航链接 305

18.3.3 添加搜索框和通知系统 306

18.3.4 添加管理员的登录信息 307

18.3.5 构建响应式导航 308

18.4 实现左侧边栏 310

18.5 实现主功能部分 310

18.5.1 主功能的头部 311

18.5.2 主功能的帖子列表 312

18.6 小结 315

第19章　使用Foundation实现论坛首页 316

19.1 项目开始 316

19.2 页面布局 317

19.2.1 引入Foundation需要的包 317

19.2.2 移动优先的布局 318

19.3 实现头部导航栏 319

19.4 实现响应式版块列表 321

19.5 实现热门帖子推荐 323

19.6 小结 325

附录A 网页制作的调试工具及使用 326

附录B 提升CSS的性能和效率 332