前端HTML+CSS修煉之道（視頻同步+直播）

第1章 探本溯源，前端開發(fā)基礎(chǔ)漫談
1．1 前端開發(fā)是做什么的 2
1．2 前端開發(fā)技術(shù) 5
1．2．1 HTML超文本標(biāo)記語(yǔ)言：搭建網(wǎng)頁(yè)“結(jié)構(gòu)” 5
1．2．2 CSS層疊樣式表：給網(wǎng)頁(yè)添加“樣式” 6
1．2．3 JavaScript：讓網(wǎng)頁(yè)響應(yīng)某種“行為” 6
1．3 前端開發(fā)所需軟件 7
1．3．1 Photoshop 8
1．3．2 編輯器 11
1．3．3 瀏覽器 12
1．4 第一個(gè)HTML頁(yè)面 12
1．4．1 基本標(biāo)記標(biāo)簽 13
1．4．2 標(biāo)簽嵌套關(guān)系 19
1．5 標(biāo)簽簡(jiǎn)介 19
練習(xí)題 20
第2章 CSS基礎(chǔ)語(yǔ)法、選擇器和樣式?jīng)_突的解決方案
2．1 CSS概述 22
2．2 定義CSS的基本語(yǔ)法 23
2．3 基本選擇器 25
2．3．1 元素選擇器 25
2．3．2 ID選擇器 26
2．3．3 類選擇器 29
2．3．4 偽類選擇器 33
2．3．5 偽元素選擇器 35
2．3．6 通用選擇器 38
2．4 復(fù)合選擇器 39
2．4．1 交集選擇器 39
2．4．2 并集選擇器 40
2．4．3 后代選擇器 41
2．4．4 子元素選擇器 43
2．4．5 相鄰兄弟選擇器 44
2．4．6 屬性選擇器 45
2．5 CSS選擇器的使用方法 47
2．6 CSS應(yīng)用到HTML頁(yè)面的常用方式 47
2．6．1 行內(nèi)式 47
2．6．2 內(nèi)嵌式 48
2．6．3 鏈接式 49
2．7 CSS的沖突與解決 50
練習(xí)題 53
第3章 網(wǎng)頁(yè)排版利器：CSS 字體、文本、背景屬性設(shè)置
3．1 字體屬性 55
3．1．1 字體粗細(xì)屬性：font-weight 55
3．1．2 字體風(fēng)格屬性：font-style 56
3．1．3 字體大小屬性：font-size 58
3．1．4 字體族屬性：font-family 59
3．1．5 文本行高屬性：line-height 62
3．1．6 字體屬性：font 65
3．2 文本屬性 66
3．2．1 顏色屬性：color 66
3．2．2 水平對(duì)齊屬性：text-align 69
3．2．3 首行縮進(jìn)屬性：text-indent 70
3．2．4 文本修飾屬性：text-decoration 71
3．2．5 字符間距屬性：letter-spacing 73
3．2．6 字間距屬性：word-spacing 74
3．3 背景屬性 75
3．3．1 背景顏色屬性：background-color 75
3．3．2 背景圖片屬性：background-image 76
3．3．3 背景圖片重復(fù)屬性：background-repeat 77
3．3．4 背景圖片位置屬性：background- position 79
3．3．5 背景圖片滾動(dòng)屬性：background-attachment 81
3．3．6 背景屬性：background 83
練習(xí)題 84
第4章 剖析“盒模型”特性，詳解布局方寸間的邏輯關(guān)系
4．1 盒子模型的組成 86
4．2 盒子邊框（border）設(shè)置 88
4．2．1 設(shè)置邊框風(fēng)格 88
4．2．2 設(shè)置邊框?qū)挾?90
4．2．3 設(shè)置邊框顏色 93
4．2．4 統(tǒng)一設(shè)置邊框的寬度、顏色和風(fēng)格 95
4．2．5 邊框的形狀 98
4．3 盒子內(nèi)邊距（padding）設(shè)置 100
4．3．1 內(nèi)邊距的設(shè)置 100
4．3．2 padding內(nèi)邊距的特點(diǎn) 103
4．4 盒子外邊距（margin）設(shè)置 105
4．4．1 外邊距的設(shè)置 105
4．4．2 盒子外邊距合并 107
4．4．3 相鄰盒子之間的水平間距 113
練習(xí)題 116
第5章 世界是多樣化的，標(biāo)簽是語(yǔ)義化的
5．1 常用文本標(biāo)簽 118
5．1．1 段落與換行標(biāo)簽 118
5．1．2 標(biāo)題字標(biāo)簽 119
5．1．3 標(biāo)簽 121
5．1．4 標(biāo)簽 122
5．1．5 標(biāo)簽 122
5．1．6 標(biāo)簽 123
5．1．7 標(biāo)簽 124
5．1．8 空格和特殊字符的輸入 124
5．2 文檔結(jié)構(gòu)標(biāo)簽 126
5．2．1 標(biāo)簽 127
5．2．2 標(biāo)簽 128
5．2．3 標(biāo)簽 129
5．2．4 標(biāo)簽 130
5．2．5 標(biāo)簽 130
5．2．6 標(biāo)簽 131
5．2．7 標(biāo)簽 131
練習(xí)題 132
第6章 探究多媒體標(biāo)簽，揭秘各種元素類型
6．1 多媒體標(biāo)簽 134
6．1．1 標(biāo)簽 134
6．1．2 標(biāo)簽 136
6．1．3 標(biāo)簽 137
6．1．4 標(biāo)簽 138
6．2 元素類型 139
6．2．1 block塊級(jí)元素 139
6．2．2 inline行內(nèi)元素 140
6．2．3 inline-block行內(nèi)塊元素 142
6．2．4 使用display屬性改變?cè)仡愋?144
6．3 使用CSS reset標(biāo)簽樣式 147
練習(xí)題 148
第7章 為網(wǎng)頁(yè)配上精美圖片、讓列表清晰傳達(dá)具象內(nèi)容
7．1 使用標(biāo)簽在網(wǎng)頁(yè)中插入圖片 150
7．1．1 網(wǎng)頁(yè)常用圖片格式 150
7．1．2 插入圖片的基本語(yǔ)法 150
7．1．3 設(shè)置圖片提示信息和替換信息 152
7．1．4 使用標(biāo)簽屬性設(shè)置圖片大小 153
7．1．5 使用CSS設(shè)置圖片樣式 154
7．2 使用列表標(biāo)簽創(chuàng)建列表 156
7．2．1 創(chuàng)建有序列表 156
7．2．2 創(chuàng)建無(wú)序列表 159
7．2．3 創(chuàng)建定義列表 161
7．2．4 創(chuàng)建嵌套列表 162
7．2．5 使用CSS列表屬性設(shè)置列表樣式 163
7．2．6 使用列表和列表屬性創(chuàng)建縱向菜單164
7．2．7 使用列表和display：inline創(chuàng)建橫向菜單 166
7．2．8 使用列表和display：inline-block實(shí)現(xiàn)圖文橫排 167
練習(xí)題 169
第8章 使用超鏈接構(gòu)建信息間的連接關(guān)系
8．1 使用標(biāo)簽創(chuàng)建鏈接 171
8．1．1 創(chuàng)建鏈接的基本語(yǔ)法 171
8．1．2 設(shè)置鏈接目標(biāo)窗口 172
8．1．3 鏈接路徑的設(shè)置 173
8．2 使用標(biāo)簽設(shè)置鏈接基準(zhǔn)URL 176
8．3 鏈接的類型 178
8．4 使用偽類設(shè)置鏈接樣式 185
8．5 鏈接與內(nèi)聯(lián)框架 187
8．5．1 內(nèi)聯(lián)框架標(biāo)簽 187
8．5．2 修改內(nèi)聯(lián)框架默認(rèn)樣式 188
8．5．3 使用內(nèi)聯(lián)框架作為鏈接的目標(biāo)窗口188
8．5．4 使用內(nèi)聯(lián)框架的優(yōu)缺點(diǎn) 189
練習(xí)題 190
第9章 呈現(xiàn)數(shù)據(jù)的利器：網(wǎng)頁(yè)表格
9．1 表格概述 192
9．2 表格標(biāo)簽 194
9．2．1 標(biāo)簽 194
9．2．2 標(biāo)簽 195
9．2．3 和標(biāo)簽 195
9．2．4 標(biāo)簽 195
9．2．5 、和標(biāo)簽 196
9．2．6 使用colspan屬性實(shí)現(xiàn)單元格跨列合并 197
9．2．7 使用rowspan屬性實(shí)現(xiàn)跨行操作199
9．2．8 使用表格標(biāo)簽屬性格式化表格 200
9．3 CSS表格屬性 202
9．4 使用CSS格式化表格 204
9．5 表格各元素的display屬性值 206
9．6 表格綜合案例 206
練習(xí)題 210
第10章 構(gòu)建在控件之上的數(shù)據(jù)交互方案：網(wǎng)頁(yè)表單
10．1 表單概述 212
10．2 標(biāo)簽 212
10．3 input表單控件 213
10．3．1 input表單控件概述 213
10．3．2 文本框 214
10．3．3 密碼框 215
10．3．4 隱藏域 215
10．3．5 文件域 216
10．3．6 單選框和復(fù)選框 217
10．3．7 提交按鈕 218
10．3．8 普通按鈕 219
10．3．9 重置按鈕 220
10．3．10 圖像按鈕 220
10．3．11 button元素按鈕 222
10．4 label標(biāo)簽 223
10．5 選擇列表 224
10．6 多行文本域 227
10．7 表單元素的disabled和readonly屬性 228
10．8 表單新增屬性 230
10．8．1 form屬性 230
10．8．2 formaction屬性 231
10．8．3 autofocus屬性 231
10．8．4 pattern屬性 232
10．8．5 placeholder屬性 233
10．8．6 required屬性 234
10．9 元素輪廓（outline） 235
10．10 表單元素的默認(rèn)樣式及重置 237
10．11 表單美化 238
10．11．1 單行文本框控件的美化 238
10．11．2 按鈕控件的美化 239
10．11．3 單選框/復(fù)選框控件的美化 240
10．11．4 上傳文件控件美化 242
10．11．5 下拉列表控件美化 244
10．12 表單的元素類型 245
練習(xí)題 245
第11章 玩轉(zhuǎn)文檔排版的犀利武器：浮動(dòng)
11．1 標(biāo)準(zhǔn)流排版 247
11．2 浮動(dòng)排版 248
11．2．1 浮動(dòng)設(shè)置 249
11．2．2 浮動(dòng)元素的表現(xiàn)及特征 249
11．2．3 浮動(dòng)清除 260
11．2．4 使用空div清除浮動(dòng)解決父元素高度塌陷問(wèn)題 264
11．2．5 使用偽元素清除浮動(dòng)解決父元素高度塌陷問(wèn)題 265
11．2．6 使用BFC解決父元素高度塌陷問(wèn)題 269
11．2．7 使用overflow屬性解決父元素高度塌陷問(wèn)題 272
11．2．8 使用BFC防止浮動(dòng)元素覆蓋文檔流元素 274
練習(xí)題 276
第12章 平面之上的疊加藝術(shù)：定位
12．1 定位排版屬性position 278
12．1．1 靜態(tài)定位 278
12．1．2 相對(duì)定位 278
12．1．3 絕對(duì)定位 281
12．1．4 固定定位 289
12．2 定位層級(jí) 295
12．3 定位相關(guān)知識(shí) 299
12．3．1 全屏的div設(shè)置 299
12．3．2 透明度/透明濾鏡 300
12．3．3 margin負(fù)值 305
12．3．4 元素的絕對(duì)居中 312
練習(xí)題 313
第13章 技術(shù)的世界只崇拜實(shí)干者：整站靜態(tài)頁(yè)面開發(fā)
13．1 網(wǎng)站前期規(guī)劃 315
13．1．1 網(wǎng)站目錄劃分 315
13．1．2 網(wǎng)站文件夾、文件的命名 316
13．1．3 網(wǎng)站整體規(guī)劃 319
13．2 網(wǎng)站首頁(yè)制作 320
13．2．1 網(wǎng)站首頁(yè)結(jié)構(gòu) 320
13．2．2 網(wǎng)站首頁(yè)之頭部&banner版塊的制作 320
13．2．3 以圖換字 322
13．2．4 滑動(dòng)門 325
13．2．5 CSS 精靈圖 328
13．2．6 網(wǎng)站首頁(yè)之課程介紹版塊的制作 330
13．2．7 文字陰影text-shadow 332
13．2．8 盒陰影box-shadow 334
13．2．9 圓角border-radius 337
13．2．10 網(wǎng)站首頁(yè)之學(xué)員作品展示版塊的制作 341
13．2．11 網(wǎng)站首頁(yè)之講師介紹版塊的制作 341
13．2．12 網(wǎng)站首頁(yè)之妙味服務(wù)版塊的制作 342
13．2．13 網(wǎng)站首頁(yè)之頁(yè)腳版塊的制作 343
13．3 網(wǎng)站其他頁(yè)面的制作 343
13．4 網(wǎng)站優(yōu)化 344
13．5 網(wǎng)站建設(shè)技巧 346
13．5．1 最小寬度/最小高度 346
13．5．2 最大寬度/最大高度 347
13．5．3 text-overflow文本溢出 348
練習(xí)題 348