CSS高效开发实战 PDF 清晰版

内容简介

想象一下，一个网页只有HTML，没有CSS，那就是素颜和上妆的区别。而一个网页只有CSS，没用CSS3，那就是马车和汽车的区别！汽车代表的是高效、美观，CSS3的意图也是如此。移动设备的流行导致了响应式设计的流行，而CSS3正是实现这种设计的精髓。《CSS高效开发实战—CSS3、LESS、SASS、Bootstrap、Foundation》围绕的就是如何跨浏览器、跨设备进行高效率的CSS开发。

《CSS高效开发实战—CSS3、LESS、SASS、Bootstrap、Foundation》分为3部分：第1部分是HTML/CSS基础和CSS3新特性演示，涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子、媒介查询和响应式设计等多个方面；第2部分介绍Bootstrap、Foundation、Pure等当前流行的CSS框架及LESS、SASS等生产力工具；第3部分是实战案例，包括DIV+CSS案例、HTML5+CSS3案例、Bootstrap案例和Foundation案例。

《CSS高效开发实战—CSS3、LESS、SASS、Bootstrap、Foundation》内容精练、重点突出、实例丰富、讲解通俗，是广大CSS设计人员和前端开发人员必备的参考书，同时也非常适合大中专院校师生学习阅读，也可作为高等院校计算机及相关培训机构的教材使用。

目录

• 第一篇揭开CSS3的面纱
• 第1章CSS3与现代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什么是CSS33
• 1.3CSS3的特性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检测浏览器是否支持CSS37
• 1.4.1使用Modernizr检测支持CSS37
• 1.4.2支持CSS3的浏览器8
• 1.5用CSS3实现的优秀网页9
• 1.6小结10
• 第2章温故知新——HTML、CSS基础11
• 2.1W3C标准、HTML语言和CSS11
• 2.1.1W3C组织与W3C标准11
• 2.1.2什么是HTML12
• 2.1.3什么是CSS13
• 2.1.4HTML+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.3id选择器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目标伪类: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.1background-origin属性58
• 5.3.2background-clip属性59
• 5.4颜色模式60
• 5.4.1RGBA模式60
• 5.4.2HSLA模式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实战演练——CSS3边框效果80
• 6.5.1边框圆角在Bootstrap和淘宝网中的应用80
• 6.5.2边框阴影在苹果官网中的应用80
• 6.6小结81
• 第7章变换和动画83
• 7.1CSS3的变换类型83
• 7.1.1rotate旋转变换83
• 7.1.2skew扭曲变换86
• 7.1.3scale比例缩放86
• 7.1.4translate位移变换86
• 7.1.5transform小结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.1Hover.css——鼠标hover动画92
• 7.5.2iHover——hover动画类库93
• 7.5.3CSS3和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使用Prefixfree处理CSS3跨浏览器兼容114
• 10.2应用Normalize统一不同浏览器下的样式115
• 10.3应用Grunt进行CSS压缩116
• 10.4小结119
• 第二篇使用CSS3框架进行高效开发
• 第11章流行的CSS布局设计122
• 11.1固定布局122
• 11.1.1960的秘密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.2Bootstrap为何如此流行145
• 12.1.3Bootstrap的版本发展146
• 12.2Bootstrap入门146
• 12.2.1在自己的项目中引入Bootstrap147
• 12.2.2添加Bootstrap的class实现基本样式147
• 12.2.3调用Bootstrap的通用组件148
• 12.2.4添加JavaScript动态效果149
• 12.3Bootstrap的栅格系统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.3input控件组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.10进度条179
• 12.6Bootstrap中的JavaScript特效180
• 12.6.1模态对话框180
• 12.6.2标签页切换182
• 12.6.3Tooltip183
• 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.2Foundation的安装和使用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块网格（BlockGrid）200
• 13.4Foundation基本样式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.6Foundation中的JavaScript特效212
• 13.6.1幻灯片212
• 13.6.2Clearinglightboxes214
• 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.1CSS的缺陷222
• 14.1.1无法定义变量222
• 14.1.2重复代码223
• 14.1.3计算问题223
• 14.1.4作用域和命名空间223
• 14.1.5CSS缺陷总结224
• 14.2LESS其实更多224
• 14.2.1LESS介绍224
• 14.2.2LESS使用基础225
• 14.2.3使用变量和操作符225
• 14.2.4使用Mixin混入226
• 14.2.5内嵌规则227
• 14.2.6运算228
• 14.2.7LESS总结228
• 14.3使用SASS228
• 14.3.1SASS介绍228
• 14.3.2SASS安装和使用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.10SASS总结232
• 14.4使用SASS的扩展库Compass232
• 14.4.1CSS3模块233
• 14.4.2Reset模块235
• 14.4.3Utilities模块235
• 14.4.4Helpers模块236
• 14.4.5Compass总结237
• 14.5小结237
• 第15章其他CSS框架简介238
• 15.1轻量级框架代表——PureCSS238
• 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.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章使用HTML5+CSS3开发搜房网273
• 17.1网站前期策划273
• 17.1.1理解HTML5的语义性元素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.4CSS布局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引入Bootstrap3框架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