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

第1章　探本溯源，前端開發(fā)基礎(chǔ)漫談
1．1　前端開發(fā)是做什么的　2
1．2　前端開發(fā)技術(shù)　5
1．2．1　HTML 超文本標記語言：搭建網(wǎng)頁“結(jié)構(gòu)”　5
1．2．2　CSS 層疊樣式表：給網(wǎng)頁添加“樣式”　6
1．2．3　JavaScript：讓網(wǎng)頁響應(yīng)某種“行為”　6
1．3　前端開發(fā)所需軟件　7
1．3．1　Photoshop　8
1．3．2　編輯器　11
1．3．3　瀏覽器　12
1．4　第一個HTML 頁面　12
1．4．1　基本標記標簽　13
1．4．2　標簽嵌套關(guān)系　19
1．5　
標簽簡介　19
練習(xí)題　20
第2章　CSS基礎(chǔ)語法、選擇器和樣式?jīng)_突的解決方案
2．1　CSS 概述　22
2．2　定義CSS 的基本語法　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頁面的常用方式　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)頁排版利器：CSS字體、文本、背景屬性設(shè)置
3．1　字體屬性　55
3．1．1　字體粗細屬性：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　水平對齊屬性：text-align　69
3．2．3　首行縮進屬性：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　背景圖片滾動屬性：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ū)挾取?0
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)邊距的特點　103
4．4　盒子外邊距（margin）設(shè)置　105
4．4．1　外邊距的設(shè)置　105
4．4．2　盒子外邊距合并　107
4．4．3　相鄰盒子之間的水平間距　113
練習(xí)題　116
第5章　世界是多樣化的，標簽是語義化的
5．1　常用文本標簽　118
5．1．1　段落與換行標簽　118
5．1．2　標題字標簽　119
5．1．3　 標簽　121
5．1．4　 標簽　122
5．1．5　標簽　122
5．1．6　 標簽　123
5．1．7　 標簽　124
5．1．8　空格和特殊字符的輸入　124
5．2　文檔結(jié)構(gòu)標簽　126
5．2．1　
標簽　127
5．2．2　 標簽　128
5．2．3　標簽　129
5．2．4　 標簽　130
5．2．5　標簽　130
5．2．6　標簽　131
5．2．7　標簽　131
練習(xí)題　132
第6章　探究多媒體標簽，揭秘各種元素類型
6．1　多媒體標簽　134
6．1．1　標簽　134
6．1．2　標簽　136
6．1．3　標簽　137
6．1．4　標簽　138
6．2　元素類型　139
6．2．1　block 塊級元素　139
6．2．2　inline 行內(nèi)元素　140
6．2．3　inline-block 行內(nèi)塊元素　142
6．2．4　使用display 屬性改變元素類型　144
6．3　使用CSS reset 標簽樣式　147
練習(xí)題　148
第7章　為網(wǎng)頁配上精美圖片、讓列表清晰傳達具象內(nèi)容
7．1　使用 標簽在網(wǎng)頁中插入圖片　150
7．1．1　網(wǎng)頁常用圖片格式　150
7．1．2　插入圖片的基本語法　150
7．1．3　設(shè)置圖片提示信息和替換
信息　152
7．1．4　使用標簽屬性設(shè)置圖片大小　153
7．1．5　使用CSS 設(shè)置圖片樣式　154
7．2　使用列表標簽創(chuàng)建列表　156
7．2．1　創(chuàng)建有序列表　156
7．2．2　創(chuàng)建無序列表　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實現(xiàn)圖文橫排　167
練習(xí)題　169
第8章　使用超鏈接構(gòu)建信息間的連接關(guān)系
8．1　使用標簽創(chuàng)建鏈接　171
8．1．1　創(chuàng)建鏈接的基本語法　171
8．1．2　設(shè)置鏈接目標窗口　172
8．1．3　鏈接路徑的設(shè)置　173
8．2　使用標簽設(shè)置鏈接基準URL　176
8．3　鏈接的類型　178
8．4　使用偽類設(shè)置鏈接樣式　185
8．5　鏈接與內(nèi)聯(lián)框架　187
8．5．1　內(nèi)聯(lián)框架標簽　187<br/>8．5．2　修改內(nèi)聯(lián)框架默認樣式　188<br/>8．5．3　使用內(nèi)聯(lián)框架作為鏈接的目標窗口　188<br/>8．5．4　使用內(nèi)聯(lián)框架的優(yōu)缺點　189<br/>練習(xí)題　190<br/>第9章　呈現(xiàn)數(shù)據(jù)的利器：網(wǎng)頁表格<br/>9．1　表格概述　192<br/>9．2　表格標簽　194<br/>9．2．1　<table>標簽　194<br/>9．2．2　<tbody><tr>標簽　195<br/>9．2．3　<td>和</td><th>標簽　195<br/>9．2．4　</th></tr></tbody><caption>標簽　195<br/>9．2．5　</caption><thead>、</thead><tbody>和</tbody><tfoot>標簽　196<br/>9．2．6　使用colspan屬性實現(xiàn)單元格跨列合并　197<br/>9．2．7　使用rowspan屬性實現(xiàn)跨行操作　199<br/>9．2．8　使用表格標簽屬性格式化表格　200<br/>9．3　CSS 表格屬性　202<br/>9．4　使用CSS 格式化表格　204<br/>9．5　表格各元素的display 屬性值　206<br/>9．6　表格綜合案例　206<br/>練習(xí)題　210<br/>第10章　構(gòu)建在控件之上的數(shù)據(jù)交互方案：網(wǎng)頁表單<br/>10．1　表單概述　212<br/>10．2　<form>標簽　212<br/>10．3　input 表單控件　213<br/>10．3．1　input 表單控件概述　213<br/>10．3．2　文本框　214<br/>10．3．3　密碼框　215<br/>10．3．4　隱藏域　215<br/>10．3．5　文件域　216<br/>10．3．6　單選框和復(fù)選框　217<br/>10．3．7　提交按鈕　218<br/>10．3．8　普通按鈕　219<br/>10．3．9　重置按鈕　220<br/>10．3．10　圖像按鈕　220<br/>10．3．11　button 元素按鈕　222<br/>10．4　label 標簽　223<br/>10．5　選擇列表　224<br/>10．6　多行文本域　227<br/>10．7　表單元素的disabled和readonly 屬性　228<br/>10．8　表單新增屬性　230<br/>10．8．1　form 屬性　230<br/>10．8．2　formaction 屬性　231<br/>10．8．3　autofocus 屬性　231<br/>10．8．4　pattern 屬性　232<br/>10．8．5　placeholder 屬性　233<br/>10．8．6　required 屬性　234<br/>10．9　元素輪廓（outline）　235<br/>10．10　表單元素的默認樣式及重置　237<br/>10．11　表單美化　238<br/>10．11．1　單行文本框控件的美化　238<br/>10．11．2　按鈕控件的美化　239<br/>10．11．3　單選框/復(fù)選框控件的美化　240<br/>10．11．4　上傳文件控件美化　242<br/>10．11．5　下拉列表控件美化　244<br/>10．12　表單的元素類型　245<br/>練習(xí)題　245<br/>第11章　玩轉(zhuǎn)文檔排版的犀利武器：浮動<br/>11．1　標準流排版　247<br/>11．2　浮動排版　248<br/>11．2．1　浮動設(shè)置　249<br/>11．2．2　浮動元素的表現(xiàn)及特征　249<br/>11．2．3　浮動清除　260<br/>11．2．4　使用空div 清除浮動解決父元素高度塌陷問題　264<br/>11．2．5　使用偽元素清除浮動解決父元素高度塌陷問題　265<br/>11．2．6　使用BFC 解決父元素高度塌陷問題　269<br/>11．2．7　使用overflow 屬性解決父元素高度塌陷問題　272<br/>11．2．8　使用BFC 防止浮動元素覆蓋文檔流元素　274<br/>練習(xí)題　276<br/>第12章　平面之上的疊加藝術(shù)：定位<br/>12．1　定位排版屬性position　278<br/>12．1．1　靜態(tài)定位　278<br/>12．1．2　相對定位　278<br/>12．1．3　絕對定位　281<br/>12．1．4　固定定位　289<br/>12．2　定位層級　295<br/>12．3　定位相關(guān)知識　299<br/>12．3．1　全屏的div 設(shè)置　299<br/>12．3．2　透明度/ 透明濾鏡　300<br/>12．3．3　margin 負值　304<br/>12．3．4　元素的絕對居中　312<br/>練習(xí)題　313<br/>第13章　值得反復(fù)推敲的經(jīng)典布局方案<br/>13．1　常見網(wǎng)頁布局版式　315<br/>13．1．1　上中下一欄版式　315<br/>13．1．2　左右兩欄版式　316<br/>13．1．3　左右兩欄+頁眉+頁腳版式　318<br/>13．1．4　左右寬度固定且中間自適應(yīng)的左中右三欄版式　320<br/>13．1．5　左右寬度固定、中間自適應(yīng)的左中右三欄+頁眉+頁腳版式　322<br/>13．2　使用常見布局版式布局網(wǎng)頁案例　324<br/>13．2．1　使用左右兩欄+頁眉+頁腳版式布局頁面　324<br/>13．2．2　使用左中右三欄+頁眉+頁腳版式布局頁面　325<br/>練習(xí)題　329<br/>第14章　技術(shù)的世界只崇拜實干者：整站靜態(tài)頁面開發(fā)<br/>14．1　網(wǎng)站前期規(guī)劃　331<br/>14．1．1　網(wǎng)站目錄劃分　331<br/>14．1．2　網(wǎng)站文件夾、文件的命名　332<br/>14．1．3　網(wǎng)站整體規(guī)劃　335<br/>14．2　網(wǎng)站首頁制作　336<br/>14．2．1　網(wǎng)站首頁結(jié)構(gòu)　336<br/>14．2．2　網(wǎng)站首頁之頭部&banner版塊的制作　336<br/>14．2．3　以圖換字　338<br/>14．2．4　滑動門　341<br/>14．2．5　CSS 精靈圖　344<br/>14．2．6　網(wǎng)站首頁之課程介紹版塊的制作　346<br/>14．2．7　文字陰影text-shadow　348<br/>14．2．8　盒陰影box-shadow　350<br/>14．2．9　圓角border-radius　353<br/>14．2．10　網(wǎng)站首頁之學(xué)員作品展示版塊的制作　357<br/>14．2．11　網(wǎng)站首頁之講師介紹版塊的制作　357<br/>14．2．12　網(wǎng)站首頁之妙味服務(wù)版塊的制作　358<br/>14．2．13　網(wǎng)站首頁之頁腳版塊的制作　359<br/>14．3　網(wǎng)站其他頁面的制作　359<br/>14．4　網(wǎng)站優(yōu)化　360<br/>14．5　網(wǎng)站建設(shè)技巧　362<br/>14．5．1　最小寬度/最小高度　362<br/>14．5．2　最大寬度/最大高度　363<br/>14．5．3　text-overflow文本溢出　364<br/>練習(xí)題　364</form></tfoot></table>