圖靈程序設(shè)計(jì)叢書(shū):CSS設(shè)計(jì)指南

時(shí)間：2023-02-15 03:15:01 | 來(lái)源：營(yíng)銷(xiāo)百科

時(shí)間：2023-02-15 03:15:01 來(lái)源：營(yíng)銷(xiāo)百科

圖靈程序設(shè)計(jì)叢書(shū):CSS設(shè)計(jì)指南：第1章 HTML標(biāo)記與文檔結(jié)構(gòu) 1
1.1 HTML標(biāo)記基礎(chǔ) 2
1.1.1 文本用閉合標(biāo)簽 2
1.1.2 引用內(nèi)容用自閉合標(biāo)簽 3
1.1.3 屬性 4
1.1.4 標(biāo)題與段落 5
1.1.5 復(fù)合元素 5
1.1.6 嵌套標(biāo)簽 6
1.2 HTML文檔剖析 7
1.2.1 HTML模板 7
1.2.2 塊級(jí)元素和行內(nèi)元素 10
1.2.3 嵌套的元素 15
1.3 文檔對(duì)象模型 19
1.4 小結(jié) 21
第2章 CSS工作原理 23
2.1 剖析CSS規(guī)則 24
CSS規(guī)則命名慣例 27
2.2 上下文選擇符 28
2.3 特殊的上下文選擇符 33
2.3.1 子選擇符 33
2.3.2 緊鄰?fù)x擇符 34
2.3.3 一般同胞選擇符～～ 34
2.3.4 通用選擇符* 35
2.4 ID和類(lèi)選擇符 36
2.4.1 類(lèi)屬性 36
2.4.2 ID屬性 39
2.4.3 什么時(shí)候用ID，什么時(shí)候用類(lèi) 40
2.4.4 ID和類(lèi)的小結(jié) 42
2.5 屬性選擇符 42
2.5.1 屬性名選擇符 43
2.5.2 屬性值選擇符 43
2.5.3 屬性選擇符的小結(jié) 44
2.6 偽類(lèi) 44
2.6.1 UI偽類(lèi) 44
2.6.2 結(jié)構(gòu)化偽類(lèi) 47
2.7 偽元素 48
2.8 繼承 50
2.9 層疊 51
2.9.1 樣式來(lái)源 51
2.9.2 層疊規(guī)則 52
2.9.3 計(jì)算特指度 54
2.10 規(guī)則聲明 56
2.10.1 文本值 56
2.10.2 數(shù)字值 57
2.10.3 顏色值 58
2.11 小結(jié) 62
第3章 定位元素 63
3.1 理解盒模型 63
3.1.1 盒子邊框 66
3.1.2 盒子內(nèi)邊距 68
3.1.3 盒子外邊距 69
3.1.4 疊加外邊距 70
3.1.5 外邊距的單位 71
3.2 盒子有多大 71
3.3 浮動(dòng)與清除 77
3.3.1 浮動(dòng) 78
3.3.2 圍住浮動(dòng)元素的三種方法 80
3.4 定位 87
3.4.1 靜態(tài)定位 88
3.4.2 相對(duì)定位 88
3.4.3 絕對(duì)定位 89
3.4.4 固定定位 90
3.4.5 定位上下文 91
3.5 顯示屬性 94
3.6 背景 95
3.6.1 CSS背景屬性 96
3.6.2 背景顏色 96
3.6.3 背景圖片 97
3.6.4 背景重復(fù) 98
3.6.5 背景位置 99
3.6.6 背景尺寸 101
3.6.7 背景粘附 102
3.6.8 簡(jiǎn)寫(xiě)背景屬性 103
3.6.9 其他CSS3背景屬性 103
3.6.10 多背景圖片 104
3.6.11 背景漸變 106
3.7 小結(jié) 110
第4章 字體和文本 111
4.1 字體 111
4.1.1 字體族 112
4.1.2 字體大小 115
4.1.3 字體樣式 118
4.1.4 字體粗細(xì) 119
4.1.5 字體變化 120
4.1.6 簡(jiǎn)寫(xiě)字體屬性 120
4.2 文本屬性 121
4.2.1 文本縮進(jìn) 121
4.2.2 字符間距 124
4.2.3 單詞間距 125
4.2.4 文本裝飾 125
4.2.5 文本對(duì)齊 126
4.2.6 行高 127
4.2.7 文本轉(zhuǎn)換 128
4.2.8 垂直對(duì)齊 129
4.3 Web字體大揭秘 130
4.3.1 公共字體庫(kù) 131
4.3.2 打包的@font—face包 132
4.3.3 生成@font—face包 133
4.4 文字版式 134
4.4.1 簡(jiǎn)單的文本布局 134
4.4.2 基于網(wǎng)格排版 138
4.4.3 經(jīng)典的排版練習(xí) 145
4.5 小結(jié) 154
第5章 頁(yè)面布局 155
5.1 布局的基本概念 156
5.2 三欄—固定寬度布局 157
5.3 三欄—中欄流動(dòng)布局 172
5.3.1 用負(fù)外邊距實(shí)現(xiàn) 172
5.3.2 用CSS3單元格實(shí)現(xiàn) 176
5.4 多行多欄布局 179
5.4.1 CSS選擇符的實(shí)際應(yīng)用 181
5.4.2 內(nèi)部DIV實(shí)戰(zhàn) 183
5.5 小結(jié) 183
第6章 界面組件 185
6.1 導(dǎo)航菜單 185
6.1.1 縱向菜單 186
6.1.2 橫向菜單 189
6.1.3 下拉菜單 190
6.2 表單 200
6.2.1 HTML表單元素 201
6.2.2 表單標(biāo)記策略 208
6.2.3 設(shè)定表單樣式 209
6.2.4 設(shè)計(jì)搜索表單 218
6.3 彈出層 220
6.3.1 堆疊上下文和z—index 223
6.3.2 用CSS創(chuàng)造三角形 225
6.4 小結(jié) 226
第7章 CSS3實(shí)戰(zhàn) 227
7.1 規(guī)劃頁(yè)面結(jié)構(gòu) 227
7.2 頁(yè)眉 231
7.2.1 頁(yè)面標(biāo)題 232
7.2.2 搜索表單 235
7.2.3 菜單 236
7.3 專(zhuān)題區(qū) 242
7.3.1 登錄表單 246
7.3.2 博文鏈接 249
7.4 圖書(shū)區(qū) 251
7.5 頁(yè)腳 257
7.6 小結(jié) 259
第8章 響應(yīng)式設(shè)計(jì) 261
8.1 小設(shè)備上的大布局 261
8.2 媒體查詢(xún) 263
8.2.1 @media規(guī)則 264
8.2.2 標(biāo)簽的media屬性 266
8.2.3 斷點(diǎn) 266
8.2.4 用標(biāo)簽設(shè)定視口 267
8.3 針對(duì)平板優(yōu)化布局 268
8.4 針對(duì)智能手機(jī)優(yōu)化布局 271
8.5 最后兩個(gè)問(wèn)題 275
8.5.1 移動(dòng)Safari中的縮放bug 275
8.5.2 讓下拉菜單支持觸摸 276
8.6 小結(jié) 278
附錄 技術(shù)提示 279
索引 287～