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

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