你不能錯過的CSS指南: 實用x必用x拿來即用的400段程式碼+151個範例 | 誠品線上

你不能錯過的CSS指南: 實用x必用x拿來即用的400段程式碼+151個範例

內容簡介

內容簡介 利用CSS，為你的網站穿上美麗的外衣！● 範例實用，從最常見的網頁效果出發，提供最有用的範例。● 功能導向，每則範例都是單獨的功能型頁面，讓你能從任何一個感興趣的網頁效果開始閱讀。● 結合多種程式碼，讓你在純CSS語法之外，同時認識簡單的JavaScript、jQuery框架，實作多種不同的效果。● 附贈CSS能力檢測題，讓你測試自己的CSS網頁設計能力。從頁面布局X細節設計X網頁美化X CSS Hack等層面，帶你認識各種炫目、實用、錯過可惜的網頁效果！本書精選400多段的CSS程式碼，從基礎的文字、圖片、邊框、按鈕、連結等網頁元素設計，到轉場動畫、頁面布局、響應式設計等各種進階功能，應有盡有，讓你能夠輕鬆做出媲美知名網站的網頁效果，如：圖片牆、幻燈片、影像地圖、對聯廣告、紙張邊角效果等。此外，更提出多種CSS Hack方案，解決因瀏覽器不同所帶來的效果不一致、效果出錯等相容性問題，讓你的網頁不論在哪種瀏覽器上，都能完美呈現！● 功能導向的CSS實例以網頁設計的各種分類、使用場景為基礎，從最常見、最實用的網頁效果出發，並直接以CSS完成設計，做出令人目不轉睛的網頁布局與效果。● 隨查隨用的內容架構本書實例皆各自獨立，你可以視需求挑選章節來做練習；而且書中語法皆具備跨瀏覽器、跨平台、跨裝置的特性，讓你能夠隨查隨用，走到哪學到哪！● 多種網頁編碼的實作以純CSS語法為主軸，結合簡單的HTML、JavaScript、jQuery框架和自己建構框架等方式，實作各種不同效果；並且搭配原理說明，讓你能夠在不同的方式間自由切換。無論你是網頁設計的入門者，抑或是想從CSS 2轉型到CSS 3的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 Clearfix6.12 升級版的Clearfix6.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 Hack10.1 讓網站在所有瀏覽器下的顯示相同（CSS Reset）10.2 解決IE 6 中浮動元素的雙倍邊距問題10.3 識別不同的瀏覽器10.4 背景與圖片透明10.5 IE 10 CSS Hack10.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 在同一個元素上使用多種class11.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 API11.21 動態提示框11.22 用CSS建立內容幻燈片11.23 列印自動顯示超連結11.24 禁用Webkit核心的某些屬性

商品規格