Web前端技術(shù)項(xiàng)目式教程（HTML5+CSS3+Flex+Bootstrap）

任務(wù)一　初探Web前端技術(shù)　1
任務(wù)描述　1
知識(shí)引入　1
1．網(wǎng)站、網(wǎng)頁(yè)和主頁(yè)　1
2．什么是Web和Web標(biāo)準(zhǔn)　4
3．Web前端技術(shù)的發(fā)展　4
4．搭建Web前端開發(fā)環(huán)境　5
5．Web頁(yè)面的基本結(jié)構(gòu)　6
6．瀏覽器兼容性　7
任務(wù)實(shí)現(xiàn)：動(dòng)手編寫第　一個(gè)前端頁(yè)面　7
任務(wù)小結(jié)　10
課后練習(xí)　10
任務(wù)二　使用HTML5搭建旅游公司網(wǎng)站首頁(yè)結(jié)構(gòu)　11
任務(wù)描述　11
知識(shí)引入　11
1．HTML5的標(biāo)題、段落和文本格式化標(biāo)簽　11
2．HTML5的圖片標(biāo)簽　13
3．HTML5的列表標(biāo)簽　14
4．HTML5的超鏈接標(biāo)簽　15
5．HTML5的表格標(biāo)簽　17
6．傳統(tǒng)的布局標(biāo)簽和　19
7．HTML5的各種語(yǔ)義化分段元素　19
任務(wù)實(shí)現(xiàn)：搭建旅游公司網(wǎng)站首頁(yè)結(jié)構(gòu)　22
1．規(guī)劃網(wǎng)站目錄結(jié)構(gòu)　22
2．分析首頁(yè)文檔結(jié)構(gòu)　22
3．構(gòu)建首頁(yè)結(jié)構(gòu)　22
4．添加網(wǎng)頁(yè)內(nèi)容　24
任務(wù)拓展：制作旅游公司網(wǎng)站二級(jí)頁(yè)面　32
任務(wù)小結(jié)　35
課后練習(xí)　35
任務(wù)三　使用DIV+CSS實(shí)現(xiàn)旅游公司網(wǎng)站首頁(yè)布局　36
任務(wù)描述　36
知識(shí)引入　36
1．CSS規(guī)則的基本語(yǔ)法　36
2．CSS選擇器　37
3．CSS規(guī)則的應(yīng)用方式　40
4．CSS的層疊和繼承　41
5．CSS盒子模型　43
6．CSS盒子的定位機(jī)制　46
7．DIV+CSS布局剖析　51
任務(wù)實(shí)現(xiàn)：使用DIV+CSS布局旅游公司首頁(yè)　55
1．新建CSS樣式表文件并應(yīng)用到網(wǎng)頁(yè)中　55
2．基礎(chǔ)樣式設(shè)置　55
3．頭部布局與定位　56
4．主體內(nèi)容．main_top區(qū)域布局與定位　56
5．主體內(nèi)容．main_middle區(qū)域布局與定位　58
6．主體內(nèi)容．main_bottom區(qū)域布局與定位　58
7．頁(yè)腳區(qū)域布局與定位　58
任務(wù)拓展：使用CSS實(shí)現(xiàn)旅游公司網(wǎng)站二級(jí)頁(yè)面“華陽(yáng)湖景區(qū)”的布局結(jié)構(gòu)　59
任務(wù)小結(jié)　61
課后練習(xí)　61
任務(wù)四　使用CSS3美化超鏈接　62
任務(wù)描述　62
知識(shí)引入　62
1．超鏈接的基本屬性　62
2．CSS樣式偽類　63
3．鼠標(biāo)特效　64
任務(wù)實(shí)現(xiàn)：實(shí)現(xiàn)首頁(yè)中的超鏈接效果　66
1．設(shè)置首頁(yè)頭部導(dǎo)航條超鏈接樣式　66
2．設(shè)置尾部超鏈接樣式　68
任務(wù)拓展：實(shí)現(xiàn)二級(jí)頁(yè)面“華陽(yáng)湖景區(qū)”的導(dǎo)航條鏈接　72
任務(wù)小結(jié)　73
課后練習(xí)　73
任務(wù)五　使用CSS3制作導(dǎo)航　74
任務(wù)描述　74
知識(shí)引入　74
1．列表符號(hào)　74
2．圖片符號(hào)　76
3．列表符號(hào)位置　77
任務(wù)實(shí)現(xiàn)：制作旅游公司網(wǎng)站首頁(yè)導(dǎo)航　79
1．水平排列導(dǎo)航條　79
2．編排頁(yè)面中間內(nèi)容區(qū)域　81
任務(wù)拓展：制作二級(jí)菜單和職位列表　84
1．制作二級(jí)菜單　84
2．制作職位列表　89
任務(wù)小結(jié)　93
課后練習(xí)　93
任務(wù)六　美化網(wǎng)頁(yè)　94
任務(wù)描述　94
知識(shí)引入　94
1．text-shadow　94
2．box-shadow　96
3．border-radius　99
4．background　101
5．opacity　102
6．Font　Awesome字體圖標(biāo)　103
7．Animation動(dòng)畫屬性　105
任務(wù)實(shí)現(xiàn)：美化旅游公司網(wǎng)站頁(yè)面　108
1．為網(wǎng)頁(yè)添加圖標(biāo)　108
2．為按鈕添加陰影　108
3．設(shè)置圖片透明度　109
任務(wù)拓展：利用阿里巴巴矢量圖標(biāo)庫(kù)制作購(gòu)物車　110
任務(wù)小結(jié)　112
課后練習(xí)　113
任務(wù)七　添加用戶交互界面——表單　114
任務(wù)描述　114
知識(shí)引入　114
1．標(biāo)簽　115
2．元素　116
3．HTML5新增的類型　123
任務(wù)實(shí)現(xiàn)：制作旅游公司網(wǎng)站首頁(yè)搜索框、意見反饋表　126
1．制作搜索框　126
2．制作意見反饋表　128
任務(wù)拓展：實(shí)現(xiàn)搜索框長(zhǎng)度變化　133
任務(wù)小結(jié)　134
課后練習(xí)　134
任務(wù)八　使用Flex實(shí)現(xiàn)網(wǎng)頁(yè)響應(yīng)式布局　135
任務(wù)描述　135
知識(shí)引入　135
1．響應(yīng)式布局基礎(chǔ)知識(shí)　135
2．Flex布局　139
任務(wù)實(shí)現(xiàn)：使用Flex布局重構(gòu)旅游公司首頁(yè)　144
1．實(shí)現(xiàn)圖片為響應(yīng)式　145
2．設(shè)置怪異盒模型計(jì)算容器寬度　145
3．彈性文字　145
4．媒體查詢　145
5．實(shí)現(xiàn)首頁(yè)頭部響應(yīng)式效果　146
6．主體內(nèi)容．main_top區(qū)域的實(shí)現(xiàn)　147
7．主體內(nèi)容．main_middle區(qū)域的實(shí)現(xiàn)　148
8．主體內(nèi)容．main_bottom區(qū)域的實(shí)現(xiàn)　149
9．實(shí)現(xiàn)頁(yè)腳效果　150
任務(wù)拓展：使用Flex布局重構(gòu)二級(jí)頁(yè)面“華陽(yáng)湖景區(qū)”　151
任務(wù)小結(jié)　152
課后練習(xí)　152
任務(wù)九　使用Bootstrap實(shí)現(xiàn)網(wǎng)頁(yè)響應(yīng)式布局　153
任務(wù)描述　153
知識(shí)引入　153
1．Bootstrap環(huán)境搭建　153
2．容器　154
3．柵格系統(tǒng)　154
4．樣式　155
5．組件　156
任務(wù)實(shí)現(xiàn)：使用Bootstrap重構(gòu)旅游公司首頁(yè)　157
1．下載Bootstrap　157
2．網(wǎng)頁(yè)頭部代碼實(shí)現(xiàn)　158
3．圖片輪播效果代碼實(shí)現(xiàn)　159
4．公司介紹區(qū)域代碼實(shí)現(xiàn)　160
5．景區(qū)圖片部分代碼實(shí)現(xiàn)　161
6．求職信息區(qū)域代碼實(shí)現(xiàn)　162
7．頁(yè)腳區(qū)域代碼實(shí)現(xiàn)　164
任務(wù)拓展：使用Bootstrap重構(gòu)二級(jí)頁(yè)面“華陽(yáng)湖景區(qū)”　164
任務(wù)小結(jié)　167
課后練習(xí)　167
任務(wù)十　綜合練習(xí)——兒童玩具商城網(wǎng)站設(shè)計(jì)與制作　168
任務(wù)描述　168
任務(wù)實(shí)現(xiàn)：設(shè)計(jì)與制作兒童玩具商城網(wǎng)站　169
1．規(guī)劃網(wǎng)站目錄結(jié)構(gòu)　169
2．首頁(yè)代碼實(shí)現(xiàn)　170
3．“進(jìn)口玩具”頁(yè)面代碼實(shí)現(xiàn)　191
4．“相關(guān)文章”頁(yè)面代碼實(shí)現(xiàn)　201
5．“聯(lián)系我們”頁(yè)面代碼實(shí)現(xiàn)　207
任務(wù)小結(jié)　209
課后練習(xí)　209