扫一扫
关注中图网
官方微博
本类五星书更多>
-
>
决战行测5000题(言语理解与表达)
-
>
软件性能测试.分析与调优实践之路
-
>
第一行代码Android
-
>
深度学习
-
>
Unreal Engine 4蓝图完全学习教程
-
>
深入理解计算机系统-原书第3版
-
>
Word/Excel PPT 2013办公应用从入门到精通-(附赠1DVD.含语音视频教学+办公模板+PDF电子书)
CSS创意项目实践 版权信息
- ISBN：9787302659808
- 条形码：9787302659808 ; 978-7-302-65980-8
- 装帧：平装-胶订
- 册数：暂无
- 重量：暂无
- 所属分类：>>
CSS创意项目实践 本书特色
CSS创意项目实践
不要局限于制作平淡无奇的网页！借助CSS，你可以掌控色彩、布局和排版，让网页不仅功能出众，还富有美感。对于前端开发者和设计师来说，CSS是一项必须掌握的技能。本书将帮助你以正确的方式入门，迈出坚实的**步。
《CSS创意项目实践》将引导你完成12个CSS创意项目，并帮助你逐步提升CSS技能。每个有趣的挑战都以可下载的HTML框架开始。你将运用自己的设计理念来完善它们，并在探索过程中逐渐掌握CSS中的关键概念，包括过渡效果、布局和表单样式等。你还将深入研究一些强大的特性，如Flexbox和网格布局。你从本书中学到的所有技能都可以轻松应用到大型应用程序中。学完本书后，你将收获一系列炫酷的作品，可随时将其用于你的下一个项目。
CSS创意项目实践 内容简介
主要内容 ● 利用关键帧创建动画 ● 使用网格和Flexbox等布局技巧 ● 对表单元素进行样式化，包括单选按钮 ● 嵌入字体以及与排版相关的样式 ● 利用伪元素和媒体查询进行条件样式化
CSS创意项目实践 目录
第1章 CSS介绍 1
1.1 CSS概述 1
1.1.1 关注点分离 1
1.1.2 什么是CSS 3
1.2 通过创建文章布局开始学习CSS 3
1.3 向HTML添加CSS 7
1.3.1 内联CSS 7
1.3.2 嵌入式CSS 9
1.3.3 外部CSS 10
1.4 CSS中的层叠 11
1.4.1 用户代理样式表 11
1.4.2 作者样式表 12
1.4.3 用户样式表 12
1.4.4 CSS重置 12
1.4.5 标准化器 14
1.4.6 !important注释 15
1.5 CSS中的特异性 15
1.6 CSS选择器 17
1.6.1 基本选择器 17
1.6.2 组合器 20
1.6.3 伪类选择器和伪元素选择器 25
1.6.4 属性值选择器 28
1.6.5 通用选择器 29
1.7 编写CSS的不同方式 30
1.7.1 简写属性 30
1.7.2 格式化 32
1.8 本章小结 33
第2章 使用CSS网格设计布局 35
2.1 CSS网格 35
2.2 显示网格 39
2.3 网格轨道和线条 41
2.3.1 重复列 42
2.3.2 minmax()函数 42
2.3.3 auto关键词 42
2.3.4 分数(fr)单位 43
2.4 网格模板区域 45
2.4.1 grid-area属性 47
2.4.2 gap属性 49
2.5 媒体查询 50
2.6 无障碍性考虑因素 53
2.7 本章小结 54
第3章 制作响应式动画加载界面 55
3.1 设置 55
3.2 SVG基础 56
3.2.1 SVG元素的位置 58
3.2.2 视口 58
3.2.3 视图框 60
3.2.4 SVG中的形状 61
3.3 对SVG应用样式 63
3.4 在CSS中为元素添加动画效果 64
3.4.1 关键帧和动画名称 65
3.4.2 duration属性 68
3.4.3 iteration-count属性 69
3.4.4 动画的简写属性 70
3.4.5 animation-delay属性 70
3.4.6 transform-origin属性 72
3.5 无障碍性和prefers-reduced-motion媒体查询 73
3.6 对HTML进度条进行样式设置 75
3.6.1 对进度条进行样式设置 76
3.6.2 为-webkit-浏览器的进度条设置样式 77
3.6.3 样式化-moz-浏览器的进度条 79
3.7 本章小结 81
第4章 创建响应式新闻网站布局 83
4.1 设置主题 86
4.1.1 字体 86
4.1.2 font-weight属性 88
4.1.3 字体的简写属性 89
4.1.4 视觉层次结构 89
4.1.5 内联元素与块级元素 90
4.1.6 引号样式 92
4.2 使用CSS计数器 93
4.2.1 symbols描述符 93
4.2.2 system描述符 94
4.2.3 后缀描述符 94
4.2.4 全面总结 94
4.2.5 @counter与list-style-image 95
4.3 对图像进行样式设置 95
4.3.1 使用filter属性 95
4.3.2 处理加载失败的图片 97
4.3.3 格式化图像标题 98
4.4 使用CSS多列布局模块 100
4.4.1 创建媒体查询 100
4.4.2 对列进行定义和样式化 100
4.4.3 使用column-rule属性 101
4.4.4 使用column-gap属性调整间距 102
4.4.5 使内容跨越多个列 103
4.4.6 控制内容的分割 104
4.5 添加*后的润色 105
4.5.1 文本两端对齐和断词 105
4.5.2 使文本环绕在图像周围 106
4.5.3 将max-width和margin的值设置为auto 107
4.6 本章小结 109
第5章 悬停互动的摘要卡片 111
5.1 开始项目 113
5.2 使用网格进行页面布局 114
5.2.1 使用网格布局 115
5.2.2 媒体查询 117
5.3 使用background-clip属性对标题进行样式化 119
5.3.1 设置字体 119
5.3.2 使用background-clip 120
5.4 对卡片进行样式化 121
5.4.1 外部卡片容器 122
5.4.2 内部容器及其内容 124
5.5 在悬停和焦点内状态下使用过渡效果 127
5.6 本章小结 133
第6章 制作个人资料卡片 135
6.1 开始项目 136
6.2 设置CSS自定义属性 137
6.3 创建全高度背景 138
6.4 使用Flexbox对卡片进行样式化 140
6.5 美化和放置头像图片 143
6.5.1 object-fit属性 143
6.5.2 负边距 144
6.6 设置背景大小和位置 147
6.7 对内容进行样式化 150
6.7.1 姓名和职务 150
6.7.2 space-around和gap属性 152
6.7.3 flex-basis和flex-shrink属性 154
6.7.4 flex-direction属性 155
6.7.5 段落 156
6.7.6 flex-wrap属性 157
6.8 对动作进行样式化 159
6.9 本章小结 161
第7章 充分利用浮动特性 163
7.1 添加首字下沉效果 166
7.1.1 行距 167
7.1.2 对齐方式 167
7.1.3 **个字母 168
7.2 对引文进行样式化 170
7.3 让文本环绕罗盘图片 171
7.3.1 添加shape-outside: circle属性 171
7.3.2 添加裁剪路径 173
7.3.3 使用border-radius创建形状 174
7.4 使文本环绕小狗图像 176
7.4.1 关于path()的使用 176
7.4.2 浮动图像 177
7.4.3 添加shape-margin 178
7.5 本章小结 180
第8章 设计结账购物车 181
8.1 开始项目 182
8.2 主题设计 185
8.2.1 排版设计 185
8.2.2 链接和按钮 187
8.2.3 输入文本框 191
8.2.4 表格 191
8.2.5 描述列表 196
8.2.6 卡片 197
8.3 移动端布局 199
8.3.1 表格移动端视图 199
8.3.2 描述列表 205
8.3.3 调用动作的链接 206
8.3.4 内边距、外边距以及外边距折叠 207
8.4 中等尺寸屏幕的布局 208
8.4.1 右对齐的数字 209
8.4.2 使前两列左对齐 211
8.4.3 使输入文本框中的数字右对齐 212
8.4.4 单元格内边距和外边距 212
8.5 宽屏幕 213
8.6 本章小结 217
第9章 创建虚拟信用卡 219
9.1 开始项目 220
9.2 创建布局 222
9.2.1 调整信用卡尺寸 223
9.2.2 设置信用卡正面的样式 224
9.2.3 信用卡背面的布局 227
9.3 处理背景图像 230
9.3.1 背景属性的简写形式 230
9.3.2 文本颜色 231
9.4 排版 233
9.4.1 @font-face 234
9.4.2 使用@supports创建备用方案 236
9.4.3 字体大小和排版改进 238
9.5 创建翻转效果 239
9.5.1 位置 240
9.5.2 过渡和backface-visibility 241
9.5.3 transition属性 243
9.5.4 cubic-bezier()函数 244
9.6 设置圆角 246
9.7 外框和文本阴影 247
9.7.1 drop-shadow函数与box-shadow属性 247
9.7.2 文本阴影 248
9.8 收尾 249
9.9 本章小结 250
第10章 样式化表单 251
10.1 初始设置 251
10.2 重置输入控件集样式 255
10.3 对输入控件进行样式化 256
10.3.1 对文本和电子邮件输入控件进行样式设置 256
10.3.2 让选择框和文本域的样式与输入框相匹配 258
10.3.3 对单选按钮和复选框进行样式化 260
10.3.4 使用:where()和:is()伪类 263
10.3.5 设置选中状态下的单选按钮和复选框样式 263
10.3.6 使用:checked伪类 264
10.3.7 设置单选按钮被选中时显示的圆点 266
10.3.8 使用CSS为复选框设置标记 266
10.3.9 使用:is()和:where()计算特异性级别 268
10.4 对下拉菜单应用样式 269
10.5 对标签和图例进行样式化 271
10.6 为占位文本添加样式 272
10.7 对发送按钮进行样式化 273
10.8 错误处理 273
10.9 为表单元素添加悬停和焦点样式 277
10.9.1 使用:focus及:focus-visible 277
10.9.2 添加悬停样式 279
10.10 处理forced-colors模式 280
10.11 本章小结 283
第11章 社交媒体分享链接的动画效果 285
11.1 处理CSS架构 285
11.1.1 OOCSS 286
11.1.2 SMACSS 286
11.1.3 BEM 286
11.2 开始项目 287
11.3 获取图标 288
11.3.1 媒体图标 289
11.3.2 图标库 289
11.4 对区块进行样式化 289
11.5 对元素进行样式化 290
11.5.1 Share按钮 290
11.5.2 Share菜单 292
11.5.3 分享链接 292
11.5.4 scale() 293
11.5.5 继承属性值 294
11.6 对组件进行动画处理 296
11.6.1 创建过渡 296
11.6.2 展开和关闭组件 297
11.6.3 对菜单进行动画处理 302
11.7 本章小结 304
第12章 使用预处理器 307
12.1 运行预处理器 308
12.1.1 npm的设置 308
12.1.2 .sass与.scss 310
12.1.3 CodePen的设置 310
12.1.4 初始HTML和SCSS 311
12.2 Sass变量 314
12.3 @mixin和@include 319
12.3.1 object-fit属性 319
12.3.2 插值 320
12.3.3 使用mixin 320
12.3.4 border-radius的简写属性 323
12.4 嵌套 323
12.5 @each 325
12.6 颜色函数 329
12.7 @if和@else 331
12.8 *后的思考 334
12.9 本章小结 334
附录 335
1.1 CSS概述 1
1.1.1 关注点分离 1
1.1.2 什么是CSS 3
1.2 通过创建文章布局开始学习CSS 3
1.3 向HTML添加CSS 7
1.3.1 内联CSS 7
1.3.2 嵌入式CSS 9
1.3.3 外部CSS 10
1.4 CSS中的层叠 11
1.4.1 用户代理样式表 11
1.4.2 作者样式表 12
1.4.3 用户样式表 12
1.4.4 CSS重置 12
1.4.5 标准化器 14
1.4.6 !important注释 15
1.5 CSS中的特异性 15
1.6 CSS选择器 17
1.6.1 基本选择器 17
1.6.2 组合器 20
1.6.3 伪类选择器和伪元素选择器 25
1.6.4 属性值选择器 28
1.6.5 通用选择器 29
1.7 编写CSS的不同方式 30
1.7.1 简写属性 30
1.7.2 格式化 32
1.8 本章小结 33
第2章 使用CSS网格设计布局 35
2.1 CSS网格 35
2.2 显示网格 39
2.3 网格轨道和线条 41
2.3.1 重复列 42
2.3.2 minmax()函数 42
2.3.3 auto关键词 42
2.3.4 分数(fr)单位 43
2.4 网格模板区域 45
2.4.1 grid-area属性 47
2.4.2 gap属性 49
2.5 媒体查询 50
2.6 无障碍性考虑因素 53
2.7 本章小结 54
第3章 制作响应式动画加载界面 55
3.1 设置 55
3.2 SVG基础 56
3.2.1 SVG元素的位置 58
3.2.2 视口 58
3.2.3 视图框 60
3.2.4 SVG中的形状 61
3.3 对SVG应用样式 63
3.4 在CSS中为元素添加动画效果 64
3.4.1 关键帧和动画名称 65
3.4.2 duration属性 68
3.4.3 iteration-count属性 69
3.4.4 动画的简写属性 70
3.4.5 animation-delay属性 70
3.4.6 transform-origin属性 72
3.5 无障碍性和prefers-reduced-motion媒体查询 73
3.6 对HTML进度条进行样式设置 75
3.6.1 对进度条进行样式设置 76
3.6.2 为-webkit-浏览器的进度条设置样式 77
3.6.3 样式化-moz-浏览器的进度条 79
3.7 本章小结 81
第4章 创建响应式新闻网站布局 83
4.1 设置主题 86
4.1.1 字体 86
4.1.2 font-weight属性 88
4.1.3 字体的简写属性 89
4.1.4 视觉层次结构 89
4.1.5 内联元素与块级元素 90
4.1.6 引号样式 92
4.2 使用CSS计数器 93
4.2.1 symbols描述符 93
4.2.2 system描述符 94
4.2.3 后缀描述符 94
4.2.4 全面总结 94
4.2.5 @counter与list-style-image 95
4.3 对图像进行样式设置 95
4.3.1 使用filter属性 95
4.3.2 处理加载失败的图片 97
4.3.3 格式化图像标题 98
4.4 使用CSS多列布局模块 100
4.4.1 创建媒体查询 100
4.4.2 对列进行定义和样式化 100
4.4.3 使用column-rule属性 101
4.4.4 使用column-gap属性调整间距 102
4.4.5 使内容跨越多个列 103
4.4.6 控制内容的分割 104
4.5 添加*后的润色 105
4.5.1 文本两端对齐和断词 105
4.5.2 使文本环绕在图像周围 106
4.5.3 将max-width和margin的值设置为auto 107
4.6 本章小结 109
第5章 悬停互动的摘要卡片 111
5.1 开始项目 113
5.2 使用网格进行页面布局 114
5.2.1 使用网格布局 115
5.2.2 媒体查询 117
5.3 使用background-clip属性对标题进行样式化 119
5.3.1 设置字体 119
5.3.2 使用background-clip 120
5.4 对卡片进行样式化 121
5.4.1 外部卡片容器 122
5.4.2 内部容器及其内容 124
5.5 在悬停和焦点内状态下使用过渡效果 127
5.6 本章小结 133
第6章 制作个人资料卡片 135
6.1 开始项目 136
6.2 设置CSS自定义属性 137
6.3 创建全高度背景 138
6.4 使用Flexbox对卡片进行样式化 140
6.5 美化和放置头像图片 143
6.5.1 object-fit属性 143
6.5.2 负边距 144
6.6 设置背景大小和位置 147
6.7 对内容进行样式化 150
6.7.1 姓名和职务 150
6.7.2 space-around和gap属性 152
6.7.3 flex-basis和flex-shrink属性 154
6.7.4 flex-direction属性 155
6.7.5 段落 156
6.7.6 flex-wrap属性 157
6.8 对动作进行样式化 159
6.9 本章小结 161
第7章 充分利用浮动特性 163
7.1 添加首字下沉效果 166
7.1.1 行距 167
7.1.2 对齐方式 167
7.1.3 **个字母 168
7.2 对引文进行样式化 170
7.3 让文本环绕罗盘图片 171
7.3.1 添加shape-outside: circle属性 171
7.3.2 添加裁剪路径 173
7.3.3 使用border-radius创建形状 174
7.4 使文本环绕小狗图像 176
7.4.1 关于path()的使用 176
7.4.2 浮动图像 177
7.4.3 添加shape-margin 178
7.5 本章小结 180
第8章 设计结账购物车 181
8.1 开始项目 182
8.2 主题设计 185
8.2.1 排版设计 185
8.2.2 链接和按钮 187
8.2.3 输入文本框 191
8.2.4 表格 191
8.2.5 描述列表 196
8.2.6 卡片 197
8.3 移动端布局 199
8.3.1 表格移动端视图 199
8.3.2 描述列表 205
8.3.3 调用动作的链接 206
8.3.4 内边距、外边距以及外边距折叠 207
8.4 中等尺寸屏幕的布局 208
8.4.1 右对齐的数字 209
8.4.2 使前两列左对齐 211
8.4.3 使输入文本框中的数字右对齐 212
8.4.4 单元格内边距和外边距 212
8.5 宽屏幕 213
8.6 本章小结 217
第9章 创建虚拟信用卡 219
9.1 开始项目 220
9.2 创建布局 222
9.2.1 调整信用卡尺寸 223
9.2.2 设置信用卡正面的样式 224
9.2.3 信用卡背面的布局 227
9.3 处理背景图像 230
9.3.1 背景属性的简写形式 230
9.3.2 文本颜色 231
9.4 排版 233
9.4.1 @font-face 234
9.4.2 使用@supports创建备用方案 236
9.4.3 字体大小和排版改进 238
9.5 创建翻转效果 239
9.5.1 位置 240
9.5.2 过渡和backface-visibility 241
9.5.3 transition属性 243
9.5.4 cubic-bezier()函数 244
9.6 设置圆角 246
9.7 外框和文本阴影 247
9.7.1 drop-shadow函数与box-shadow属性 247
9.7.2 文本阴影 248
9.8 收尾 249
9.9 本章小结 250
第10章 样式化表单 251
10.1 初始设置 251
10.2 重置输入控件集样式 255
10.3 对输入控件进行样式化 256
10.3.1 对文本和电子邮件输入控件进行样式设置 256
10.3.2 让选择框和文本域的样式与输入框相匹配 258
10.3.3 对单选按钮和复选框进行样式化 260
10.3.4 使用:where()和:is()伪类 263
10.3.5 设置选中状态下的单选按钮和复选框样式 263
10.3.6 使用:checked伪类 264
10.3.7 设置单选按钮被选中时显示的圆点 266
10.3.8 使用CSS为复选框设置标记 266
10.3.9 使用:is()和:where()计算特异性级别 268
10.4 对下拉菜单应用样式 269
10.5 对标签和图例进行样式化 271
10.6 为占位文本添加样式 272
10.7 对发送按钮进行样式化 273
10.8 错误处理 273
10.9 为表单元素添加悬停和焦点样式 277
10.9.1 使用:focus及:focus-visible 277
10.9.2 添加悬停样式 279
10.10 处理forced-colors模式 280
10.11 本章小结 283
第11章 社交媒体分享链接的动画效果 285
11.1 处理CSS架构 285
11.1.1 OOCSS 286
11.1.2 SMACSS 286
11.1.3 BEM 286
11.2 开始项目 287
11.3 获取图标 288
11.3.1 媒体图标 289
11.3.2 图标库 289
11.4 对区块进行样式化 289
11.5 对元素进行样式化 290
11.5.1 Share按钮 290
11.5.2 Share菜单 292
11.5.3 分享链接 292
11.5.4 scale() 293
11.5.5 继承属性值 294
11.6 对组件进行动画处理 296
11.6.1 创建过渡 296
11.6.2 展开和关闭组件 297
11.6.3 对菜单进行动画处理 302
11.7 本章小结 304
第12章 使用预处理器 307
12.1 运行预处理器 308
12.1.1 npm的设置 308
12.1.2 .sass与.scss 310
12.1.3 CodePen的设置 310
12.1.4 初始HTML和SCSS 311
12.2 Sass变量 314
12.3 @mixin和@include 319
12.3.1 object-fit属性 319
12.3.2 插值 320
12.3.3 使用mixin 320
12.3.4 border-radius的简写属性 323
12.4 嵌套 323
12.5 @each 325
12.6 颜色函数 329
12.7 @if和@else 331
12.8 *后的思考 334
12.9 本章小结 334
附录 335
展开全部
CSS创意项目实践 作者简介
Martine Dowden是一位作家、演讲者和能力卓越的首席技术官。Michael Gearon是一位用户体验设计师和前端开发者，曾与许多知名品牌合作过。
书友推荐
本类畅销
-
快速开发(纪念版)
¥63.7¥128 -
4.23文创礼盒A款--“作家言我精神状态”
¥42.3¥206 -
4.23文创礼盒B款--“作家言我精神状态”
¥42.3¥206 -
一句顶一万句 (印签版)
¥40.4¥68 -
百年书评史散论
¥14.9¥38 -
1980年代:小说六记
¥52.8¥69
