第 1章 HTML5+CSS3初體驗 1 1.1　HTML5和CSS3的優(yōu)勢　1 1.1.1　HTML5的優(yōu)勢　1 1.1.2　CSS3的優(yōu)勢　2 1.2　HTML5的基本使用　2 1.2.1　HTML5的基本語法　3 1.2.2　HTML5語義化標(biāo)簽　3 1.3　CSS的基本使用　4 1.3.1　CSS的引入方式　5 1.3.2　選擇器　5 1.3.3　盒子模型　8 1.3.4　浮動與定位　10 1.4　【項目1-1】三欄布局頁面　11 1.4.1　項目分析　11 1.4.2　編寫頭部和底部區(qū)域　12 1.4.3　編寫主體區(qū)域　13 1.4.4　實現(xiàn)左側(cè)邊欄效果　14 1.4.5　實現(xiàn)右側(cè)邊欄效果　14 1.4.6　項目總結(jié)　15 1.5　CSS3邊框?qū)傩浴?5 1.5.1　圓角邊框　15 1.5.2　特殊邊框效果　16 1.6　CSS3背景設(shè)置　18 1.7　CSS3陰影和漸變　19 1.7.1　陰影　19 1.7.2　線性漸變　20 1.7.3　徑向漸變　21 1.8　【項目1-2】許愿墻　22 1.8.1　項目分析　22 1.8.2　編寫許愿墻頁面結(jié)構(gòu)　23 1.8.3　編寫許愿墻頁面樣式　24 1.8.4　項目總結(jié)　24 課后練習(xí)　25 第　2章 CSS3文本與圖標(biāo)　26 2.1　HTML5中常用的文本標(biāo)簽　26 2.2　CSS3文本樣式屬性　27 2.2.1　字體樣式屬性　27 2.2.2　文本外觀屬性　27 2.2.3　鏈接屬性　29 2.2.4　@font-face屬性　29 2.3　font-awesome字體圖標(biāo)　31 2.3.1　下載font-awesome　31 2.3.2　使用font-awesome　31 2.4　CSS3用戶界面屬性　33 2.4.1　box-sizing屬性　33 2.4.2　resize調(diào)整尺寸　34 2.4.3　outline-offset外形修飾　36 2.5　【項目2】軟文推廣頁面　37 2.5.1　項目分析　37 2.5.2　編寫頭部頁面效果　38 2.5.3　編寫中間部分頁面效果　38 2.5.4　編寫底部頁面效果　40 2.5.5　項目總結(jié)　40 課后練習(xí)　41 第3章　CSS3過渡、變形與動畫　42 3.1　CSS3過渡　42 3.1.1　什么是過渡　42 3.1.2　transition的子屬性　43 3.2　CSS3變形　44 3.2.1　2D轉(zhuǎn)換　44 3.2.2　元素變形原點　45 3.2.3　3D轉(zhuǎn)換　46 3.3　CSS3動畫　49 3.3.1　@keyframes規(guī)則　49 3.3.2　animation屬性　49 3.4　【項目3】搖晃的桃子　51 3.4.1　項目分析　51 3.4.2　編寫搖晃桃子的基本頁面效果　52 3.4.3　編寫桃子的搖晃效果　54 3.4.4　項目總結(jié)　56 課后練習(xí)　56 第4章　HTML5表單的應(yīng)用　57 4.1　介紹表單　57 4.1.1　

