新書推薦:
《
汉译名著·哲学经典十种
》
售價:NT$
3460.0
《
成吉思汗传:看历代帝王将相谋略 修炼安身成事之根本
》
售價:NT$
280.0
《
爱丁堡古罗马史-罗马城的起源和共和国的崛起
》
售價:NT$
349.0
《
自伤自恋的精神分析
》
售價:NT$
240.0
《
大宋悬疑录:貔貅刑
》
售價:NT$
340.0
《
不被大风吹倒
》
售價:NT$
300.0
《
人生解忧:佛学入门四十讲
》
售價:NT$
490.0
《
东野圭吾:分身(东野圭吾无法再现的双女主之作 奇绝瑰丽、残忍又温情)
》
售價:NT$
295.0
|
編輯推薦: |
本书写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈,确保读者可以运用一些工具、框架、预处理来提升开发效率和节约人力成本,确保所讲解的内容读者都能活学活用。通过阅读本书,读者能知道如何应对和避免跨浏览器陷阱,如何创建一个优雅、高效、易于维护的响应式网站、如何面对形形色色的设备和大大小小的分辨率。全书包含大量的实战案例和开发技巧,总结了CSS开发中的最佳实践(LESS、SASS、Bootstrap、Foundation、Node.js、jQuery),讨论了各种实际问题的解决方案,是一本目前市场上绝无仅有的CSS高效开发实战书。
|
內容簡介: |
想象一下,一个网页只有HTML,没有CSS,那就是素颜和上妆的区别。而一个网页只有CSS,没用CSS 3,那就是马车和汽车的区别!汽车代表的是高效、美观,CSS 3的意图也是如此。移动设备的流行导致了响应式设计的流行,而CSS 3正是实现这种设计的精髓。《CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation》围绕的就是如何跨浏览器、跨设备进行高效率的CSS开发。
《CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation》分为3部分:第1部分是HTMLCSS基础和CSS 3新特性演示,涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子、媒介查询和响应式设计等多个方面;第2部分介绍Bootstrap、Foundation、Pure等当前流行的CSS框架及LESS、SASS等生产力工具;第3部分是实战案例,包括DIV+CSS案例、HTML 5+CSS 3案例、Bootstrap案例和Foundation案例。
《CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation》内容精练、重点突出、实例丰富、讲解通俗,是广大CSS设计人员和前端开发人员必备的参考书,同时也非常适合大中专院校师生学习阅读,也可作为高等院校计算机及相关培训机构的教材使用。
|
關於作者: |
谢郁:毕业于电子科技大学,曾就职于卓衡科技、CSDN,目前在百度担任前端开发工程师,熟悉HTML、CSS、JavaScript、Ruby等多种开发语言,曾参与过多个互联网项目的产品研发,包括新闻出版总署官方网站、CSDN论坛、CSDN问答、CSDN Share频道、Iteye社区、CSDN活动等产品。
|
目錄:
|
第一篇 揭开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 否定伪类:notS 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
|
內容試閱:
|
有些人想学CSS,不知如何下手;有些人已经学会了CSS的各种属性,却不知如何运用;有些人会平面设计,但不知道如何与网页设计结合;有些人会HTML,就是学不会CSS。本书就是为这些人准备的一本指南。正所谓知识来源于实践,本书严格恪守这一原则,对每个CSS特性都进行了示例演示,并在最后提供了4大项目,让读者接手实际项目时不再无所适从。
诊断自己的CSS水平
如果你不知道本书是否能够帮到你,或者说,你不知道是不是要选择本书,可以先看下面的诊断:
? HTML代码编写学得不错,可是CSS网页布局和定位学不好
? 有CSS基础,但没有系统地学习过CSS 3
? 不知道如何给网页布局
? 不会看CSS代码的好坏
? 做好的网页在不全屏的情况下会变乱
? 懂一点点的HTML语言,却不会网站建设
? 完全不了解如何让CSS代码变得高效
? 网页在不同的浏览器下显示不同
? PC端好好的网页在手机或平板上就废了
? 学过W3CSchool中的CSS课程,但是不知道如何使用框架提高开发效率
? 想学习国外的一些CSS经验,了解但不熟悉BootStrap
以上11条的解决方案都在本书中,正所谓会问才会学习,了解自己的不足,发现实际应用中的问题,就是本书真真正正要做的。
如何更好地学习CSS
11个字就能帮助我们更好地学习CSS。
? 多看、多练:观摩成功的网页设计,分析并练习网页设计常用的代码。
? 多想、多问:思考设计实现的原理,提出自己的问题并通过各种渠道来找答案。
? 多总结:记录前人已经探索出来的CSS技巧,总结实战中碰到的问题及解决方案。
只要真正做到勤思考、勤动手、勤总结,CSS学习一定能一马平川。
本书的编写特点
1.将最有用的CSS技术汇总在一起
本书只提供最有用的CSS技术实践,包括CSS基础中的盒子模型、浮动、定位等难点,包括CSS 3中的圆角、动画、个性边框、媒介查询等特色,包括CSS的固定布局、流式布局和响应式布局等设计模型,包括最流行的CSS框架Bootstrap、Foundation的实战和DIV+CSS、HTML 5+CSS 3的实战。本书的写作宗旨就是好学、好用、高效,提供更好的CSS样式解决方案。
2.最合理的章节安排
本书首先回顾CSS的基础难点,然后介绍CSS 3的特色属性。在掌握这些之后,再介绍LESS、SASS等生产力工具及Bootstrap、Foundation等开发框架。每一部分都轻理论重实践,是一本最好的、最新的、最全的CSS实战教材。
3.零难度实践
市场上很多CSS书,抽象又难以理解,读者看完后还是难以提高。本书前15章的示例都力求简单实用,素材简单、代码简单,读者看完就能实践。最后4章的项目提供了完整的代码开发流程和设计思路,如何实现及为什么实现都穿插在讲解中,真正让读者能看完100页就吸收100页。学历是过去,能力是现在,学习能力才是未来!
4.找准实际问题,一针见血
如何既想获得丰富复杂的网页样式,同时又想节省时间和精力?如何让网页一次开发,多种设备通用?如何用更少的代码来完成同样的事情?本书就针对这些实际问题,提供现实中的解决方案。
5.中小示例,项目案例,一个都不能少
根据作者多年的项目经验,本书通过典型的示例与知识点加以整合,让读者对每章的知识点都有整体把握。最后4章介绍的项目案例不仅可以让读者在实际应用中更加熟练地掌握前面讲到的知识点,更能让读者了解前端开发中由轮廓到细节的完整实现流程。
本书以CSS实战为主,所有代码均通过作者上机调试,力求读者能学得懂、练得会。
本书的内容安排
本书共3篇19章,内容从CSS基础到CSS 3特性再到CSS实战。
第一篇(第1章~第10章)揭开CSS 3的面纱
回顾了HTML和CSS的基础知识,重点介绍了CSS中盒子模型、属性前缀、浮动、定位等初学者百思不得其解的难点,然后介绍阴影、圆角、渐变、弹性盒子、变换、动画、媒介查询等CSS 3的特性。
第二篇(第11章~第15章)使用CSS 3框架进行高效开发
讲述了Bootstrap、Foundation等流行CSS框架,以及LESS和SASS等生产力工具的应用,并介绍了一些流行的国内框架,如渴切、Alice框架等。站在框架这个巨人的肩膀上,我们不仅可以提高开发效率,还能实现多人协同、风格统一。
第三篇(第16章~第19章)CSS实战项目
首先介绍最传统的DIV+CSS网页的实现,要求读者能编写大量的CSS代码,然后介绍了如何用HTML 5结合CSS 3来开发一个网站,最后用两个实例分别介绍了Bootstrap和Foundation这一最流行CSS框架的实战应用。本篇使用的技术虽然是由旧到新,但是难度却是由深入浅。
本书最后的两个附录介绍了CSS下的调试和优化技巧。
【建议阅读顺序】
CSS完全小白,建议先练习第1章和第2章的基础内容,打好基础再继续。有HTML和CSS基础的人,建议读完第1章再转到第3章开始学习,对整体知识点有个概览。如果已经接触过CSS 3,但困扰于如何提高效率和借鉴他人的经验,则可以预览第1章后,从第11章开始学习,学会用框架和CSS预处理等新技术武装自己。
本书面对的读者
? 网页设计入门者
? 网页开发入门者
? 网页美工人员
? 由CSS向CSS 3转型的开发人员
? 移动设备网页开发者
? 设计师中的CSS开发人员和程序员中的CSS开发人员
? 大中专院校的学生
? 各种IT培训学校的学生
? 网站后台开发人员
? 前端开发入门者
? 网站建设与网页设计的相关威客兼职人员
本书的思维导图
编者推荐
本书写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈,确保读者可以运用一些工具、框架、预处理来提升开发效率和节约人力成本,确保所讲解的内容读者都能活学活用。通过阅读本书,读者能知道如何应对和避免跨浏览器陷阱,如何创建一个优雅、高效、易于维护的响应式网站、如何面对形形色色的设备和大大小小的分辨率。全书包含大量的实战案例和开发技巧,总结了CSS开发中的最佳实践(LESS、SASS、Bootstrap、Foundation、Node.js、jQuery),讨论了各种实际问题的解决方案,是一本目前市场上绝无仅有的CSS高效开发实战书。
本书的服务
作者能力有限,如果书中有什么疏漏,或者对内容有什么疑问,可通过以下方式与我们沟通。
? QQ群:296811675,作者在线答疑。
? 扫描封底的微信二维码,时刻参与我们的图书互动。
? @博文视点Broadview的微博,了解我们发布的信息和各种前端流行技术。
? 可到博文视点官方网站http:www.broadview.com.cn,下载本书所有实例源代码。
很多读者在学习过程中苦于无法交流,小故障无法及时解决,加入我们的服务方阵,我们将为您提供终身免费的服务。
本书主要由谢郁编写,参与编写的人员还有周敏、席新亮、赵荣娇、任建智、李勇、王铁民、 张兴瑜、马新原、薛淑英、殷龙、于健、周洋、董金虎、李兰英。
|
|