CSS高效开发实战 CSS 3、LESS、SASS、Bootstrap、FoundationPDF|Epub|txt|kindle电子书版本网盘下载

CSS高效开发实战 CSS 3、LESS、SASS、Bootstrap、FoundationPDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第一篇 揭开CSS 3的面纱2

第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 33

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 37

1.4.1 使用Modernizr检测支持CSS 37

1.4.2 支持CSS 3的浏览器8

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

1.6 小结10

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

2.1 W3C标准、HTML语言和CSS11

2.1.1 W3C组织与W3C标准11

2.1.2 什么是HTML12

2.1.3 什么是CSS13

2.1.4 HTML＋CSS之最佳拍档13

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

2.3 跨浏览器的CSS15

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.1 0复合选择器31

3.2 伪类选择器32

3.2.1 结构化伪类32

3.2.2 目标伪类：target39

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 实战演练——用弹性盒子设计阅读APP110

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框架进行高效开发122

第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 认识Bootstrap144

12.1.1 初识Bootstrap144

12.1.2 Bootstrap为何如此流行145

12.1.3 Bootstrap的版本发展146

12.2 Bootstrap入门146

12.2.1 在自己的项目中引入Bootstrap147

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 标签与Badge175

12.5.8 缩略图176

12.5.9 面板178

12.5.1 0进度条179

12.6 Bootstrap中的JavaScript特效180

12.6.1 模态对话框180

12.6.2 标签页切换182

12.6.3 Tooltip183

12.6.4 弹出框183

12.6.5 提示信息184

12.6.6 按钮184

12.6.7 折叠186

12.6.8 幻灯片187

12.7 定制Bootstrap188

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

12.7.2 修改源代码定制 Bootstrap190

12.8 其他Bootstrap资源192

12.9 小结194

第13章 Foundation框架实战195

13.1 认识Foundation195

13.2 Foundation的安装和使用196

13.2.1 传统方式的下载安装197

13.2.2 使用Compass进行Foundation开发198

13.2.3 在Rails应用中引入Foundation199

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 lightboxes214

13.6.3 弹出层显示215

13.6.4 长页面滚动效果216

13.6.5 其他特效216

13.7 定制Foundation218

13.7.1 在官方网站进行定制219

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

13.8 小结220

第14章 LESS和 SASS222

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 使用SASS228

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.1 0 SASS总结232

14.4 使用SASS的扩展库Compass232

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 CSS238

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

15.3 优秀的国产CSS框架240

15.3.1 阿里巴巴的Alice框架240

15.3.2 网易的NEC241

15.3.3 百度的GMU框架242

15.3.4 渴切243

15.3.5 用于中文排版的Typo.css243

15.4 小结245

第三篇 CSS实战项目248

第16章 传统DIV＋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 页面头部和页脚的HTML255

16.3.3 页面公共部分的HTML256

16.3.4 首页主体内容的HTML258

16.3.5 内页主体内容的HTML261

16.3.6 首页HTML代码总览263

16.3.7 内页HTML代码总览264

16.4 网站CSS样式的编写265

16.4.1 页面公共部分的CSS265

16.4.2 页面框架的CSS267

16.4.3 页面头部和页脚的CSS268

16.4.4 首页主体内容的CSS268

16.4.5 内页主体内容的CSS270

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