響應(yīng)式網(wǎng)頁設(shè)計實戰(zhàn)

序
第1章 自適應(yīng) / 響應(yīng)式網(wǎng)頁設(shè)計概述 1
1.1 彈性的樣式與版面 1
1.2 以移動設(shè)備為優(yōu)先 1
1.3 業(yè)界流行的 RWD Framework 2
1.4 并非一定需要 RWD Framework 2
1.5 RWD實現(xiàn)的機制 5
1.6 瀏覽器的支持度 5
第2章 網(wǎng)頁的新舊切版方式和字體資源 7
2.1 程序代碼的編輯器 7
2.2 CSS搭配HTML4切版方式 7
2.2.1 開始切版前的HTML基本程序代碼結(jié)構(gòu) 7
2.2.2 規(guī)劃要創(chuàng)建的版面 8
2.2.3 建立區(qū)塊的程序代碼 9
2.2.4 標(biāo)示區(qū)塊的范圍 9
2.2.5 設(shè)置區(qū)塊尺寸 10
2.2.6 限定版面總寬度 12
2.2.7 設(shè)置區(qū)塊為浮動排列 12
2.2.8 調(diào)整各區(qū)塊的間距 14
2.2.9 版面的居中對齊 15
2.2.10 改用百分比作為顯示度量單位 16
2.3 CSS 搭配HTML5 切版方式 18
2.3.1 建立區(qū)塊的程序代碼 20
2.3.2 標(biāo)示區(qū)塊范圍 20
2.3.3 設(shè)置區(qū)塊尺寸 21
2.3.4 限定版面的總寬度 23
2.3.5 設(shè)置區(qū)塊為浮動排列 24
2.3.6 調(diào)整各區(qū)塊的間距 25
2.3.7 版面的居中對齊 27
2.3.8 改用以百分比為顯示度量單位 28
2.4 CSS 搭配JavaScript 切版方式 30
2.4.1 精簡原有的程序代碼 30
2.4.2 注釋掉整段 CSS 規(guī)則語句 32
2.4.3 用 JavaScript 程序代碼實現(xiàn)特定版型 32
2.4.4 JavaScript 版型程序代碼的第 1 階段簡化 33
2.4.5 JavaScript 版型程序代碼的第2階段簡化 34
2.5 跨網(wǎng)域運用在線字體 35
2.6 使用本地的字體 38
第3章 版型尺寸的固定與彈性 42
3.1 HTML 傳統(tǒng)方式 42
3.2 CSS應(yīng)用方式 45
3.2.1 @media語句 45
3.2.2 meta viewport語句 51
3.3 JavaScript搭建方式 52
第4章 Bootstrap 的學(xué)習(xí)與使用 56
4.1 Twitter的 Bootstrap 簡易應(yīng)用方式 56
4.2 免費小圖標(biāo) 58
4.3 下拉式或上拉式菜單 59
4.3.1 下拉式菜單 59
4.3.2 上拉式菜單 61
4.3.3 具有選項分隔線的下拉式菜單 61
4.3.4 具有選項分類和選項分隔線的下拉式菜單 62
4.4 一般按鈕和按鈕組 64
4.4.1 按鈕組 64
4.4.2 按鈕組的工具欄 64
4.5 帶有菜單按鈕的按鈕組 65
4.5.1 橫向按鈕組 65
4.5.2 縱向按鈕組 66
4.5.3 窗口寬度型 67
4.5.4 分離型按鈕組 68
4.6 不同尺寸的按鈕 69
4.6.1 大尺寸按鈕 69
4.6.2 標(biāo)準(zhǔn)尺寸的上拉式菜單按鈕 70
4.6.3 小尺寸按鈕 71
4.6.4 特小尺寸按鈕 72
4.7 窗體中的文本欄 73
4.7.1 標(biāo)簽文字組合式 74
4.7.2 單選按鈕和多選按鈕組合式 75
4.7.3 一般按鈕組合式 76
4.7.4 下拉式菜單按鈕組合式 77
4.8 窗體中的導(dǎo)航欄 79
4.8.1 默認的標(biāo)簽型導(dǎo)航欄 79
4.8.2 簡易標(biāo)簽型導(dǎo)航欄 80
4.8.3 具有窗口寬度的堆棧式導(dǎo)航欄 80
4.8.4 均分窗口寬度的標(biāo)簽型導(dǎo)航欄 80
4.8.5 動態(tài)置頂導(dǎo)航欄 82
4.9 瀏覽分層提示和分頁 84
4.9.1 瀏覽分層提示 84
4.9.2 分頁導(dǎo)航欄 85
4.9.3 前一頁和下一頁按鈕 86
4.10 文字標(biāo)簽、文字徽章與文字框 87
4.10.1 文字標(biāo)簽 87
4.10.2 文字徽章 87
4.10.3 文字框 88
4.11 縮略圖與圖解說明 89
4.12 警告文字框 91
4.13 進度條 92
4.14 媒體對象 95
4.14.1 一般圖片列表 95
4.14.2 多層次圖片列表 97
4.15 列表分組 100
4.15.1 默認的列表分組 100
4.15.2 加上數(shù)值徽章的列表分組 101
4.15.3 按鈕型列表分組 102
4.15.4 應(yīng)用顏色樣式的列表分組 103
4.15.5 帶有內(nèi)容的列表分組 104
4.16 面板 105
4.16.1 一般面板 105
4.16.2 帶有表格內(nèi)容的面板 107
4.16.3 帶有列表分組內(nèi)容的面板 109
4.17 自適應(yīng)嵌入 110
第5章 Zurb’s Foundation的學(xué)習(xí)與使用 112
5.1 Zurb’s Foundation 簡易應(yīng)用方式 112
5.2 滑入菜單 113
5.2.1 默認的滑入菜單 113
5.2.2 雙邊滑入菜單 114
5.2.3 雙邊多層次滑入菜單 118
5.3 置頂導(dǎo)航欄 122
5.4 工具欄與內(nèi)置小圖標(biāo) 125
5.4.1 跨窗口寬度的工具欄 125
5.4.2 縱向工具欄 126
5.4.3 內(nèi)置圖標(biāo)工具按鈕所構(gòu)成的工具欄 127
5.5 側(cè)邊導(dǎo)航欄 128
5.6 動態(tài)置頂追蹤型導(dǎo)航欄 129
5.7 子導(dǎo)航欄 131
5.8 瀏覽分層提示 132
5.9 分頁導(dǎo)航欄 133
5.10 縮略圖 134
5.11 縮放式視頻 137
5.12 窗體組件 138
5.13 切換按鈕 148
5.14 滑桿 151
5.15 窗體驗證 156
5.16 按鈕 160
5.17 按鈕組 162
5.18 分割下拉式菜單按鈕組 167
5.19 整體下拉式菜單按鈕 169
5.20 字體樣式 171
5.21 行內(nèi)列表 173
5.22 文字標(biāo)簽 173
5.23 modal 窗格 174
5.24 警告框 180
5.25 面板框 182
5.26 動態(tài)提示框 183
5.27 頁面操作展示 185
5.28 簡易型下拉式菜單與下拉式內(nèi)容框 189
5.29 價目表 192
5.30 進度條 193
5.31 表格 194
5.32 折疊式面板 195
5.33 標(biāo)簽面板 203
5.34 均分版型 206
第6章 Yahoo’s Pure的學(xué)習(xí)與使用 210
6.1 Yahoo’s Pure 簡易應(yīng)用方式 210
6.2 版型網(wǎng)格和最小容器單元 210
6.3 窗體組件 213
6.4 按鈕 222
6.5 表格 224
6.6 菜單 229