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

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