作者-任建智 -FindBook 找書網

內容簡介

從頁面布局X細節設計X網頁美化X CSS Hack等層面，
帶你認識各種炫目、實用、錯過可惜的網頁效果！

　　本書精選400多段的CSS程式碼，從基礎的文字、圖片、邊框、按鈕、連結等網頁元素設計，到轉場動畫、頁面布局、響應式設計等各種進階功能，應有盡有，讓你能夠輕鬆做出媲美知名網站的網頁效果，如：圖片牆、幻燈片、影像地圖、對聯廣告、紙張邊角效果等。此外，更提出多種CSS Hack方案，解決因瀏覽器不同所帶來的效果不一致、效果出錯等相容性問題，讓你的網頁不論在哪種瀏覽器上，都能完美呈現！

　　■功能導向的CSS實例
　　以網頁設計的各種分類、使用場景為基礎，從最常見、最實用的網頁效果出發，並直接以CSS完成設計，做出令人目不轉睛的網頁布局與效果。

　　■隨查隨用的內容架構
　　本書實例皆各自獨立，你可以視需求挑選章節來做練習；而且書中語法皆具備跨瀏覽器、跨平台、跨裝置的特性，讓你能夠隨查隨用，走到哪學到哪！

　　■多種網頁編碼的實作
　　以純CSS語法為主軸，結合簡單的HTML、JavaScript、jQuery框架和自己建構框架等方式，實作各種不同效果；並且搭配原理說明，讓你能夠在不同的方式間自由切換。

　　無論你是網頁設計的入門者，抑或是想從CSS 2轉型到CSS 3的CSS愛好者，更甚至是網站後台的開發人員，這都是一本你必備的知識寶典！

　　光碟內容：全書範例原始檔

本書特色

　　利用CSS，為你的網站穿上美麗的外衣！

　　■範例實用，從最常見的網頁效果出發，提供最有用的範例。
　　■功能導向，每則範例都是單獨的功能型頁面，讓你能從任何一個感興趣的網頁效果開始閱讀。
　　■結合多種程式碼，讓你在純CSS語法之外，同時認識簡單的JavaScript、jQuery框架，實作多種不同的效果。
　　■附贈CSS能力檢測題，讓你測試自己的CSS網頁設計能力。

作者介紹

作者簡介

趙榮嬌

　　畢業於中國傳媒大學，工學碩士。目前就職於淘寶網航旅事業部，擔任前端開發工程師，曾參與旅遊特賣首頁、1688訂單等專案開發。熱愛技術，喜歡分享。中國傳媒大學新媒體研究院主辦《信息科技周刊》總編輯、《新媒體技術動態》發起人。

任建智

　　早在WAP2.0時代便開始做手機網站，多以校園青春主題為主，包括表白交友網、掌上煙大（本地服務應用及O2O平台），目前負責某大專院校的網路訊息系統，包括ACM內容管理系統、比賽報名系統等，技術涉及前端、後台及各種介面和框架，是一線的全方位工程師。

Chapter 1 文字與字型
1.1 在網頁中使用自訂字型
1.2 文字縮排、凸排與首字下沉
1.3 自訂文字內容被選取的樣式
1.4 文字對齊
1.5 調整文字、字元的間距
1.6 文字樣式：畫線、粗體、斜體
1.7 文字陰影
1.8 文字毛玻璃效果
1.9 文字超出顯示範圍的處理
1.10 金屬質感的文字
1.11 隱藏文字內容
1.12 文字旋轉
1.13 現代字體集

Chapter 2 邊框和圖片
2.1 邊框新屬性的基礎與實例
2.2 搜尋欄位
2.3 訊息發布框
2.4 拍立得效果框
2.5 CSS 3動畫邊框
2.6 邊框移動特效
2.7 Banner的圖片標籤
2.8 黑白圖片
2.9 浮水印圖片
2.10 圖片放大鏡效果
2.11 瀑布流圖片
2.12 圖片牆
2.13 圖片輪播圖
2.14 幻燈片
2.15 手風琴效果
2.16 圖片自動調整大小
2.17 使用純CSS繪製圖像
2.18 圖片原地放大
2.19 圖片翻轉
2.20 影像地圖

Chapter 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.11 分享選取的文字
3.12 連結百葉窗效果
3.13 iPhone開關
3.14 按鈕式單選框與複選框
3.15 自訂媒體播放器
3.16 文字變連結
3.17 根據文件格式設定連結圖示
3.18 連結標籤a的順序

Chapter 4 背景和顏色
4.1 顏色和漸層的基礎與實例
4.2 亮部效果
4.3 多背景
4.4 全螢幕背景
4.5 斑馬線背景
4.6 棋盤背景
4.7 易開罐效果

Chapter 5 轉場與動畫
5.1 CSS 3轉場與動畫的基礎和案例
5.2 紙張邊角動畫效果
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 拖曳和拋出

Chapter 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布局風格

Chapter 7 美化與裝飾
7.1 文字裝飾
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.14 設計針線縫合效果

Chapter 8 盒子
8.1 CSS 3盒子模型
8.2 CSS 3盒子內層陰影
8.3 CSS 3盒子外層陰影
8.4 純CSS 3透明水晶盒
8.5 發光陰影效果

Chapter 9 3D相關
9.1 3D文字
9.2 3D立體圖片效果
9.3 3D按鈕
9.4 3D下拉選單
9.5 3D旋轉動畫

Chapter 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）

Chapter 11 其他常用語法
11.1 用CSS 3做出簡單的計算機
11.2 使用CSS 3製作網頁播放器
11.3 不使用table的Form表單
11.4 可以重複使用的規則
11.5 在同一個元素上使用多種class
11.6 CSS區塊引用模組
11.7 花式CSS 3 Pull引文
11.8 一般媒體查詢
11.9 CSS 3背景梯度
11.10 CSS 3日曆顯示效果
11.11 文字編碼
11.12 手機APP簡潔註冊畫面
11.13 手機簡潔價目表
11.14 手機簡潔任務表
11.15 手機商店購物車
11.16 手機APP導航列與提醒
11.17 手機簡潔記事本
11.18 手機文件下載
11.19 手機迷你下拉選單
11.20 Google Fonts API
11.21 動態提示框
11.22 用CSS建立內容幻燈片
11.23 列印自動顯示超連結
11.24 禁用Webkit核心的某些屬性

看更多