響應式 Web 開發項目化教程 (HTML5+CSS3)

項目1 製作HBuilder百科頁面 1 1.1 項目描述 1 1.2 前導知識 1 1.2.1 初識HTML5 1 1.2.2 HTML5基礎 4 1.2.3 文本控制元素 6 1.2.4 圖像控制元素 9 1.2.5 超鏈接元素 9 1.2.6 列表元素 10 1.2.7 結構元素 13 1.2.8 分組元素 18 1.2.9 內容交互元素 20 1.3 項目分析 21 1.3.1 頁面結構分析 21 1.3.2 樣式分析 22 1.4 項目實踐 23 1.4.1 製作頁面結構 23 1.4.2 定義CSS樣式 24 1.5 項目總結 24 項目2 製作化妝品展示列表頁面 25 2.1 項目描述 25 2.2 前導知識 25 2.2.1 初識CSS 25 2.2.2 引入CSS樣式與CSS語法格式 26 2.2.3 CSS基礎選擇器 29 2.2.4 偽元素選擇器 35 2.2.5 鏈接偽類 36 2.2.6 結構化偽類選擇器 37 2.2.7 CSS的層疊性與繼承性 42 2.2.8 CSS的優先級 44 2.2.9 字體樣式屬性與文本樣式屬性 45 2.3 項目分析 52 2.3.1 頁面結構分析 52 2.3.2 樣式分析 52 2.4 項目實踐 53 2.4.1 製作頁面結構 53 2.4.2 定義CSS樣式 54 2.5 項目總結 54 項目3 製作電商主播排行榜頁面 55 3.1 項目描述 55 3.2 前導知識 55 3.2.1 初識盒模型 55 3.2.2 邊框屬性 57 3.2.3 邊距屬性 64 3.2.4 box-sizing屬性 67 3.2.5 陰影屬性 68 3.2.6 漸變屬性 69 3.2.7 背景屬性 72 3.3 項目分析 77 3.3.1 頁面結構分析 77 3.3.2 樣式分析 78 3.4 項目實踐 78 3.4.1 製作頁面結構 78 3.4.2 定義CSS樣式 78 3.5 項目總結 79 項目4 製作家裝行業產品展示頁面 80 4.1 項目描述 80 4.2 前導知識 81 4.2.1 過渡 81 4.2.2 變形 85 4.2.3 動畫 92 4.3 項目分析 94 4.3.1 頁面結構分析 94 4.3.2 樣式分析 95 4.4 項目實踐 95 4.4.1 製作頁面結構 95 4.4.2 定義CSS樣式 97 4.5 項目總結 99 項目5 製作旅遊網站的導航欄和banner 100 5.1 項目描述 100 5.2 前導知識 100 5.2.1 元素的浮動屬性float 100 5.2.2 元素的清除浮動屬性clear 102 5.2.3 元素的位置定位屬性position 103 5.2.4 元素的類型轉換 108 5.3 項目分析 111 5.3.1 頁面結構分析 111 5.3.2 樣式分析 111 5.4 項目實踐 111 5.4.1 製作頁面結構 111 5.4.2 定義CSS樣式 112 5.5 項目總結 114 項目6 製作信息註冊頁面 115 6.1 項目描述 115 6.2 前導知識 115 6.2.1 表單概述 115 6.2.2 表單元素及屬性 117 6.2.3 表單校驗 129 6.3 項目分析 131 6.3.1 頁面結構分析 131 6.3.2 樣式分析 132 6.4 項目實踐 132 6.4.1 製作頁面結構 132 6.4.2 定義CSS樣式 135 6.5 項目總結 138 項目7 製作視頻播放頁面 139 7.1 項目描述 139 7.2 前導知識 139 7.2.1 多媒體的格式 139 7.2.2 支持視頻和音頻的瀏覽器 140 7.2.3 嵌入視頻 140 7.2.4 HTML DOM Video對象 141 7.2.5 嵌入音頻 143 7.2.6 HTML DOM Audio對象 143 7.2.7 視頻、音頻中的source 元素 145 7.3 項目分析 145 7.3.1 頁面結構分析 145 7.3.2 樣式分析 146 7.4 項目實踐 146 7.4.1 製作頁面結構 146 7.4.2 定義CSS樣式 147 7.5 項目總結 148 項目8 製作垃圾分類頁面 149 8.1 項目描述 149 8.2 前導知識 150 8.2.1 視口 150 8.2.2 媒體查詢 152 8.2.3 百分比佈局 158 8.3 項目分析 161 8.3.1 頁面結構分析 161 8.3.2 樣式分析 161 8.4 項目實踐 162 8.4.1 製作頁面結構 162 8.4.2 定義CSS樣式 164 8.5 項目總結 171 項目9 製作個人信息頁面 172 9.1 項目描述 172 9.2 前導知識 173 9.2.1 柵格系統 173 9.2.2 彈性盒佈局 176 9.3 項目分析 190 9.3.1 頁面結構分析 190 9.3.2 樣式分析 190 9.4 項目實踐 191 9.4.1 製作頁面結構 191 9.4.2 定義CSS樣式 194 9.5 項目總結 201 項目10 製作物流公司響應式網站 202 10.1 項目描述 202 10.2 頁面結構搭建 206 10.2.1 頁面結構搭建的內容 206 10.2.2 模塊結構 206 10.2.3 代碼實現 206 10.3 頂部通欄 208 10.3.1 頂部通欄結構 208 10.3.2 代碼實現 208 10.4 導航欄 209 10.4.1 導航欄結構 209 10.4.2 代碼實現 210 10.5 輪播圖 211 10.5.1 輪播圖結構 211 10.5.2 代碼實現 212 10.6 關於我們模塊 214 10.6.1 關於我們模塊結構 214 10.6.2 代碼實現 215 10.7 我們的優勢模塊 216 10.7.1 我們的優勢模塊結構 216 10.7.2 代碼實現 217 10.8 我們的服務模塊 219 10.8.1 我們的服務模塊結構 219 10.8.2 代碼實現 221 10.9 運輸物流模塊 222 10.9.1 運輸物流模塊結構 222 10.9.2 代碼實現 223 10.10 最新資訊模塊 224 10.10.1 最新資訊模塊結構 224 10.10.2 代碼實現 225 10.11 版尾 227 10.11.1 版尾結構 227 10.11.2 代碼實現 228 10.12 項目總結 228 參考文獻 228