超實用的CSS代碼段 超实用的CSS代码段

趙榮嬌, 任建智

  • 出版商: 電子工業
  • 出版日期: 2014-09-01
  • 定價: $354
  • 售價: 8.5$301
  • 語言: 簡體中文
  • 頁數: 357
  • 裝訂: 平裝
  • ISBN: 7121239485
  • ISBN-13: 9787121239489
  • 相關分類: CSS

已絕版

買這商品的人也買了...

商品描述

 

<內容簡介>

《超實用的CSS代碼段》精選400餘段CSS代碼,覆蓋網頁上所有的設計元素,堪稱史上最有用的CSS書籍,是網站建設和網頁設計人員不可或缺的解決方案、技巧和模板。《超實用的CSS代碼段》的代碼跨平臺、跨設備、跨瀏覽器,充分向讀者演示瞭如何使用CSS的各項技術,實現令人眩目的網頁佈局和效果。《超實用的CSS代碼段》從網頁效果的不同類型和使用場景,對常用的CSS代碼段進行了全方位的介紹和演示。全書分為11章,包含文字、字體、邊框、圖片、按鈕、鏈接、背景、顏色、動畫、頁面佈局、美化、盒子、3D、CSS Hack等網頁設計和交互技術,對那些客戶要求高、工作節奏快的網站開發人員和設計人員有著尤其重要的指導作用。

 

<章節目錄>

序1CSS的前世今生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.1border—color12
2.1.2border—image13
2.1.3border—radius17
2.1.4box—shadow18
2.2搜索框19
2.2.1使用背景圖片的搜索框19
2.2.2只使用CSS的搜索框20
2.3微博發布框21
2.4拍立得效果框26
2.5CSS3動畫邊框27
2.6邊框移動特效31
2.7Banner圖片的標簽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.8CSS3圓形導航菜單87
3.9標簽雲90
3.10TAB標簽頁91
3.10.1使用JavaScript92
3.10.2使用CSStarget偽類92
3.11選中文字分享93
3.12鏈接百葉窗效果94
3.13iPhone開關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.4W3C標準漸變(不帶前綴)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.1CSS3變換與動畫的基礎及實例120
5.1.1CSS3變形概述120
5.1.2CSS3變形語法詳解及應用121
5.1.3CSS3轉換概述122
5.1.4CSS3轉換語法詳解123
5.1.5CSS3轉換具體實例124
5.1.6CSS3動畫概述124
5.1.7CSS3動畫語法詳解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.10iPad屏幕佈局185
6.11經典的CSSClearfix186
6.12升級版的Clearfix187
6.13強制垂直滾動條189
6.14CSS3文本分列190
6.15讓div層在Flash之上192
6.16float引起div自適應高度無效的解決方案193
6.17Flexbox佈局風格196
6.18動態高度下的居中201
6.19純CSS實現固定表頭202
6.20Metro佈局風格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.1Yahoo舊版翻頁風格232
7.13.2Yahoo新版翻頁風格234
7.13.3Meneame翻頁風格236
7.13.4YouTube翻頁風格238
7.14創建針線縫合效果239
第8章盒子241
8.1CSS3盒模型241
8.2內層CSS3盒陰影243
8.3外層CSS3盒陰影243
8.4純CSS3透明水晶盒244
8.5投影發光效果249
第9章3D相關251
9.13D文字251
9.23D圖片立體效果253
9.33D按鈕258
9.43D下拉菜單264
9.53D旋轉動畫269
第10章CSSHack273
10.1讓網站在所有瀏覽器下顯示一致(CSSReset)273
10.2解決IE6中浮動元素的雙倍邊距問題276
10.3識別不同瀏覽器277
10.4背景與圖片透明281
10.5IE10CSSHack285
10.6CSS3濾鏡286
10.7常用的CSSHack列表291
10.8CSS重置方案(CSSReset)294
10.8.1方案一294
10.8.2方案二(雅虎方案)295
10.8.3方案三295
第11章其他常用代碼297
11.1使用CSS3實現簡單的計算器297
11.2使用CSS3製作網頁播放器301
11.3不使用table的Form表單306
11.4可以重覆利用的規則310
11.5在同一元素上使用多種類312
11.6CSS塊引用模板313
11.7花式CSS3Pull—引文314
11.8一般媒體查詢315
11.9CSS3背景梯度317
11.10CSS日歷顯示效果318
11.11字符編碼322
11.12手機APP使用的簡潔註冊頁面323
11.13手機簡潔價目表327
11.14手機簡潔任務表331
11.15微店購物車334
11.16APP導航與提醒338
11.17簡潔記事本341
11.18手機文件下載345
11.19迷你下拉列表框347
11.20GoogleFontAPI349
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