新書推薦:
《
革命与反革命:社会文化视野下的民国政治(近世中国丛书)
》
售價:HK$
93.2
《
画楼:《北洋画报》忆旧(年轮丛书)
》
售價:HK$
337.5
《
大国脊梁:漫画版
》
售價:HK$
80.2
《
跟着渤海小吏读历史:大唐气象(全三册)
》
售價:HK$
189.0
《
心智的构建:大脑如何创造我们的精神世界
》
售價:HK$
79.4
《
美国小史(揭秘“美国何以成为美国”,理解美国的经典入门读物)
》
售價:HK$
79.4
《
中国古代北方民族史丛书——东胡史
》
售價:HK$
87.8
《
巨人传(插图珍藏本)
》
售價:HK$
705.6
|
編輯推薦: |
本书摒弃传统的说教模式,每段代码都是单独的功能型页面,读者可以从全书的任意一点开始线性阅读。本书的目的就是将最有用的代码与读者分享,包含了网页设计人员在实战中必须具备的所有技巧和方法,读者可以拿来就用。本书的400段代码也许并不是最优的代码,但笔者提供了Github地址,与世界CSS工程师一起优化这些代码,并实现了更新迭代,以保证读者始终能看到最好的、最高效的、最实用的CSS代码段。这是一本市场上绝无仅有的CSS实战书,是一本值得拥有的CSS设计书。
|
內容簡介: |
《超实用的CSS代码段》精选400余段CSS代码,覆盖网页上所有的设计元素,堪称史上最有用的CSS书籍,是网站建设和网页设计人员不可或缺的解决方案、技巧和模板。《超实用的CSS代码段》的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何使用CSS的各项技术,实现令人眩目的网页布局和效果。
《超实用的CSS代码段》从网页效果的不同类型和使用场景,对常用的CSS代码段进行了全方位的介绍和演示。《超实用的CSS代码段》分为11章,包含文字、字体、边框、图片、按钮、链接、背景、颜色、动画、页面布局、美化、盒子、3D、CSS Hack等网页设计和交互技术,对那些客户要求高、工作节奏快的网站开发人员和设计人员有着尤其重要的指导作用。
《超实用的CSS代码段》内容简洁明了、代码精练、重点突出、实例丰富、语言通俗易懂、原理清晰明白,是广大网页设计入门者和提高者的良好选择,同时也非常适合大中专院校学生学习阅读,也可作为高等院校非计算机专业,以及计算机非网络工程和相关专业的辅助读物。
|
關於作者: |
赵荣娇:毕业于中国传媒大学,工学硕士。目前就职于淘宝网航旅事业部,担任前端开发工程师,曾参与旅游特卖首页、1688订单等项目开发。热爱技术,喜欢分享。中国传媒大学新媒体研究院主办《信息科技周刊》总编辑、《新媒体技术动态》发起人。博客http:yinqiao.github.io
任建智:早在Wap 2.0时代便开始做手机网站,多以校园青春项目为主,包括表白交友网、掌上烟大(本地服务应用及O2O平台),目前目前某大学院校的网络信息系统,包括ACM内容管理系统、比赛报名系统等,技术涉及前端和后台以及各种接口和框架,是一线全栈工程师。
|
目錄:
|
序1 CSS的前世今生 VII
序2 你绝对不可能全部做对的CSS题 XVII
序3 最流行的前端面试题 XXVI
第1章 文字与字体 1
1.1 在网页中使用自定义字体 1
1.2 文本缩进和首字符下沉 3
1.3 自定义文本被选中时的样式 4
1.4 文本对齐 4
1.5 调整文字、字符的间距 5
1.6 文本的装饰——画线、粗体、斜体 6
1.7 文字阴影 6
1.8 文字毛玻璃效果 7
1.9 文本溢出处理 7
1.10 金属质感文字 8
1.11 隐藏文本 9
1.11.1 使用text-indent 9
1.11.2 使用定位 9
1.12 文字旋转 10
1.13 现代字体栈 10
第2章 边框和图片 12
2.1 边框新属性的基础与实例 12
2.1.1 border-color 12
2.1.2 border-image 13
2.1.3 border-radius 17
2.1.4 box-shadow 18
2.2 搜索框 19
2.2.1 使用背景图片的搜索框 19
2.2.2 只使用CSS的搜索框 20
2.3 微博发布框 21
2.4 拍立得效果框 26
2.5 CSS 3动画边框 27
2.6 边框移动特效 31
2.7 Banner图片的标签 32
2.8 黑白图片 34
2.9 图片水印 34
2.10 图片细节放大展示 35
2.11 图片的瀑布流 39
2.11.1 浮动的瀑布流 40
2.11.2 绝对定位的瀑布流 42
2.12 图片墙 45
2.13 图片轮播图 47
2.13.1 使用定位实现 48
2.13.2 使用透明度实现 52
2.13.3 无缝切换 52
2.14 幻灯片 56
2.15 手风琴效果 60
2.16 图片自适应 61
2.17 使用纯CSS绘制图像 62
2.18 图片原地放大 66
2.19 图片翻转 67
2.20 图像地图 68
第3章 按钮和链接 71
3.1 圆角按钮 71
3.2 简单导航栏 74
3.3 二级导航栏 76
3.4 三级导航栏 78
3.5 滑动菜单 80
3.6 网页右键菜单 82
3.7 下拉菜单 84
3.8 CSS 3圆形导航菜单 87
3.9 标签云 90
3.10 TAB标签页 91
3.10.1 使用JavaScript 92
3.10.2 使用CSS target伪类 92
3.11 选中文字分享 93
3.12 链接百叶窗效果 94
3.13 iPhone开关 96
3.14 按钮式单选框与复选框 97
3.15 自定义播放器 100
3.16 文字变链接 104
3.17 根据文件格式设置链接图标 104
3.18 链接标签“a”的顺序 105
第4章 背景和颜色 108
4.1 颜色和渐变的基础与实例 108
4.1.1 颜色 108
4.1.2 渐变简述 109
4.1.3 带前缀的渐变 109
4.1.4 W3C标准渐变(不带前缀) 111
4.1.5 重复渐变 111
4.2 高光效果 112
4.3 多背景 112
4.4 全屏背景 113
4.5 斑马线背景 114
4.6 棋盘背景 115
4.7 易拉罐效果 117
4.8 页面顶部阴影 119
第5章 变换与动画 120
5.1 CSS 3变换与动画的基础及实例 120
5.1.1 CSS 3变形概述 120
5.1.2 CSS 3变形语法详解及应用 121
5.1.3 CSS 3转换概述 122
5.1.4 CSS 3转换语法详解 123
5.1.5 CSS 3转换具体实例 124
5.1.6 CSS 3动画概述 124
5.1.7 CSS 3动画语法详解 125
5.1.8 简单实例 127
5.2 纸张边角动画效果 127
5.2.1 纸张边角稍稍卷起 128
5.2.2 边角翻折 130
5.2.3 更具立体感的边角翻折效果 132
5.3 气泡式提示 134
5.4 对联广告 136
5.5 页面loading效果 137
5.6 进度条 139
5.7 图标滑动切换特效 142
5.8 流星划过效果 143
5.9 雪花飘落效果 144
5.10 数字滚动器 146
5.11 模拟时钟 149
5.12 苹果著名的DOCK栏 154
5.13 苹果系统的Stack特效 158
5.14 扇形展开 161
5.15 回到页面的顶部 166
5.16 拖曳和抛出 167
5.16.1 拖曳实现原理 167
5.16.2 抛出与模拟抛物原理 168
5.16.3 窗口实现 168
第6章 页面的布局 170
6.1 图文混排 170
6.2 文本内容垂直居中 172
6.3 自适应宽度的水平居中 173
6.4 固定宽度且居中 174
6.5 固定页脚 175
6.6 控制位置:绝对位置和相对位置 177
6.7 一个图文混排的网页选项卡 178
6.8 兼容浏览器的最小高度 182
6.9 让div显示在屏幕的中央 183
6.10 iPad屏幕布局 185
6.11 经典的CSS Clearfix 186
6.12 升级版的Clearfix 187
6.13 强制垂直滚动条 189
6.14 CSS 3文本分列 190
6.15 让div层在Flash之上 192
6.16 float引起div自适应高度无效的解决方案 193
6.17 Flexbox布局风格 196
6.18 动态高度下的居中 201
6.19 纯CSS实现固定表头 202
6.20 Metro布局风格 205
第7章 美化与装饰 209
7.1 文本装饰 209
7.1.1 文本的颜色 209
7.1.2 文本画线 210
7.1.3 文本的空白 212
7.1.4 文本的方向 212
7.2 发光输入框 213
7.3 自定义滚动条 214
7.4 页面顶部阴影 218
7.5 巧妙实现分隔线 218
7.6 三角形列表符号 221
7.7 纸页面卷曲效果 222
7.8 跨浏览器的透明度 225
7.9 鼠标指向时变成手型 227
7.10 鼠标移动到div上高亮显示 227
7.11 发光锚链接 229
7.12 屏蔽Webkit浏览器的高亮效果 230
7.13 多种风格的翻页页码 232
7.13.1 Yahoo旧版翻页风格 232
7.13.2 Yahoo新版翻页风格 234
7.13.3 Meneame翻页风格 236
7.13.4 YouTube翻页风格 238
7.14 创建针线缝合效果 239
第8章 盒子 241
8.1 CSS 3盒模型 241
8.2 内层CSS 3盒阴影 243
8.3 外层CSS 3盒阴影 243
8.4 纯CSS 3透明水晶盒 244
8.5 投影发光效果 249
第9章 3D相关 251
9.1 3D文字 251
9.2 3D图片立体效果 253
9.3 3D按钮 258
9.4 3D下拉菜单 264
9.5 3D旋转动画 269
第10章 CSS Hack 273
10.1 让网站在所有浏览器下显示一致(CSS Reset) 273
10.2 解决IE 6中浮动元素的双倍边距问题 276
10.3 识别不同浏览器 277
10.4 背景与图片透明 281
10.5 IE 10 CSS Hack 285
10.6 CSS 3 滤镜 286
10.7 常用的CSS Hack列表 291
10.8 CSS重置方案(CSS Reset) 294
10.8.1 方案一 294
10.8.2 方案二(雅虎方案) 295
10.8.3 方案三 295
第11章 其他常用代码 297
11.1 使用CSS 3实现简单的计算器 297
11.2 使用CSS 3制作网页播放器 301
11.3 不使用table的Form表单 306
11.4 可以重复利用的规则 310
11.5 在同一元素上使用多种类 312
11.6 CSS块引用模板 313
11.7 花式CSS 3 Pull-引文 314
11.8 一般媒体查询 315
11.9 CSS 3背景梯度 317
11.10 CSS日历显示效果 318
11.11 字符编码 322
11.12 手机APP使用的简洁注册页面 323
11.13 手机简洁价目表 327
11.14 手机简洁任务表 331
11.15 微店购物车 334
11.16 APP导航与提醒 338
11.17 简洁记事本 341
11.18 手机文件下载 345
11.19 迷你下拉列表框 347
11.20 Google Font API 349
11.21 动态提示框 350
11.22 用CSS创建内容幻灯片 353
11.23 打印自动显示超链接URL 357
11.24 禁用Webkit内核某些属性 357
11.24.1 禁用电话号码转换为链接样式(移动设备) 357
11.24.2 禁用原生弹出菜单(移动设备) 357
11.24.3 禁用用户选中 358
11.24.4 禁用输入框、文本框的轮廓线 358
11.24.5 禁用文本框的缩放功能 358
|
內容試閱:
|
CSS是网站一件美丽的外衣,没有CSS,我们的网页不会如此丰富多彩。所以,要搭建网站和设计网页,就必须要学会CSS。本书是一本研究代码实践的书,它为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的CSS技术。400多段代码给读者带来的不仅仅是网页设计的提速,更是教会读者如何应对跨浏览器兼容,如何处理语义化、无障碍访问、搜索引擎优化、创建高性能网页等时时刻刻困扰网页设计人员的问题。
CSS中的那些槛儿
有些网页设计人员做了多年CSS,依然在面对问题时束手无策,下列问题很常见,你又能了解多少呢?
跨浏览器的兼容
盒子模型
绝对定位和相对定位
流和浮动
自适应的文字、DIV、图片
Webkit内核的浏览器的特殊属性
动态宽度的布局和固定宽度的布局差异
IE 6的兼容
以上所有内容在本书的代码中都有讲解,除这些常见CSS门槛外,本书力求将最有用的CSS代码汇总在一起,提供各种解决实际问题的跨浏览器方案。
如何学习CSS
11个字就能帮助我们更好地学习CSS。
多看、多练:观摩成功的网页设计,分析并练习网页设计常用的代码。
多想、多问:思考设计实现的原理,提出自己的问题并通过各种渠道来找答案。
多总结:记录前人已经探索出来的CSS技巧,总结实战中碰到的问题及解决方案。
只要真正能做到勤思考、勤动手、勤总结,CSS学习定能一马平川。
本书的编写特点
1.独特的CSS切入点
与市面上其他CSS有关的书不同,本书从最常见的网页效果出发,直接应用CSS代码实现设计效果,没有用的例子不给,只讲事实不讲废话!
2.内容丰富,知识全面
本书以网页设计的各个分类和使用场景作为基础,立体式全方位地解释各种场景下的CSS代码段应用,场景丰富、实例丰富,并拥有良好的可扩展性、可复用性。
3.去中心化,分布式学习
本书的代码实例都是独立的,你可以从中间开始学,也可以从头开始学。代码跨平台跨设备,你可以在iPad上学,也可以在PC上学,如果可以,手机上学代码也完全可能。
4.解释清晰,原理结合实践
由于CSS是网页描述性语言,虽然语法简单,但是很多读者可能不知效果从何做起,本书通过清晰的实现原理分析,配备简单易懂的代码和解释,从效果的实现原理方面进行了剖析,使读者不仅能知其然,更知其所以然。
5.多种代码方式的实现
本书的实例从纯CSS代码、简单的原生JavaScript配合、jQuery框架和自己搭建框架等多种方式实现不同的效果,配合原理的说明,可在不同的方式间自由切换。
6.自发式学习
在学习代码前,先让读者练习实际上最基础却最容易做错的CSS考题和面试题,激发读者的学习斗志。
本书的设计始于功能、终于代码,是网页设计人员的案头必备。
本书的内容安排
本书共11章,各章节为不同类别效果的CSS实现。
第1章为文字与字体,介绍常用的网页文本样式的设计,包括自定义字体、文本缩进与首字符下沉、文本对齐、文字间距、文本溢出、文字阴影、毛玻璃效果、金属质感等装饰、隐藏文本、文字旋转、现代字体栈等。
第2章为边框和图片,介绍网页中常见的边框设计和各种图片的展示方式,包括各种边框、黑白图片、图片水印、细节放大、瀑布流、图片墙、图片轮播图(焦点图)、幻灯片(带缩略图)、图片自适应、图片原地放大、图片翻转、图像地图等。
第3章为按钮和链接,介绍常见的网页按钮和链接相关的设计,包括圆角按钮、导航菜单、下拉菜单、右键菜单、标签云、文字分享、iPhone开关、按钮式单选框与复选框、自定义播放器、文字变链接等。
第4章为背景和颜色,介绍网页中背景和颜色的使用,包括高光效果页面顶部阴影、多背景、全屏背景、斑马线背景、棋盘背景、易拉罐效果等。
第5章为变换与动画的相关内容,是一些网页中动态效果的集合,包括纸张边角动画、气泡式提示、对联广告、页面loading效果、进度条、模拟时钟、苹果系统的DOCK栏和Stack特效、扇形展开等。
第6章介绍页面的布局,包括图文混排、几种不同的居中布局方法、绝对定位与相对定位、适配iPad屏幕的布局、Clearfix、滚动条的控制、CSS 3文本分列、Metro和Felxbox布局风格等。
第7章为美化与装饰,学习如何在细节方面美化网页,包括文本的装饰、锚链接装饰、自定义滚动条、分隔线、列表符号、跨浏览器的透明度、鼠标指向特效、翻页页码、顶部阴影、页面卷曲、针线缝合效果等。
第8章主要介绍CSS中的盒子效果,包括CSS 3盒模型、内层CSS 3盒阴影、外层CSS 3盒阴影、纯CSS 3透明水晶盒、投影发光效果。
第9章内容与3D相关,包含3D文字、3D图片立体效果、3D按钮、3D下拉菜单和3D旋转动画,使网页更加立体化。
第10章内容为CSS Hack,解决因不同浏览器性能的不同带来的效果不一致和效果出错的问题,包含让网站在所有浏览器下显示一致、解决IE 6的浮动元素的双倍边距问题、识别不同浏览器、背景与图片透明、IE10 CSS Hack、CSS 3 滤镜。
第11章为其他常用代码,既包含某些CSS代码技巧,也包含一些不便于分类的代码,还包含某些JavaScript与CSS结合实例中的JavaScript解决方案,内容包含CSS块引用模版、一般媒体查询与响应式设计、字符编码、手机APP设计等。
本书面对的读者
网页设计入门者
网页开发入门者
CSS学习爱好者
由CSS 2向CSS 3转型的开发人员
网页美工人员
中小型企业网站开发者
大中专院校的学生
各种IT培训学校的学生
网站后台开发人员
网站建设与网页设计的相关威客兼职人员
本书的思维导图
编者推荐
本书摒弃传统的说教模式,每段代码都是单独的功能型页面,读者可以从全书的任意一点开始线性阅读。本书的目的就是将最有用的代码与读者分享,包含了网页设计人员在实战中必须具备的所有技巧和方法,读者可以拿来就用。本书的400段代码也许并不是最优的代码,但笔者提供了Github地址,与世界CSS工程师一起优化这些代码,并实现了更新迭代,以保证读者始终能看到最好的、最高效的、最实用的CSS代码段。这是一本市场上绝无仅有的CSS实战书,是一本值得拥有的CSS设计书。
本书的服务
笔者能力有限,如果写作过程中有什么疏漏,或者读者有什么疑问,可通过以下方式与我们沟通。
QQ群:296811675,作者在线答疑。
扫描封底的微信二维码,时刻参与我们的图书互动和本书的考题答案。
@博文视点的微博,了解我们发布的信息和各种前端流行技术。
博文视点官方网站http:www.broadview.com.cn,下载本书所有实例源代码。
Github,https:github.comyinqiaosupercss,了解代码的实时更新和迭代过程,并可以在每章代码下参与讨论,也可以观看其他读者提出的问题,还可以随时随地下载代码。
很多读者在学习过程中苦于无法交流,小故障无法及时解决,加入我们的服务方阵,我们将为您提供终身免费的服务。一本书、一段情、一辈子。
本书主要由赵荣娇、任建智编写,参与编写的人员还有李勇、周敏、王铁民、张兴瑜、马新原、薛淑英、殷龙、席新亮、谢郁、于健、周洋、李春城、李兰英。
|
|