第 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語義化標簽　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)左側邊欄效果　14 1.4.5　實現(xiàn)右側邊欄效果　14 1.4.6　項目總結　15 1.5　CSS3邊框屬性　15 1.5.1　圓角邊框　15 1.5.2　特殊邊框效果　16 1.6　CSS3背景設置　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　編寫許愿墻頁面結構　23 1.8.3　編寫許愿墻頁面樣式　24 1.8.4　項目總結　24 課后練習　25 第　2章 CSS3文本與圖標　26 2.1　HTML5中常用的文本標簽　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字體圖標　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調整尺寸　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　項目總結　40 課后練習　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轉換　44 3.2.2　元素變形原點　45 3.2.3　3D轉換　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　項目總結　56 課后練習　56 第4章　HTML5表單的應用　57 4.1　介紹表單　57 4.1.1　

標簽　57 4.1.2　標簽　58 4.1.3　其他表單標簽　60 4.2　【項目4-1】調查問卷頁面　65 4.2.1　項目分析　65 4.2.2　編寫用戶基本信息頁面效果　66 4.2.3　編寫上傳文件和文本域頁面
效果　68 4.2.4　項目總結　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　項目總結　78 課后練習　78 第5章　HTML5畫布　80 5.1　JavaScript的基礎知識　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　準備畫筆　87 5.2.3　定義坐標和起始點　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　編寫頁面結構，定義畫布　97 5.5.3　在JavaScript中繪制圖形　97 5.5.4　實現(xiàn)鼠標涂鴉效果　98 5.5.5　項目總結　98 5.6　【項目5-2】發(fā)紅包看照片　99 5.6.1　項目分析　99 5.6.2　編寫頁面結構　100 5.6.3　編寫頁面樣式　101 5.6.4　繪制圓形圖片　102 5.6.5　實現(xiàn)單擊按鈕圖片顯示效果　102 5.6.6　項目總結　103 課后練習　103 第6章　HTML5視頻和音頻　104 6.1　JavaScript編程基礎　104 6.1.1　JavaScript運算符　104 6.1.2　分支結構　106 6.1.3　循環(huán)結構　107 6.2　視頻和音頻技術簡介　108 6.3　視頻的基本使用　108 6.3.1　在HTML5中嵌入視頻　108 6.3.2　視頻標簽的常用屬性　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　編寫播放器頁面結構　116 6.6.3　編寫播放器頁面樣式　116 6.6.4　計算視頻播放的總時長　119 6.6.5　實現(xiàn)視頻播放和暫停效果　119 6.6.6　實現(xiàn)進度條顯示效果　120 6.6.7　實現(xiàn)視頻全屏顯示效果　120 6.6.8　實現(xiàn)視頻播放完成后的重置
操作　120 6.6.9　實現(xiàn)單擊進度條視頻跳轉效果　120 6.6.10　使用Esc鍵退出全屏　121 6.6.11　使用按鍵控制視頻的播放和
暫�！�121 6.6.12　項目總結　122 6.7　【項目6-2】音樂播放器　122 6.7.1　項目分析　122 6.7.2　編寫音樂播放器頁面結構　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　項目總結　130 課后練習　130 第7章　響應式Web設計　131 7.1　響應式Web設計基礎　131 7.1.1　視口　131 7.1.2　媒體查詢　132 7.1.3　百分比布局　134 7.1.4　柵格系統(tǒng)　136 7.2　響應式常見實現(xiàn)方式　136 7.2.1　媒體查詢實現(xiàn)響應式布局　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結構代碼　146 7.3.3　編寫style.css公共樣式代碼　146 7.3.4　實現(xiàn)header響應式效果　147 7.3.5　實現(xiàn)banner響應式效果　149 7.3.6　實現(xiàn)中間區(qū)域效果　150 7.3.7　實現(xiàn)底部區(qū)域效果　153 7.3.8　項目總結　153 7.4　【項目7-2】學習教程庫　154 7.4.1　項目分析　154 7.4.2　編寫HTML結構代碼　156 7.4.3　編寫標題部分樣式代碼　156 7.4.4　編寫免費教程資源部分樣式
代碼　157 7.4.5　編寫媒體查詢樣式代碼　158 7.4.6　項目總結　159 課后練習　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預編譯文件　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　響應式布局工具　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　設置元素間距　178 8.8　【項目8】PC端登錄界面　179 8.8.1　項目分析　179 8.8.2　編寫HTML結構代碼　180 8.8.3　設置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　項目總結　183 課后練習　183 第9章　Bootstrap（下）　185 9.1　導航　185 9.1.1　基礎導航　185 9.1.2　標簽式導航　186 9.1.3　pills導航　186 9.1.4　導航對齊方式　187 9.1.5　導航下拉菜單　187 9.1.6　標簽頁切換　188 9.2　導航欄　189 9.2.1　基礎導航欄　189 9.2.2　設置導航欄的標題　190 9.2.3　導航欄折疊效果　190 9.3　卡片　191 9.3.1　卡片結構　191 9.3.2　卡片主體內(nèi)容　192 9.3.3　設置帶有圖片的卡片　193 9.3.4　設置卡片背景圖　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圖標庫　200 9.4.7　搭建項目目錄結構　200 9.4.8　創(chuàng)建模板文件　200 9.4.9　實現(xiàn)導航欄　201 9.4.10　實現(xiàn)網(wǎng)頁中間部分布局　203 9.4.11　編寫中間部分結構代碼　205 9.4.12　實現(xiàn)側邊導航布局　205 9.4.13　實現(xiàn)右側內(nèi)容布局　206 9.4.14　實現(xiàn)側邊導航激活效果　207 9.4.15　解決iframe框架高度自適應　207 9.4.16　項目總結　207 課后練習　208