《超實用的CSS代碼段》是2014年電子工業出版社出版的圖書,作者是趙榮嬌、任建智。
基本介紹
- 中文名:超實用的CSS代碼段
- 作者:趙榮嬌、任建智
- 出版社:電子工業出版社
- ISBN:9787121239489
內容簡介,圖書目錄,
內容簡介
《超實用的CSS代碼段》精選400餘段CSS代碼,覆蓋網頁上所有的設計元素,堪稱史上特別有用的CSS書籍,是網站建設和網頁設計人員不可或缺的解決方案、技巧和模板。本書的代碼跨平台、跨設備、跨瀏覽器,充分向讀者演示了如何使用CSS的各項技術,實現令人眩目的網頁布局和效果。
《超實用的CSS代碼段》從網頁效果的不同類型和使用場景,朽勸對常用的CSS代碼段進行了全方位的介紹和演示。全書分為11章,包乘立糊含文字、字型、框線、圖片、按鈕、連結、背景、顏色、動畫、頁面布局、美化、盒子、3D、CSSHack等網頁設計和互動技術,對那些客戶要求高、工作節奏快的網站開發人員和設計人員有著尤其重要的指導作用。
圖書目錄
序1 CSS的前世今生 VII
序2 你絕對不可能全部做對的
CSS題 XVII
序3 最流行的前端面試題 XXVI
第1章 文字與字型
1.1 在網頁中使用自定義字型
1.2 文本縮進和首字元下沉
1.3 自定義文本被選中時的樣式
1.4 文本對齊
1.5 調整文字、字元辨糠訂的間距
1.6 文本的裝飾――畫線、粗體、斜體
1.7 文字陰影
1.8 文字毛玻璃效果
1.9 文本溢出處理
1.10 金屬質感文字
1.11 隱藏文本
1.11.1 使用text-indent
1.11.2 使用定位
1.12 文字旋轉
1.13 現代字型棧
第2章 框線和圖片
2.1 框線新屬性的基礎與實例
2.1.1 border-color
2.1.2 border-image
2.1.3 border-radius
2.1.4 box-shadow
2.2 搜尋框
2.2.1 使用背景圖片的搜尋框
2.2.2 只使用CSS的搜尋框
2.3 微博發布框
2.4 拍立得效果框
2.5 CSS 3動畫框線
2.6 框線移動特效
2.7 Banner圖片的標籤
2.8 黑白圖片
2.9 圖片水印
2.10 圖片細節放大展示
2.11 圖片的瀑布流
2.11.1 浮動的瀑布流
2.11.2 絕對定位的瀑布流
2.12 圖片牆
2.13 圖片輪播圖
2.13.1 使用定位實現
2.13.2 使用透明度挨拘狼實現
2.13.3 縫切換
2.14 幻燈片
2.15 手風琴效果
2.16 圖片自適應
2.17 使用純CSS繪匪狼鍵茅製圖像
2.18 圖片原地放大
2.19 圖片翻轉
2.20 圖像地圖
第3章 按鈕和連結
3.1 圓角按鈕
3.2 簡單導航欄
3.3 二級導航欄
3.4 三級導航欄
3.5 滑動選單
3.6 網頁右鍵選單
3.7 下拉選單
3.8 CSS 3圓形導航選單
3.9 標籤雲
3.10 TAB標籤頁
3.10.1 使用JavaScript
3.10.2 使用CSS target偽類
3.11 選中文字分享
3.12 連結百葉窗效果
3.13 iPhone開關
3.14 按鈕式單選框與複選框
3.15 自定義播放器
3.16 文字變連結
3.17 根據檔案格式設定連結圖示
3.18 連結標籤"a"的順序
第4章 背景和顏色
4.1 顏色和漸變的基礎與實例
4.1.1 顏色
4.1.2 漸變簡述
4.1.3 帶前綴的漸變
4.1.4 W3C標準漸變(不帶前綴)
4.1.5 重複漸變
4.2 高光效果
4.3 多背景
4.4 全螢幕背景
4.5 斑馬線背景
4.6 棋盤背景
4.7 易拉罐效果
4.8 頁面頂部陰影
第5章 變換與動畫
5.1 CSS 3變換與動畫的基礎及實例
5.1.1 CSS 3變形概述
5.1.2 CSS 3變形語法詳解及套用
5.1.3 CSS 3轉換概述
5.1.4 CSS 3轉換語法詳解
5.1.5 CSS 3轉換具體實例
5.1.6 CSS 3動畫概述
5.1.7 CSS 3動畫語法詳解
5.1.8 簡單實例
5.2 紙張邊角動畫效果
5.2.1 紙張邊角稍稍捲起
5.2.2 邊角翻折
5.2.3 更具立體感的邊角翻折效果
5.3 氣泡式提示
5.4 對聯廣告
5.5 頁面loading效果
5.6 進度條
5.7 圖示滑動切換特效
5.8 流星划過效果
5.9 雪花飄落效果
5.10 數字滾動器
5.11 模擬時鐘
5.12 蘋果著名堡采想微的DOCK欄
5.13 蘋果系統的Stack特效
5.14 扇形展開
5.15 回到頁面的頂部
5.16 拖曳和拋出
5.16.1 拖曳實犁腳廈現原理
5.16.2 拋出與模擬拋物原理
5.16.3 視窗實現
第6章 頁面的布局
6.1 圖文混排
6.2 文本內容垂直居中
6.3 自適應寬度的水平居中
6.4 固定寬度且居中
6.5 固定頁腳
6.6 控制位置:絕對位置和相對位置
6.7 一個圖文混排的網頁選項卡
6.8 兼容瀏覽器的最小高度
6.9 讓div顯示在螢幕的中央
6.10 iPad螢幕布局
6.11 經典的CSS Clearfix
6.12 升級版的Clearfix
6.13 強制垂直滾動條
6.14 CSS 3文本分列
6.15 讓div層在Flash之上
6.16 float引起div自適應高度效的解決方案
6.17 Flexbox布局風格
6.18 動態高度下的居中
6.19 純CSS實現固定表頭
6.20 Metro布局風格
第7章 美化與裝飾
7.1 文本裝飾
7.1.1 文本的顏色
7.1.2 文本畫線
7.1.3 文本的空白
7.1.4 文本的方向
7.2 發光輸入框
7.3 自定義滾動條
7.4 頁面頂部陰影
7.5 巧妙實現分隔線
7.6 三角形列表符號
7.7 紙頁面捲曲效果
7.8 跨瀏覽器的透明度
7.9 滑鼠指向時變成手型
7.10 滑鼠移動到div上高亮顯示
7.11 發光錨連結
7.12 禁止Webkit瀏覽器的高亮效果
7.13 多種風格的翻頁頁碼
7.13.1 Yahoo舊版翻頁風格
7.13.2 Yahoo新版翻頁風格
7.13.3 Meneame翻頁風格
7.13.4 YouTube翻頁風格
7.14 創建針線縫合效果
第8章 盒子
8.1 CSS 3盒模型
8.2 內層CSS 3盒陰影
8.3 外層CSS 3盒陰影
8.4 純CSS 3透明水晶盒
8.5 投影發光效果
第9章 3D相關
9.1 3D文字
9.2 3D圖片立體效果
9.3 3D按鈕
9.4 3D下拉選單
9.5 3D旋轉動畫
第10章 CSS Hack
10.1 讓網站在所有瀏覽器下顯示一致(CSS Reset)
10.2 解決IE 6中浮動元素的雙倍邊距問題
10.3 識別不同瀏覽器
10.4 背景與圖片透明
10.5 IE 10 CSS Hack
10.6 CSS 3 濾鏡
10.7 常用的CSS Hack列表
10.8 CSS重置方案(CSS Reset)
10.8.1 方案一
10.8.2 方案二(雅虎方案)
10.8.3 方案三
第11章 其他常用代碼
11.1 使用CSS 3實現簡單的計算器
11.2 使用CSS 3製作網頁播放器
11.3 不使用table的Form表單
11.4 可以重複利用的規則
11.5 在同一元素上使用多種類
11.6 CSS塊引用模板
11.7 花式CSS 3 Pull-引文
11.8 一般媒體查詢
11.9 CSS 3背景梯度
11.10 CSS日曆顯示效果
11.11 字元編碼
11.12 手機APP使用的簡潔註冊頁面
11.13 手機簡潔價目表
11.14 手機簡潔任務表
11.15 微店購物車
11.16 APP導航與提醒
11.17 簡潔記事本
11.18 手機檔案下載
11.19 迷你下拉列表框
11.20 Google Font API
11.21 動態提示框
11.22 用CSS創建內容幻燈片
11.23 列印自動顯示超連結URL
11.24 禁用Webkit核心某些屬性
11.24.1 禁用電話號碼轉換為連結樣式(移動設備)
11.24.2 禁用原生彈出選單(移動設備)
11.24.3 禁用用戶選中
11.24.4 禁用輸入框、文本框的輪廓線
11.24.5 禁用文本框的縮放功能
2.19 圖片翻轉
2.20 圖像地圖
第3章 按鈕和連結
3.1 圓角按鈕
3.2 簡單導航欄
3.3 二級導航欄
3.4 三級導航欄
3.5 滑動選單
3.6 網頁右鍵選單
3.7 下拉選單
3.8 CSS 3圓形導航選單
3.9 標籤雲
3.10 TAB標籤頁
3.10.1 使用JavaScript
3.10.2 使用CSS target偽類
3.11 選中文字分享
3.12 連結百葉窗效果
3.13 iPhone開關
3.14 按鈕式單選框與複選框
3.15 自定義播放器
3.16 文字變連結
3.17 根據檔案格式設定連結圖示
3.18 連結標籤"a"的順序
第4章 背景和顏色
4.1 顏色和漸變的基礎與實例
4.1.1 顏色
4.1.2 漸變簡述
4.1.3 帶前綴的漸變
4.1.4 W3C標準漸變(不帶前綴)
4.1.5 重複漸變
4.2 高光效果
4.3 多背景
4.4 全螢幕背景
4.5 斑馬線背景
4.6 棋盤背景
4.7 易拉罐效果
4.8 頁面頂部陰影
第5章 變換與動畫
5.1 CSS 3變換與動畫的基礎及實例
5.1.1 CSS 3變形概述
5.1.2 CSS 3變形語法詳解及套用
5.1.3 CSS 3轉換概述
5.1.4 CSS 3轉換語法詳解
5.1.5 CSS 3轉換具體實例
5.1.6 CSS 3動畫概述
5.1.7 CSS 3動畫語法詳解
5.1.8 簡單實例
5.2 紙張邊角動畫效果
5.2.1 紙張邊角稍稍捲起
5.2.2 邊角翻折
5.2.3 更具立體感的邊角翻折效果
5.3 氣泡式提示
5.4 對聯廣告
5.5 頁面loading效果
5.6 進度條
5.7 圖示滑動切換特效
5.8 流星划過效果
5.9 雪花飄落效果
5.10 數字滾動器
5.11 模擬時鐘
5.12 蘋果著名的DOCK欄
5.13 蘋果系統的Stack特效
5.14 扇形展開
5.15 回到頁面的頂部
5.16 拖曳和拋出
5.16.1 拖曳實現原理
5.16.2 拋出與模擬拋物原理
5.16.3 視窗實現
第6章 頁面的布局
6.1 圖文混排
6.2 文本內容垂直居中
6.3 自適應寬度的水平居中
6.4 固定寬度且居中
6.5 固定頁腳
6.6 控制位置:絕對位置和相對位置
6.7 一個圖文混排的網頁選項卡
6.8 兼容瀏覽器的最小高度
6.9 讓div顯示在螢幕的中央
6.10 iPad螢幕布局
6.11 經典的CSS Clearfix
6.12 升級版的Clearfix
6.13 強制垂直滾動條
6.14 CSS 3文本分列
6.15 讓div層在Flash之上
6.16 float引起div自適應高度效的解決方案
6.17 Flexbox布局風格
6.18 動態高度下的居中
6.19 純CSS實現固定表頭
6.20 Metro布局風格
第7章 美化與裝飾
7.1 文本裝飾
7.1.1 文本的顏色
7.1.2 文本畫線
7.1.3 文本的空白
7.1.4 文本的方向
7.2 發光輸入框
7.3 自定義滾動條
7.4 頁面頂部陰影
7.5 巧妙實現分隔線
7.6 三角形列表符號
7.7 紙頁面捲曲效果
7.8 跨瀏覽器的透明度
7.9 滑鼠指向時變成手型
7.10 滑鼠移動到div上高亮顯示
7.11 發光錨連結
7.12 禁止Webkit瀏覽器的高亮效果
7.13 多種風格的翻頁頁碼
7.13.1 Yahoo舊版翻頁風格
7.13.2 Yahoo新版翻頁風格
7.13.3 Meneame翻頁風格
7.13.4 YouTube翻頁風格
7.14 創建針線縫合效果
第8章 盒子
8.1 CSS 3盒模型
8.2 內層CSS 3盒陰影
8.3 外層CSS 3盒陰影
8.4 純CSS 3透明水晶盒
8.5 投影發光效果
第9章 3D相關
9.1 3D文字
9.2 3D圖片立體效果
9.3 3D按鈕
9.4 3D下拉選單
9.5 3D旋轉動畫
第10章 CSS Hack
10.1 讓網站在所有瀏覽器下顯示一致(CSS Reset)
10.2 解決IE 6中浮動元素的雙倍邊距問題
10.3 識別不同瀏覽器
10.4 背景與圖片透明
10.5 IE 10 CSS Hack
10.6 CSS 3 濾鏡
10.7 常用的CSS Hack列表
10.8 CSS重置方案(CSS Reset)
10.8.1 方案一
10.8.2 方案二(雅虎方案)
10.8.3 方案三
第11章 其他常用代碼
11.1 使用CSS 3實現簡單的計算器
11.2 使用CSS 3製作網頁播放器
11.3 不使用table的Form表單
11.4 可以重複利用的規則
11.5 在同一元素上使用多種類
11.6 CSS塊引用模板
11.7 花式CSS 3 Pull-引文
11.8 一般媒體查詢
11.9 CSS 3背景梯度
11.10 CSS日曆顯示效果
11.11 字元編碼
11.12 手機APP使用的簡潔註冊頁面
11.13 手機簡潔價目表
11.14 手機簡潔任務表
11.15 微店購物車
11.16 APP導航與提醒
11.17 簡潔記事本
11.18 手機檔案下載
11.19 迷你下拉列表框
11.20 Google Font API
11.21 動態提示框
11.22 用CSS創建內容幻燈片
11.23 列印自動顯示超連結URL
11.24 禁用Webkit核心某些屬性
11.24.1 禁用電話號碼轉換為連結樣式(移動設備)
11.24.2 禁用原生彈出選單(移動設備)
11.24.3 禁用用戶選中
11.24.4 禁用輸入框、文本框的輪廓線
11.24.5 禁用文本框的縮放功能