掃一掃
關注中圖網
官方微博
本類五星書更多>
-
>
全國計算機等級考試最新真考題庫模擬考場及詳解·二級MSOffice高級應用
-
>
決戰行測5000題(言語理解與表達)
-
>
軟件性能測試.分析與調優實踐之路
-
>
第一行代碼Android
-
>
JAVA持續交付
-
>
EXCEL最強教科書(完全版)(全彩印刷)
-
>
深度學習
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是一位用戶體驗設計師和前端開發者，曾與許多知名品牌合作過。
書友推薦
- >
人文閱讀與收藏·良友文學叢書:一天的工作
- >
史學評論
- >
伯納黛特,你要去哪(2021新版)
- >
詩經-先民的歌唱
- >
上帝之肋:男人的真實旅程
- >
自卑與超越
- >
月亮虎
- >
新文學天穹兩巨星--魯迅與胡適/紅燭學術叢書(紅燭學術叢書)
本類暢銷
