CSS高效開(kāi)發(fā)實(shí)戰(zhàn) 謝郁pdf掃描版

CSS高效開(kāi)發(fā)實(shí)戰(zhàn)是一本絕無(wú)僅有的css高效開(kāi)發(fā)實(shí)戰(zhàn)書(shū)，由web工程師謝郁編著。全書(shū)寫(xiě)作的目的是要確保CSS不會(huì)成為開(kāi)發(fā)過(guò)程或網(wǎng)站性能的瓶頸，確保讀者可以運(yùn)用一些工具、框架、預(yù)處理來(lái)提升開(kāi)發(fā)效率和節(jié)約人力成本，確保所講解的內(nèi)容讀者都能活學(xué)活用。通過(guò)閱讀本書(shū)，讀者能知道如何應(yīng)對(duì)和避免跨瀏覽器陷阱，如何創(chuàng)建一個(gè)優(yōu)雅、高效、易于維護(hù)的響應(yīng)式網(wǎng)站、如何面對(duì)形形色色的設(shè)備和大大小小的分辨率。CSS高效開(kāi)發(fā)實(shí)戰(zhàn)包含大量的實(shí)戰(zhàn)案例和開(kāi)發(fā)技巧，總結(jié)了CSS開(kāi)發(fā)中實(shí)踐會(huì)遇到的問(wèn)題并給出了解決方案，是學(xué)習(xí)css3最好的實(shí)用教材。

內(nèi)容介紹

想象一下，一個(gè)網(wǎng)頁(yè)只有HTML，沒(méi)有CSS，那就是素顏和上妝的區(qū)別。而一個(gè)網(wǎng)頁(yè)只有CSS，沒(méi)用CSS 3，那就是馬車(chē)和汽車(chē)的區(qū)別！汽車(chē)代表的是高效、美觀，CSS 3的意圖也是如此。移動(dòng)設(shè)備的流行導(dǎo)致了響應(yīng)式設(shè)計(jì)的流行，而CSS 3正是實(shí)現(xiàn)這種設(shè)計(jì)的精髓。本書(shū)圍繞的就是如何跨瀏覽器、跨設(shè)備進(jìn)行高效率的CSS開(kāi)發(fā)。

《CSS高效開(kāi)發(fā)實(shí)戰(zhàn) CSS 3、LESS、SASS、Bootstrap、Foundation》分為3部分：第1部分是HTML/CSS基礎(chǔ)和CSS 3新特性演示，涵蓋盒子模型、浮動(dòng)布局、屬性前綴、選擇器、字體、邊框、背景、顏色、變換、動(dòng)畫(huà)、彈性盒子、媒介查詢(xún)和響應(yīng)式設(shè)計(jì)等多個(gè)方面；第2部分介紹Bootstrap、Foundation、Pure等當(dāng)前流行的CSS框架及LESS、SASS等生產(chǎn)力工具；第3部分是實(shí)戰(zhàn)案例，包括DIV+CSS案例、HTML 5+CSS 3案例、Bootstrap案例和Foundation案例。

CSS高效開(kāi)發(fā)實(shí)戰(zhàn)章節(jié)目錄

第一篇　揭開(kāi)CSS 3的面紗
第1章 CSS 3與現(xiàn)代Web標(biāo)準(zhǔn)
1．1 未來(lái)Web標(biāo)準(zhǔn)的發(fā)展
1．1．1 "去Adobe"化
1．1．2 基礎(chǔ)功能集成
1．1．3 客戶(hù)端執(zhí)行更多的邏輯和
渲染任務(wù)
1．1．4 適應(yīng)移動(dòng)設(shè)備的發(fā)展
1．2 什么是CSS 3
1．3 CSS 3的特性
1．3．1 圓角
1．3．2 陰影
1．3．3 漸變
1．3．4 變換
1．3．5 動(dòng)畫(huà)
1．3．6 媒介查詢(xún)
1．4 檢測(cè)瀏覽器是否支持CSS 3
1．4．1 使用Modernizr檢測(cè)
支持CSS 3
1．4．2 支持CSS 3的瀏覽器
1．5 用CSS 3實(shí)現(xiàn)的優(yōu)秀網(wǎng)頁(yè)
1．6 小結(jié)
第2章　溫故知新――HTML、
CSS基礎(chǔ)
2．1 W3C標(biāo)準(zhǔn)、HTML語(yǔ)言和CSS
2．1．1 W3C組織與W3C標(biāo)準(zhǔn)
2．1．2 什么是HTML
2．1．3 什么是CSS
2．1．4 HTML+CSS之最佳拍檔
2．2 不可不知的CSS盒子模型
2．3 跨瀏覽器的CSS
2．4 理解瀏覽器的屬性前綴
2．4．1 常用的屬性前綴
2．4．2 屬性前綴的排序
2．5 揭開(kāi)浮動(dòng)布局的秘密
2．5．1 浮動(dòng)導(dǎo)致的布局變動(dòng)
2．5．2 清除浮動(dòng)
2．6 看穿CSS的定位技術(shù)
2．6．1 相對(duì)定位技術(shù)與實(shí)戰(zhàn)
2．6．2 絕對(duì)定位技術(shù)與實(shí)戰(zhàn)
2．7 小結(jié)
第3章　使用CSS選擇器讓樣式
表更健壯
3．1 基礎(chǔ)選擇器
3．1．1 標(biāo)簽選擇器
3．1．2 類(lèi)選擇器
3．1．3 id選擇器
3．1．4 通配符選擇器
3．1．5 子元素選擇器
3．1．6 后代元素選擇器
3．1．7 相鄰元素選擇器
3．1．8 屬性選擇器
3．1．9 組選擇器
3．1．10 復(fù)合選擇器
3．2 偽類(lèi)選擇器
3．2．1 結(jié)構(gòu)化偽類(lèi)
3．2．2 目標(biāo)偽類(lèi)：target
3．2．3 狀態(tài)偽類(lèi)
3．2．4 否定偽類(lèi)：not(S)
3．3 實(shí)戰(zhàn)演練――選擇器
3．3．1 偽類(lèi)選擇器的實(shí)戰(zhàn)――
新聞聚合類(lèi)網(wǎng)頁(yè)
3．3．2 基礎(chǔ)選擇器的組合實(shí)
戰(zhàn)――新聞聚合類(lèi)網(wǎng)頁(yè)
3．4 小結(jié)
第4章 設(shè)計(jì)更炫目的字體
4．1 添加和使用自定義字體
4．1．1 傳統(tǒng)的字體定義
4．1．2 個(gè)性化的字體定義
4．1．3 個(gè)性化的字體圖標(biāo)
4．2 使用反射讓文字倒映
4．2．1 反射的基本語(yǔ)法
4．2．2 變幻多端的反射效果實(shí)例
4．3 字體陰影――光暈、浮雕、投影
效果
4．4 字體描邊
4．5 字體分欄――讓網(wǎng)頁(yè)像報(bào)紙一樣
分欄排版
4．6 實(shí)戰(zhàn)演練――處理字體溢出和破字
4．7 小結(jié)
第5章 背景和顏色
5．1 設(shè)定背景圖的大小
5．2 利用圖層疊加實(shí)現(xiàn)多背景
5．3 使用圖片背景的origin和clip屬性
5．3．1 background-origin屬性
5．3．2 background-clip屬性
5．4 顏色模式
5．4．1 RGBA模式
5．4．2 HSLA模式
5．5 透明顏色
5．6 語(yǔ)法糖――currentColor屬性
5．7 漸變――放棄圖片的首選良方
5．7．1 線(xiàn)性漸變
5．7．2 放射漸變
5．8 實(shí)戰(zhàn)演練――漸變效果
5．8．1 帶有立體凸起效果的按鈕
5．8．2 構(gòu)造尺寸更靈活的背景
5．8．3 使用放射漸變制作光影
效果
5．9 小結(jié)
第6章 更個(gè)性的邊框
6．1 圓角邊框
6．1．1 圓角邊框的基本用法
6．1．2 使用百分比作為單位
6．1．3 設(shè)置不同弧度的圓角
6．2 邊框陰影
6．2．1 內(nèi)外陰影
6．2．2 偏移量
6．2．3 陰影尺寸
6．2．4 模糊距離
6．3 圖片邊框――讓圖片環(huán)繞在元素
周?chē)?
6．4 通過(guò)resize屬性來(lái)改變輸入框的
大小
6．5 實(shí)戰(zhàn)演練――CSS 3邊框效果
6．5．1 邊框圓角在Bootstrap和
淘寶網(wǎng)中的應(yīng)用
6．5．2 邊框陰影在蘋(píng)果官網(wǎng)中
的應(yīng)用
6．6 小結(jié)
第7章 變換和動(dòng)畫(huà)
7．1 CSS 3的變換類(lèi)型
7．1．1 rotate旋轉(zhuǎn)變換
7．1．2 skew扭曲變換
7．1．3 scale比例縮放
7．1．4 translate位移變換
7．1．5 transform小結(jié)
7．2 使用transition制作交互動(dòng)畫(huà)
7．3 使用@keyframes制作動(dòng)畫(huà)
7．3．1 @keyframes的基本語(yǔ)法
7．3．2 用@keyframes制作循環(huán)
動(dòng)畫(huà)
7．3．3 @keyframes小結(jié)
7．4 實(shí)戰(zhàn)演練――結(jié)合變換制作3D
旋轉(zhuǎn)卡片
7．5 可參考的CSS動(dòng)畫(huà)資源
7．5．1 Hover．css――鼠標(biāo)hover
動(dòng)畫(huà)
7．5．2 iHover――hover動(dòng)畫(huà)類(lèi)庫(kù)
7．5．3 CSS 3和JavaScript的結(jié)合
7．6 小結(jié)
第8章 媒介查詢(xún)和響應(yīng)式設(shè)計(jì)
8．1 媒介類(lèi)型=各種瀏覽終端
8．2 認(rèn)識(shí)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
8．3 媒介查詢(xún)的基本語(yǔ)法
8．4 設(shè)備
8．4．1 常見(jiàn)設(shè)備的寬度和高度
8．4．2 檢測(cè)設(shè)備翻轉(zhuǎn)
8．5 實(shí)戰(zhàn)演練――應(yīng)用媒介查詢(xún)制作
響應(yīng)式導(dǎo)航欄
8．6 小結(jié)
第9章　更簡(jiǎn)便的布局――彈性盒子
9．1 認(rèn)識(shí)彈性盒子
9．2 彈性盒子的語(yǔ)法
9．3 操作元素
9．3．1 控制子元素的方向
9．3．2 控制元素對(duì)齊
9．3．3 控制元素顯示順序
9．4 實(shí)戰(zhàn)演練――用彈性盒子設(shè)計(jì)
閱讀APP
9．5 小結(jié)
第10章 CSS常用工具
10．1 使用Prefix free處理CSS
跨瀏覽器兼容
10．2 應(yīng)用Normalize統(tǒng)一不同瀏覽
器下的樣式
10．3 應(yīng)用Grunt進(jìn)行CSS壓縮
10．4 小結(jié)
第二篇　使用CSS 3框架進(jìn)行高效開(kāi)發(fā)
第11章 流行的CSS布局設(shè)計(jì)
11．1 固定布局
11．1．1 960的秘密
11．1．2 定義列寬
11．1．3 運(yùn)用CSS實(shí)現(xiàn)固定列寬
的柵格
11．1．4 實(shí)戰(zhàn)演練――運(yùn)用960gs實(shí)
現(xiàn)固定布局的新聞頁(yè)面
11．2 流式布局
11．2．1 計(jì)算列百分比
11．2．2 使圖片更加靈活
11．2．3 定義最大/最小寬度
11．2．4 實(shí)戰(zhàn)演練――實(shí)現(xiàn)一個(gè)
流式布局的新聞頁(yè)面
11．3 響應(yīng)式布局
11．3．1 使用媒介查詢(xún)
11．3．2 實(shí)戰(zhàn)演練――實(shí)現(xiàn)一個(gè)
響應(yīng)式布局的新聞頁(yè)面
11．4 小結(jié)
第12章 Bootstrap框架實(shí)戰(zhàn)
12．1 認(rèn)識(shí)Bootstrap
12．1．1 初識(shí)Bootstrap
12．1．2 Bootstrap為何如此流行
12．1．3 Bootstrap的版本發(fā)展
12．2 Bootstrap入門(mén)
12．2．1 在自己的項(xiàng)目中引入
Bootstrap
12．2．2 添加Bootstrap的class
實(shí)現(xiàn)基本樣式
12．2．3 調(diào)用Bootstrap的通用
組件
12．2．4 添加JavaScript動(dòng)態(tài)效果
12．3 Bootstrap的柵格系統(tǒng)
12．3．1 固定布局的柵格系統(tǒng)
12．3．2 流式布局的柵格系統(tǒng)
12．3．3 響應(yīng)式布局的柵格系統(tǒng)
12．4 使用Bootstrap的基本樣式
12．4．1 字體排版
12．4．2 表格
12．4．3 表單
12．4．4 按鈕
12．4．5 圖片
12．4．6 響應(yīng)式工具
12．4．7 工具類(lèi)
12．5 使用Bootstrap的組件
12．5．1 下拉菜單
12．5．2 按鈕組
12．5．3 input控件組
12．5．4 導(dǎo)航
12．5．5 列表組
12．5．6 分頁(yè)
12．5．7 標(biāo)簽與Badge
12．5．8 縮略圖
12．5．9 面板
12．5．10 進(jìn)度條
12．6 Bootstrap中的JavaScript特效
12．6．1 模態(tài)對(duì)話(huà)框
12．6．2 標(biāo)簽頁(yè)切換
12．6．3 Tooltip
12．6．4 彈出框
12．6．5 提示信息
12．6．6 按鈕
12．6．7 折疊
12．6．8 幻燈片
12．7 定制Bootstrap
12．7．1 在官方網(wǎng)站進(jìn)行Bootstrap
的定制
12．7．2 修改源代碼定制
Bootstrap
12．8 其他Bootstrap資源
12．9 小結(jié)
第13章 Foundation框架實(shí)戰(zhàn)
13．1 認(rèn)識(shí)Foundation
13．2 Foundation的安裝和使用
13．2．1 傳統(tǒng)方式的下載安裝
13．2．2 使用Compass進(jìn)行
Foundation開(kāi)發(fā)
13．2．3 在Rails應(yīng)用中引入
Foundation
13．3 使用Foundation柵格系統(tǒng)
13．3．1 基本柵格系統(tǒng)
13．3．2 塊網(wǎng)格（Block Grid）
13．4 Foundation基本樣式
13．4．1 標(biāo)題和段落
13．4．2 列表
13．4．3 按鈕
13．4．4 面板
13．4．5 縮略圖
13．4．6 視頻
13．4．7 可見(jiàn)性
13．5 導(dǎo)航系統(tǒng)
13．5．1 面包屑導(dǎo)航
13．5．2 側(cè)邊欄導(dǎo)航
13．5．3 頭部導(dǎo)航
13．5．4 子導(dǎo)航
13．6 Foundation中的JavaScript特效
13．6．1 幻燈片
13．6．2 Clearing lightboxes
13．6．3 彈出層顯示
13．6．4 長(zhǎng)頁(yè)面滾動(dòng)效果
13．6．5 其他特效
13．7 定制Foundation
13．7．1 在官方網(wǎng)站進(jìn)行定制
13．7．2 通過(guò)配置文件進(jìn)行定制
13．8 小結(jié)
第14章 LESS和SASS
14．1 CSS的缺陷
14．1．1 法定義變量
14．1．2 重復(fù)代碼
14．1．3 計(jì)算問(wèn)題
14．1．4 作用域和命名空間
14．1．5 CSS缺陷總結(jié)
14．2 LESS 其實(shí)更多
14．2．1 LESS介紹
14．2．2 LESS使用基礎(chǔ)
14．2．3 使用變量和操作符
14．2．4 使用Mixin混入
14．2．5 內(nèi)嵌規(guī)則
14．2．6 運(yùn)算
14．2．7 LESS總結(jié)
14．3 使用SASS
14．3．1 SASS介紹
14．3．2 SASS安裝和使用
14．3．3 使用變量
14．3．4 計(jì)算
14．3．5 使用@import導(dǎo)入
14．3．6 使用@extend繼承
14．3．7 使用@mixin混入
14．3．8 使用@function定義函數(shù)
14．3．9 控制語(yǔ)句
14．3．10 SASS總結(jié)
14．4 使用SASS的擴(kuò)展庫(kù)Compass
14．4．1 CSS 3模塊
14．4．2 Reset模塊
14．4．3 Utilities模塊
14．4．4 Helpers模塊
14．4．5 Compass總結(jié)
14．5 小結(jié)
第15章 其他CSS框架簡(jiǎn)介
15．1 輕量級(jí)框架代表――Pure CSS
15．2 手機(jī)頁(yè)面UI框架――Ratchet框架
15．3 優(yōu)秀的國(guó)產(chǎn)CSS框架
15．3．1 阿里巴巴的Alice框架
15．3．2 網(wǎng)易的NEC
15．3．3 百度的GMU框架
15．3．4 渴切
15．3．5 用于中文排版的Typo．css
15．4 小結(jié)
第三篇　CSS實(shí)戰(zhàn)項(xiàng)目
第16章　傳統(tǒng)DIV+CSS設(shè)計(jì)的視頻網(wǎng)站
16．1 網(wǎng)站的頁(yè)面效果圖分析
16．1．1 頁(yè)面頭部和頁(yè)腳分析
16．1．2 首頁(yè)主體內(nèi)容分析
16．1．3 內(nèi)頁(yè)主體內(nèi)容分析
16．2 網(wǎng)站的布局規(guī)劃
16．2．1 頁(yè)面布局規(guī)劃
16．2．2 切割首頁(yè)及導(dǎo)出圖片
16．2．3 切割內(nèi)頁(yè)及導(dǎo)出圖片
16．3 網(wǎng)站HTML框架的編寫(xiě)
16．3．1 頁(yè)面HTML框架搭建
16．3．2 頁(yè)面頭部和頁(yè)腳的HTML
16．3．3 頁(yè)面公共部分的HTML
16．3．4 首頁(yè)主體內(nèi)容的HTML
16．3．5 內(nèi)頁(yè)主體內(nèi)容的HTML
16．3．6 首頁(yè)HTML代碼總覽
16．3．7 內(nèi)頁(yè)HTML代碼總覽
16．4 網(wǎng)站CSS樣式的編寫(xiě)
16．4．1 頁(yè)面公共部分的CSS
16．4．2 頁(yè)面框架的CSS
16．4．3 頁(yè)面頭部和頁(yè)腳的CSS
16．4．4 首頁(yè)主體內(nèi)容的CSS
16．4．5 內(nèi)頁(yè)主體內(nèi)容的CSS
16．4．6 網(wǎng)站CSS代碼總覽
16．5 小結(jié)
第17章　使用HTML 5+CSS 3開(kāi)發(fā)搜房網(wǎng)
17．1 網(wǎng)站前期策劃
17．1．1 理解HTML 5的語(yǔ)義性元素
17．1．2 搜房網(wǎng)網(wǎng)站結(jié)構(gòu)
17．1．3 搜房網(wǎng)整站預(yù)覽
17．2 搜房網(wǎng)的首頁(yè)設(shè)計(jì)
17．2．1 首頁(yè)的布局
17．2．2 設(shè)計(jì)導(dǎo)航欄
17．2．3 設(shè)計(jì)宣傳廣告欄
17．2．4 CSS布局
17．3 搜房網(wǎng)的內(nèi)容頁(yè)設(shè)計(jì)
17．3．1 出售房源頁(yè)面
17．3．2 購(gòu)買(mǎi)房源頁(yè)面
17．3．3 出租房源頁(yè)面
17．3．4 房產(chǎn)過(guò)戶(hù)頁(yè)面
17．3．5 聯(lián)系我們頁(yè)面
17．4 小結(jié)
第18章　使用Bootstrap實(shí)現(xiàn)論壇后臺(tái)管理系統(tǒng)
18．1 項(xiàng)目開(kāi)始
18．2 頁(yè)面布局
18．2．1 引入Bootstrap 3框架
18．2．2 編寫(xiě)布局代碼
18．3 實(shí)現(xiàn)導(dǎo)航欄
18．3．1 構(gòu)建導(dǎo)航的框架代碼
18．3．2 填寫(xiě)標(biāo)題和導(dǎo)航鏈接
18．3．3 添加搜索框和通知系統(tǒng)
18．3．4 添加管理員的登錄信息
18．3．5 構(gòu)建響應(yīng)式導(dǎo)航
18．4 實(shí)現(xiàn)左側(cè)邊欄
18．5 實(shí)現(xiàn)主功能部分
18．5．1 主功能的頭部
18．5．2 主功能的帖子列表
18．6 小結(jié)
第19章　使用Foundation實(shí)現(xiàn)論壇
首頁(yè)
19．1 項(xiàng)目開(kāi)始
19．2 頁(yè)面布局
19．2．1 引入Foundation需要
的包
19．2．2 移動(dòng)優(yōu)先的布局
19．3 實(shí)現(xiàn)頭部導(dǎo)航欄
19．4 實(shí)現(xiàn)響應(yīng)式版塊列表
19．5 實(shí)現(xiàn)熱門(mén)帖子推薦
19．6 小結(jié)
附錄A 網(wǎng)頁(yè)制作的調(diào)試工具及使用
附錄B 提升CSS的性能和效率

使用說(shuō)明

1、下載并解壓，得出pdf文件

2、如果打不開(kāi)本文件，請(qǐng)務(wù)必下載pdf閱讀器

3、安裝后，在打開(kāi)解壓得出的pdf文件

4、雙擊進(jìn)行閱讀