標(biāo)簽　57 4.1.2　標(biāo)簽　58 4.1.3　其他表單標(biāo)簽　60 4.2　【項目4-1】調(diào)查問卷頁面　65 4.2.1　項目分析　65 4.2.2　編寫用戶基本信息頁面效果　66 4.2.3　編寫上傳文件和文本域頁面
效果　68 4.2.4　項目總結(jié)　68 4.3　HTML5表單新特性　69 4.3.1　新特性　69 4.3.2　新特性　71 4.4　【項目4-2】登錄注冊頁面　72 4.4.1　項目分析　72 4.4.2　編寫登錄頁面效果　74 4.4.3　編寫注冊基本頁面效果　76 4.4.4　實現(xiàn)注冊信息驗證頁面效果　77 4.4.5　項目總結(jié)　78 課后練習(xí)　78 第5章　HTML5畫布　80 5.1　JavaScript的基礎(chǔ)知識　80 5.1.1　JavaScript引入方式　80 5.1.2　數(shù)據(jù)類型　81 5.1.3　變量　81 5.1.4　函數(shù)　82 5.1.5　對象　82 5.1.6　事件處理　82 5.1.7　DOM操作　84 5.1.8　getBoundingClientRect()方法　86 5.2　Canvas繪圖基本步驟　87 5.2.1　創(chuàng)建畫布　87 5.2.2　準(zhǔn)備畫筆　87 5.2.3　定義坐標(biāo)和起始點　87 5.2.4　繪制線條圖案　88 5.2.5　繪制三角形　90 5.3　Canvas常用方法　91 5.3.1　繪制幾何圖形　91 5.3.2　繪制笑臉　92 5.3.3　繪制圖片　94 5.4　Canvas其他方法　95 5.5　【項目5-1】涂鴉板　96 5.5.1　項目分析　96 5.5.2　編寫頁面結(jié)構(gòu)，定義畫布　97 5.5.3　在JavaScript中繪制圖形　97 5.5.4　實現(xiàn)鼠標(biāo)涂鴉效果　98 5.5.5　項目總結(jié)　98 5.6　【項目5-2】發(fā)紅包看照片　99 5.6.1　項目分析　99 5.6.2　編寫頁面結(jié)構(gòu)　100 5.6.3　編寫頁面樣式　101 5.6.4　繪制圓形圖片　102 5.6.5　實現(xiàn)單擊按鈕圖片顯示效果　102 5.6.6　項目總結(jié)　103 課后練習(xí)　103 第6章　HTML5視頻和音頻　104 6.1　JavaScript編程基礎(chǔ)　104 6.1.1　JavaScript運算符　104 6.1.2　分支結(jié)構(gòu)　106 6.1.3　循環(huán)結(jié)構(gòu)　107 6.2　視頻和音頻技術(shù)簡介　108 6.3　視頻的基本使用　108 6.3.1　在HTML5中嵌入視頻　108 6.3.2　視頻標(biāo)簽的常用屬性　109 6.3.3　處理視頻文件格式　110 6.4　音頻的基本使用　110 6.4.1　在HTML5中嵌入音頻　111 6.4.2　處理音頻文件格式　111 6.5　視頻和音頻對象　112 6.5.1　視頻和音頻對象的常用方法　112 6.5.2　視頻和音頻對象的常用屬性　112 6.5.3　視頻和音頻對象的常用事件　113 6.6　【項目6-1】視頻播放器　114 6.6.1　項目分析　114 6.6.2　編寫播放器頁面結(jié)構(gòu)　116 6.6.3　編寫播放器頁面樣式　116 6.6.4　計算視頻播放的總時長　119 6.6.5　實現(xiàn)視頻播放和暫停效果　119 6.6.6　實現(xiàn)進(jìn)度條顯示效果　120 6.6.7　實現(xiàn)視頻全屏顯示效果　120 6.6.8　實現(xiàn)視頻播放完成后的重置
操作　120 6.6.9　實現(xiàn)單擊進(jìn)度條視頻跳轉(zhuǎn)效果　120 6.6.10　使用Esc鍵退出全屏　121 6.6.11　使用按鍵控制視頻的播放和
暫停　121 6.6.12　項目總結(jié)　122 6.7　【項目6-2】音樂播放器　122 6.7.1　項目分析　122 6.7.2　編寫音樂播放器頁面結(jié)構(gòu)　124 6.7.3　編寫音樂播放器頁面樣式　125 6.7.4　實現(xiàn)歌詞控制欄效果　126 6.7.5　實現(xiàn)播放器樣式效果　127 6.7.6　實現(xiàn)音頻文件的播放功能　129 6.7.7　項目總結(jié)　130 課后練習(xí)　130 第7章　響應(yīng)式Web設(shè)計　131 7.1　響應(yīng)式Web設(shè)計基礎(chǔ)　131 7.1.1　視口　131 7.1.2　媒體查詢　132 7.1.3　百分比布局　134 7.1.4　柵格系統(tǒng)　136 7.2　響應(yīng)式常見實現(xiàn)方式　136 7.2.1　媒體查詢實現(xiàn)響應(yīng)式布局　136 7.2.2　彈性盒布局　137 7.2.3　彈性盒常用屬性　138 7.2.4　彈性盒屬性的綜合運用　142 7.3　【項目7-1】環(huán)保網(wǎng)站　144 7.3.1　項目分析　144 7.3.2　編寫HTML結(jié)構(gòu)代碼　146 7.3.3　編寫style.css公共樣式代碼　146 7.3.4　實現(xiàn)header響應(yīng)式效果　147 7.3.5　實現(xiàn)banner響應(yīng)式效果　149 7.3.6　實現(xiàn)中間區(qū)域效果　150 7.3.7　實現(xiàn)底部區(qū)域效果　153 7.3.8　項目總結(jié)　153 7.4　【項目7-2】學(xué)習(xí)教程庫　154 7.4.1　項目分析　154 7.4.2　編寫HTML結(jié)構(gòu)代碼　156 7.4.3　編寫標(biāo)題部分樣式代碼　156 7.4.4　編寫免費教程資源部分樣式
代碼　157 7.4.5　編寫媒體查詢樣式代碼　158 7.4.6　項目總結(jié)　159 課后練習(xí)　160 第8章　Bootstrap（上）　161 8.1　Bootstrap簡介　161 8.1.1　什么是Bootstrap　161 8.1.2　Bootstrap的優(yōu)勢　162 8.1.3　Bootstrap 4的新特性　162 8.2　Bootstrap的下載和環(huán)境安裝　162 8.2.1　Bootstrap的下載方式　162 8.2.2　下載Bootstrap預(yù)編譯文件　163 8.2.3　下載Bootstrap源文件手動
編譯　164 8.2.4　使用CDN加載Bootstrap　165 8.2.5　在HTML中引入Bootstrap　166 8.3　Bootstrap布局容器　167 8.3.1　初識布局容器　167 8.3.2　柵格系統(tǒng)　167 8.3.3　柵格系統(tǒng)基本使用　168 8.3.4　響應(yīng)式布局工具　168 8.4　Flex彈性布局　169 8.5　SVG矢量圖的使用　170 8.6　Bootstrap常用組件　172 8.6.1　表單　172 8.6.2　輸入框組　174 8.6.3　按鈕　174 8.6.4　分頁　176 8.7　輔助樣式　177 8.7.1　文本顏色　177 8.7.2　背景顏色　177 8.7.3　設(shè)置元素間距　178 8.8　【項目8】PC端登錄界面　179 8.8.1　項目分析　179 8.8.2　編寫HTML結(jié)構(gòu)代碼　180 8.8.3　設(shè)置body和html樣式　181 8.8.4　實現(xiàn)頁面垂直居中顯示　181 8.8.5　實現(xiàn)頭部head部分　182 8.8.6　實現(xiàn)中間center部分　182 8.8.7　實現(xiàn)底部footer部分　183 8.8.8　項目總結(jié)　183 課后練習(xí)　183 第9章　Bootstrap（下）　185 9.1　導(dǎo)航　185 9.1.1　基礎(chǔ)導(dǎo)航　185 9.1.2　標(biāo)簽式導(dǎo)航　186 9.1.3　pills導(dǎo)航　186 9.1.4　導(dǎo)航對齊方式　187 9.1.5　導(dǎo)航下拉菜單　187 9.1.6　標(biāo)簽頁切換　188 9.2　導(dǎo)航欄　189 9.2.1　基礎(chǔ)導(dǎo)航欄　189 9.2.2　設(shè)置導(dǎo)航欄的標(biāo)題　190 9.2.3　導(dǎo)航欄折疊效果　190 9.3　卡片　191 9.3.1　卡片結(jié)構(gòu)　191 9.3.2　卡片主體內(nèi)容　192 9.3.3　設(shè)置帶有圖片的卡片　193 9.3.4　設(shè)置卡片背景圖　193 9.4　【項目9】后臺管理系統(tǒng)　194 9.4.1　項目展示　194 9.4.2　安裝Node.js環(huán)境　196 9.4.3　使用Sass編寫樣式代碼　197 9.4.4　安裝Gulp　198 9.4.5　下載和安裝Chart.js圖表庫　199 9.4.6　引入Feather圖標(biāo)庫　200 9.4.7　搭建項目目錄結(jié)構(gòu)　200 9.4.8　創(chuàng)建模板文件　200 9.4.9　實現(xiàn)導(dǎo)航欄　201 9.4.10　實現(xiàn)網(wǎng)頁中間部分布局　203 9.4.11　編寫中間部分結(jié)構(gòu)代碼　205 9.4.12　實現(xiàn)側(cè)邊導(dǎo)航布局　205 9.4.13　實現(xiàn)右側(cè)內(nèi)容布局　206 9.4.14　實現(xiàn)側(cè)邊導(dǎo)航激活效果　207 9.4.15　解決iframe框架高度自適應(yīng)　207 9.4.16　項目總結(jié)　207 課后練習(xí)　208