CSS高效開發實戰—CSS 3、LESS、SASS、Bootstrap、Foundation ( 簡體 字) |
| 作者：謝郁 | 類別：1. -> 程式設計 -> 網路編程 -> CSS
2. -> 程式設計 -> 網路編程 -> Bootstrap |
| 譯者： |
| 出版社：電子工業出版社 |  3dWoo書號： 39443
詢問書籍請說出此書號！【缺書】
NT售價： 295 元 |
| 出版日：9/1/2014 |
| 頁數：356 |
| 光碟數：0 |
|
站長推薦：   |
| 印刷：黑白印刷 | 語系： ( 簡體 版 ) |
| |
加入購物車  │加到我的最愛
(請先登入會員) |
| ISBN：9787121239656 |
| 作者序 | 譯者序 | 前言 | 內容簡介 | 目錄 | 序 |
| (簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證) |
| 作者序： |
| 譯者序： |
前言：
有些人想學CSS，不知如何下手；有些人已經學會了CSS的各種屬性，卻不知如何運用；有些人會平面設計，但不知道如何與網頁設計結合；有些人會HTML，就是學不會CSS。本書就是為這些人準備的一本指南。正所謂知識來源于實踐，本書嚴格恪守這一原則，對每個CSS特性都進行了示例演示，并在最后提供了4大項目，讓讀者接手實際項目時不再無所適從。
診斷自己的CSS水平
如果你不知道本書是否能夠幫到你，或者說，你不知道是不是要選擇本書，可以先看下面的診斷：
HTML代碼編寫學得不錯，可是CSS網頁布局和定位學不好
有CSS基礎，但沒有系統地學習過CSS 3
不知道如何給網頁布局
不會看CSS代碼的好壞
做好的網頁在不全屏的情況下會變亂
懂一點點的HTML語言，卻不會網站建設
完全不了解如何讓CSS代碼變得高效
網頁在不同的瀏覽器下顯示不同
PC端好好的網頁在手機或平板上就廢了
學過W3CSchool中的CSS課程，但是不知道如何使用框架提高開發效率
想學習國外的一些CSS經驗，了解但不熟悉BootStrap
以上11條的解決方案都在本書中，正所謂會問才會學習，了解自己的不足，發現實際應用中的問題，就是本書真真正正要做的。
如何更好地學習CSS
11個字就能幫助我們更好地學習CSS。
多看、多練：觀摩成功的網頁設計，分析并練習網頁設計常用的代碼。
多想、多問：思考設計實現的原理，提出自己的問題并通過各種渠道來找答案。
多總結：記錄前人已經探索出來的CSS技巧，總結實戰中碰到的問題及解決方案。
只要真正做到勤思考、勤動手、勤總結，CSS學習一定能一馬平川。
本書的編寫特點
1．將最有用的CSS技術匯總在一起
本書只提供最有用的CSS技術實踐，包括CSS基礎中的盒子模型、浮動、定位等難點，包括CSS 3中的圓角、動畫、個性邊框、媒介查詢等特色，包括CSS的固定布局、流式布局和響應式布局等設計模型，包括最流行的CSS框架Bootstrap、Foundation的實戰和DIV+CSS、HTML 5+CSS 3的實戰。本書的寫作宗旨就是好學、好用、高效，提供更好的CSS樣式解決方案。
2．最合理的章節安排
本書首先回顧CSS的基礎難點，然后介紹CSS 3的特色屬性。在掌握這些之后，再介紹LESS、SASS等生產力工具及Bootstrap、Foundation等開發框架。每一部分都輕理論重實踐，是一本最好的、最新的、最全的CSS實戰教材。
3．零難度實踐
市場上很多CSS書，抽象又難以理解，讀者看完后還是難以提高。本書前15章的示例都力求簡單實用，素材簡單、代碼簡單，讀者看完就能實踐。最后4章的項目提供了完整的代碼開發流程和設計思路，如何實現及為什么實現都穿插在講解中，真正讓讀者能看完100頁就吸收100頁。學歷是過去，能力是現在，學習能力才是未來！
4．找準實際問題，一針見血
如何既想獲得豐富復雜的網頁樣式，同時又想節省時間和精力？如何讓網頁一次開發，多種設備通用？如何用更少的代碼來完成同樣的事情？本書就針對這些實際問題，提供現實中的解決方案。
5．中小示例，項目案例，一個都不能少
根據作者多年的項目經驗，本書通過典型的示例與知識點加以整合，讓讀者對每章的知識點都有整體把握。最后4章介紹的項目案例不僅可以讓讀者在實際應用中更加熟練地掌握前面講到的知識點，更能讓讀者了解前端開發中由輪廓到細節的完整實現流程。
本書以CSS實戰為主，所有代碼均通過作者上機調試，力求讀者能學得懂、練得會。
本書的內容安排
本書共3篇19章，內容從CSS基礎到CSS 3特性再到CSS實戰。
第一篇（第1章~第10章）揭開CSS 3的面紗
回顧了HTML和CSS的基礎知識，重點介紹了CSS中盒子模型、屬性前綴、浮動、定位等初學者百思不得其解的難點，然后介紹陰影、圓角、漸變、彈性盒子、變換、動畫、媒介查詢等CSS 3的特性。
第二篇（第11章~第15章）使用CSS 3框架進行高效開發
講述了Bootstrap、Foundation等流行CSS框架，以及LESS和SASS等生產力工具的應用，并介紹了一些流行的國內框架，如渴切、Alice框架等。站在框架這個巨人的肩膀上，我們不僅可以提高開發效率，還能實現多人協同、風格統一。
第三篇（第16章~第19章）CSS實戰項目
首先介紹最傳統的DIV+CSS網頁的實現，要求讀者能編寫大量的CSS代碼，然后介紹了如何用HTML 5結合CSS 3來開發一個網站，最后用兩個實例分別介紹了Bootstrap和Foundation這一最流行CSS框架的實戰應用。本篇使用的技術雖然是由舊到新，但是難度卻是由深入淺。
本書最后的兩個附錄介紹了CSS下的調試和優化技巧。
【建議閱讀順序】
CSS完全小白，建議先練習第1章和第2章的基礎內容，打好基礎再繼續。有HTML和CSS基礎的人，建議讀完第1章再轉到第3章開始學習，對整體知識點有個概覽。如果已經接觸過CSS 3，但困擾于如何提高效率和借鑒他人的經驗，則可以預覽第1章后，從第11章開始學習，學會用框架和CSS預處理等新技術武裝自己。
本書面對的讀者
網頁設計入門者
網頁開發入門者
網頁美工人員
由CSS向CSS 3轉型的開發人員
移動設備網頁開發者
設計師中的CSS開發人員和程序員中的CSS開發人員
大中專院校的學生
各種IT培訓學校的學生
網站后臺開發人員
前端開發入門者
網站建設與網頁設計的相關威客兼職人員
本書的思維導圖
編者推薦
本書寫作的目的是要確保CSS不會成為開發過程或網站性能的瓶頸，確保讀者可以運用一些工具、框架、預處理來提升開發效率和節約人力成本，確保所講解的內容讀者都能活學活用。通過閱讀本書，讀者能知道如何應對和避免跨瀏覽器陷阱，如何創建一個優雅、高效、易于維護的響應式網站、如何面對形形色色的設備和大大小小的分辨率。全書包含大量的實戰案例和開發技巧，總結了CSS開發中的最佳實踐（LESS、SASS、Bootstrap、Foundation、Node.js、jQuery），討論了各種實際問題的解決方案，是一本目前市場上絕無僅有的CSS高效開發實戰書。
本書的服務
作者能力有限，如果書中有什么疏漏，或者對內容有什么疑問，可通過以下方式與我們溝通。
QQ群：296811675，作者在線答疑。
掃描封底的微信二維碼，時刻參與我們的圖書互動。
@博文視點Broadview的微博，了解我們發布的信息和各種前端流行技術。
可到博文視點官方網站http://www.broadview.com.cn/，下載本書所有實例源代碼。
很多讀者在學習過程中苦于無法交流，小故障無法及時解決，加入我們的服務方陣，我們將為您提供終身免費的服務。
本書主要由謝郁編寫，參與編寫的人員還有周敏、席新亮、趙榮嬌、任建智、李勇、王鐵民、 張興瑜、馬新原、薛淑英、殷龍、于健、周洋、董金虎、李蘭英。 |
內容簡介：想象一下，一個網頁只有HTML，沒有CSS，那就是素顏和上妝的區別。而一個網頁只有CSS，沒用CSS 3，那就是馬車和汽車的區別！汽車代表的是高效、美觀，CSS 3的意圖也是如此。移動設備的流行導致了響應式設計的流行，而CSS 3正是實現這種設計的精髓。本書圍繞的就是如何跨瀏覽器、跨設備進行高效率的CSS開發。
本書分為3部分：第1部分是HTML/CSS基礎和CSS 3新特性演示，涵蓋盒子模型、浮動布局、屬性前綴、選擇器、字體、邊框、背景、顏色、變換、動畫、彈性盒子、媒介查詢和響應式設計等多個方面；第2部分介紹Bootstrap、Foundation、Pure等當前流行的CSS框架及LESS、SASS等生產力工具；第3部分是實戰案例，包括DIV+CSS案例、HTML 5+CSS 3案例、Bootstrap案例和Foundation案例。 |
目錄：第一篇 揭開CSS 3的面紗
第1章 CSS 3與現代Web標準 2
1.1 未來Web標準的發展 2
1.1.1 “去Adobe”化 2
1.1.2 基礎功能集成 3
1.1.3 客戶端執行更多的邏輯和
渲染任務 3
1.1.4 適應移動設備的發展 3
1.2 什么是CSS 3 3
1.3 CSS 3的特性 4
1.3.1 圓角 4
1.3.2 陰影 4
1.3.3 漸變 5
1.3.4 變換 5
1.3.5 動畫 6
1.3.6 媒介查詢 6
1.4 檢測瀏覽器是否支持CSS 3 7
1.4.1 使用Modernizr檢測
支持CSS 3 7
1.4.2 支持CSS 3的瀏覽器 8
1.5 用CSS 3實現的優秀網頁 9
1.6 小結 10
第2章 溫故知新——HTML、
CSS基礎 11
2.1 W3C標準、HTML語言和CSS 11
2.1.1 W3C組織與W3C標準 11
2.1.2 什么是HTML 12
2.1.3 什么是CSS 13
2.1.4 HTML+CSS之最佳拍檔 13
2.2 不可不知的CSS盒子模型 14
2.3 跨瀏覽器的CSS 15
2.4 理解瀏覽器的屬性前綴 16
2.4.1 常用的屬性前綴 16
2.4.2 屬性前綴的排序 17
2.5 揭開浮動布局的秘密 17
2.5.1 浮動導致的布局變動 17
2.5.2 清除浮動 20
2.6 看穿CSS的定位技術 21
2.6.1 相對定位技術與實戰 21
2.6.2 絕對定位技術與實戰 22
2.7 小結 24
第3章 使用CSS選擇器讓樣式
表更健壯 25
3.1 基礎選擇器 25
3.1.1 標簽選擇器 25
3.1.2 類選擇器 26
3.1.3 id選擇器 27
3.1.4 通配符選擇器 27
3.1.5 子元素選擇器 28
3.1.6 后代元素選擇器 28
3.1.7 相鄰元素選擇器 29
3.1.8 屬性選擇器 30
3.1.9 組選擇器 30
3.1.10 復合選擇器 31
3.2 偽類選擇器 32
3.2.1 結構化偽類 32
3.2.2 目標偽類:target 39
3.2.3 狀態偽類 39
3.2.4 否定偽類:not(S) 40
3.3 實戰演練——選擇器 41
3.3.1 偽類選擇器的實戰——
新聞聚合類網頁 41
3.3.2 基礎選擇器的組合實
戰——新聞聚合類網頁 43
3.4 小結 44
第4章 設計更炫目的字體 45
4.1 添加和使用自定義字體 45
4.1.1 傳統的字體定義 45
4.1.2 個性化的字體定義 46
4.1.3 個性化的字體圖標 46
4.2 使用反射讓文字倒映 47
4.2.1 反射的基本語法 47
4.2.2 變幻多端的反射效果實例 48
4.3 字體陰影——光暈、浮雕、投影
效果 49
4.4 字體描邊 50
4.5 字體分欄——讓網頁像報紙一樣
分欄排版 51
4.6 實戰演練——處理字體溢出和破字 53
4.7 小結 54
第5章 背景和顏色 55
5.1 設定背景圖的大小 55
5.2 利用圖層疊加實現多背景 57
5.3 使用圖片背景的origin和clip屬性 58
5.3.1 background-origin屬性 58
5.3.2 background-clip屬性 59
5.4 顏色模式 60
5.4.1 RGBA模式 60
5.4.2 HSLA模式 61
5.5 透明顏色 62
5.6 語法糖——currentColor屬性 63
5.7 漸變——放棄圖片的首選良方 63
5.7.1 線性漸變 63
5.7.2 放射漸變 65
5.8 實戰演練——漸變效果 67
5.8.1 帶有立體凸起效果的按鈕 67
5.8.2 構造尺寸更靈活的背景 68
5.8.3 使用放射漸變制作光影
效果 68
5.9 小結 69
第6章 更個性的邊框 71
6.1 圓角邊框 71
6.1.1 圓角邊框的基本用法 71
6.1.2 使用百分比作為單位 72
6.1.3 設置不同弧度的圓角 73
6.2 邊框陰影 73
6.2.1 內外陰影 74
6.2.2 偏移量 75
6.2.3 陰影尺寸 76
6.2.4 模糊距離 76
6.3 圖片邊框——讓圖片環繞在元素
周圍 77
6.4 通過resize屬性來改變輸入框的
大小 79
6.5 實戰演練——CSS 3邊框效果 80
6.5.1 邊框圓角在Bootstrap和
淘寶網中的應用 80
6.5.2 邊框陰影在蘋果官網中
的應用 80
6.6 小結 81
第7章 變換和動畫 83
7.1 CSS 3的變換類型 83
7.1.1 rotate旋轉變換 83
7.1.2 skew扭曲變換 86
7.1.3 scale比例縮放 86
7.1.4 translate位移變換 86
7.1.5 transform小結 87
7.2 使用transition制作交互動畫 87
7.3 使用@keyframes制作動畫 89
7.3.1 @keyframes的基本語法 89
7.3.2 用@keyframes制作循環
動畫 90
7.3.3 @keyframes小結 91
7.4 實戰演練——結合變換制作3D
旋轉卡片 91
7.5 可參考的CSS動畫資源 92
7.5.1 Hover.css——鼠標hover
動畫 92
7.5.2 iHover——hover動畫類庫 93
7.5.3 CSS 3和JavaScript的結合 94
7.6 小結 94
第8章 媒介查詢和響應式設計 95
8.1 媒介類型=各種瀏覽終端 95
8.2 認識響應式網頁設計 96
8.3 媒介查詢的基本語法 98
8.4 設備 99
8.4.1 常見設備的寬度和高度 99
8.4.2 檢測設備翻轉 100
8.5 實戰演練——應用媒介查詢制作
響應式導航欄 101
8.6 小結 103
第9章 更簡便的布局——彈性盒子 104
9.1 認識彈性盒子 104
9.2 彈性盒子的語法 105
9.3 操作元素 106
9.3.1 控制子元素的方向 107
9.3.2 控制元素對齊 108
9.3.3 控制元素顯示順序 109
9.4 實戰演練——用彈性盒子設計
閱讀APP 110
9.5 小結 113
第10章 CSS常用工具 114
10.1 使用Prefix free處理CSS 3
跨瀏覽器兼容 114
10.2 應用Normalize統一不同瀏覽
器下的樣式 115
10.3 應用Grunt進行CSS壓縮 116
10.4 小結 119
第二篇 使用CSS 3框架進行高效開發
第11章 流行的CSS布局設計 122
11.1 固定布局 122
11.1.1 960的秘密 123
11.1.2 定義列寬 123
11.1.3 運用CSS實現固定列寬
的柵格 124
11.1.4 實戰演練——運用960gs實
現固定布局的新聞頁面 127
11.2 流式布局 130
11.2.1 計算列百分比 130
11.2.2 使圖片更加靈活 132
11.2.3 定義最大/最小寬度 133
11.2.4 實戰演練——實現一個
流式布局的新聞頁面 133
11.3 響應式布局 137
11.3.1 使用媒介查詢 137
11.3.2 實戰演練——實現一個
響應式布局的新聞頁面 139
11.4 小結 143
第12章 Bootstrap框架實戰 144
12.1 認識Bootstrap 144
12.1.1 初識Bootstrap 144
12.1.2 Bootstrap為何如此流行 145
12.1.3 Bootstrap的版本發展 146
12.2 Bootstrap入門 146
12.2.1 在自己的項目中引入
Bootstrap 147
12.2.2 添加Bootstrap的class
實現基本樣式 147
12.2.3 調用Bootstrap的通用
組件 148
12.2.4 添加JavaScript動態效果 149
12.3 Bootstrap的柵格系統 150
12.3.1 固定布局的柵格系統 150
12.3.2 流式布局的柵格系統 151
12.3.3 響應式布局的柵格系統 151
12.4 使用Bootstrap的基本樣式 154
12.4.1 字體排版 154
12.4.2 表格 155
12.4.3 表單 158
12.4.4 按鈕 161
12.4.5 圖片 163
12.4.6 響應式工具 164
12.4.7 工具類 165
12.5 使用Bootstrap的組件 166
12.5.1 下拉菜單 166
12.5.2 按鈕組 167
12.5.3 input控件組 168
12.5.4 導航 169
12.5.5 列表組 173
12.5.6 分頁 174
12.5.7 標簽與Badge 175
12.5.8 縮略圖 176
12.5.9 面板 178
12.5.10 進度條 179
12.6 Bootstrap中的JavaScript特效 180
12.6.1 模態對話框 180
12.6.2 標簽頁切換 182
12.6.3 Tooltip 183
12.6.4 彈出框 183
12.6.5 提示信息 184
12.6.6 按鈕 184
12.6.7 折疊 186
12.6.8 幻燈片 187
12.7 定制Bootstrap 188
12.7.1 在官方網站進行Bootstrap
的定制 188
12.7.2 修改源代碼定制
Bootstrap 190
12.8 其他Bootstrap資源 192
12.9 小結 194
第13章 Foundation框架實戰 195
13.1 認識Foundation 195
13.2 Foundation的安裝和使用 196
13.2.1 傳統方式的下載安裝 197
13.2.2 使用Compass進行
Foundation開發 198
13.2.3 在Rails應用中引入
Foundation 199
13.3 使用Foundation柵格系統 199
13.3.1 基本柵格系統 199
13.3.2 塊網格（Block Grid） 200
13.4 Foundation基本樣式 201
13.4.1 標題和段落 201
13.4.2 列表 202
13.4.3 按鈕 204
13.4.4 面板 206
13.4.5 縮略圖 207
13.4.6 視頻 207
13.4.7 可見性 208
13.5 導航系統 208
13.5.1 面包屑導航 209
13.5.2 側邊欄導航 209
13.5.3 頭部導航 210
13.5.4 子導航 212
13.6 Foundation中的JavaScript特效 212
13.6.1 幻燈片 212
13.6.2 Clearing lightboxes 214
13.6.3 彈出層顯示 215
13.6.4 長頁面滾動效果 216
13.6.5 其他特效 216
13.7 定制Foundation 218
13.7.1 在官方網站進行定制 219
13.7.2 通過配置文件進行定制 219
13.8 小結 220
第14章 LESS和SASS 222
14.1 CSS的缺陷 222
14.1.1 無法定義變量 222
14.1.2 重復代碼 223
14.1.3 計算問題 223
14.1.4 作用域和命名空間 223
14.1.5 CSS缺陷總結 224
14.2 LESS 其實更多 224
14.2.1 LESS介紹 224
14.2.2 LESS使用基礎 225
14.2.3 使用變量和操作符 225
14.2.4 使用Mixin混入 226
14.2.5 內嵌規則 227
14.2.6 運算 228
14.2.7 LESS總結 228
14.3 使用SASS 228
14.3.1 SASS介紹 228
14.3.2 SASS安裝和使用 229
14.3.3 使用變量 229
14.3.4 計算 230
14.3.5 使用@import導入 230
14.3.6 使用@extend繼承 230
14.3.7 使用@mixin混入 231
14.3.8 使用@function定義函數 231
14.3.9 控制語句 231
14.3.10 SASS總結 232
14.4 使用SASS的擴展庫Compass 232
14.4.1 CSS 3模塊 233
14.4.2 Reset模塊 235
14.4.3 Utilities模塊 235
14.4.4 Helpers模塊 236
14.4.5 Compass總結 237
14.5 小結 237
第15章 其他CSS框架簡介 238
15.1 輕量級框架代表——Pure CSS 238
15.2 手機頁面UI框架——Ratchet
框架 239
15.3 優秀的國產CSS框架 240
15.3.1 阿里巴巴的Alice框架 240
15.3.2 網易的NEC 241
15.3.3 百度的GMU框架 242
15.3.4 渴切 243
15.3.5 用于中文排版的Typo.css
243
15.4 小結 245
第三篇 CSS實戰項目
第16章 傳統DIV+CSS設計的
視頻網站 248
16.1 網站的頁面效果圖分析 248
16.1.1 頁面頭部和頁腳分析 250
16.1.2 首頁主體內容分析 250
16.1.3 內頁主體內容分析 252
16.2 網站的布局規劃 253
16.2.1 頁面布局規劃 253
16.2.2 切割首頁及導出圖片 253
16.2.3 切割內頁及導出圖片 254
16.3 網站HTML框架的編寫 255
16.3.1 頁面HTML框架搭建 255
16.3.2 頁面頭部和頁腳的HTML
255
16.3.3 頁面公共部分的HTML 256
16.3.4 首頁主體內容的HTML 258
16.3.5 內頁主體內容的HTML 261
16.3.6 首頁HTML代碼總覽 263
16.3.7 內頁HTML代碼總覽 264
16.4 網站CSS樣式的編寫 265
16.4.1 頁面公共部分的CSS 265
16.4.2 頁面框架的CSS 267
16.4.3 頁面頭部和頁腳的CSS 268
16.4.4 首頁主體內容的CSS 268
16.4.5 內頁主體內容的CSS 270
16.4.6 網站CSS代碼總覽 271
16.5 小結 272
第17章 使用HTML 5+CSS 3開發
搜房網 273
17.1 網站前期策劃 273
17.1.1 理解HTML 5的語義性
元素 273
17.1.2 搜房網網站結構 275
17.1.3 搜房網整站預覽 275
17.2 搜房網的首頁設計 278
17.2.1 首頁的布局 278
17.2.2 設計導航欄 282
17.2.3 設計宣傳廣告欄 284
17.2.4 CSS布局 287
17.3 搜房網的內容頁設計 291
17.3.1 出售房源頁面 291
17.3.2 購買房源頁面 293
17.3.3 出租房源頁面 295
17.3.4 房產過戶頁面 297
17.3.5 聯系我們頁面 299
17.4 小結 301
第18章 使用Bootstrap實現論壇后臺
管理系統 302
18.1 項目開始 302
18.2 頁面布局 303
18.2.1 引入Bootstrap 3框架 303
18.2.2 編寫布局代碼 304
18.3 實現導航欄 305
18.3.1 構建導航的框架代碼 305
18.3.2 填寫標題和導航鏈接 305
18.3.3 添加搜索框和通知系統 306
18.3.4 添加管理員的登錄信息 307
18.3.5 構建響應式導航 308
18.4 實現左側邊欄 310
18.5 實現主功能部分 310
18.5.1 主功能的頭部 311
18.5.2 主功能的帖子列表 312
18.6 小結 315
第19章 使用Foundation實現論壇
首頁 316
19.1 項目開始 316
19.2 頁面布局 317
19.2.1 引入Foundation需要
的包 317
19.2.2 移動優先的布局 318
19.3 實現頭部導航欄 319
19.4 實現響應式版塊列表 321
19.5 實現熱門帖子推薦 323
19.6 小結 325
附錄A 網頁制作的調試工具及使用 326
附錄B 提升CSS的性能和效率 332 |
| 序： |
