资源名称:超实用的CSS代码段
内容简介:
《超实用的CSS代码段》精选400余段CSS代码,覆盖网页上所有的设计元素,堪称史上最有用的CSS书籍,是网站建设和网页设计人员不可或缺的解决方案、技巧和模板。《超实用的CSS代码段》的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何使用CSS的各项技术,实现令人眩目的网页布局和效果。
《超实用的CSS代码段》从网页效果的不同类型和使用场景,对常用的CSS代码段进行了全方位的介绍和演示。《超实用的CSS代码段》分为11章,包含文字、字体、边框、图片、按钮、链接、背景、颜色、动画、页面布局、美化、盒子、3D、CSS Hack等网页设计和交互技术,对那些客户要求高、工作节奏快的网站开发人员和设计人员有着尤其重要的指导作用。
《超实用的CSS代码段》内容简洁明了、代码精练、重点突出、实例丰富、语言通俗易懂、原理清晰明白,是广大网页设计入门者和提高者的良好选择,同时也非常适合大中专院校学生学习阅读,也可作为高等院校非计算机专业,以及计算机非网络工程和相关专业的辅助读物。
资源目录:
序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-indent9
1.11.2 使用定位9
1.12 文字旋转10
1.13 现代字体栈10
第2章 边框和图片12
2.1 边框新属性的基础与实例12
2.1.1 border-color12
2.1.2 border-image13
2.1.3 border-radius17
2.1.4 box-shadow18
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 使用Javascript92
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 Clearfix186
6.12 升级版的Clearfix187
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 Hack273
10.1 让网站在所有浏览器下显示一致(CSS Reset)273
10.2 解决IE 6中浮动元素的双倍边距问题276
10.3 识别不同浏览器277
10.4 背景与图片透明281
10.5 IE 10 CSS Hack285
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 API349
11.21 动态提示框350
11.22 用CSS创建内容幻灯片353
11.23 打印自动显示超链接URL357
11.24 禁用Webkit内核某些属性357
11.24.1 禁用电话号码转换为链接样式(移动设备)357
11.24.2 禁用原生弹出菜单(移动设备)357
11.24.3 禁用用户选中358
11.24.4 禁用输入框、文本框的轮廓线358
11.24.5 禁用文本框的缩放功能358
资源截图: