響應(yīng)式Web開(kāi)發(fā)項(xiàng)目化教程(HTML5+CSS3)
定 價(jià):49 元
- 作者:孫曉娟
- 出版時(shí)間:2020/7/1
- ISBN:9787121392757
- 出 版 社:電子工業(yè)出版社
- 中圖法分類:TP312;TP393.092
- 頁(yè)碼:236
- 紙張:
- 版次:01
- 開(kāi)本:16開(kāi)
近年來(lái),互聯(lián)網(wǎng)在各個(gè)領(lǐng)域的普及,使Web前端開(kāi)發(fā)技術(shù)的發(fā)展速度十分迅猛,而HTML5+CSS3更是已經(jīng)成為Web前端開(kāi)發(fā)技術(shù)的主流,從而使Web前端開(kāi)發(fā)技術(shù)具備了更多新的功能特性。本書(shū)從Web前端開(kāi)發(fā)實(shí)際應(yīng)用的角度出發(fā),以企業(yè)實(shí)際項(xiàng)目為核心,由淺入深地講解了HTML5、CSS3及響應(yīng)式Web前端開(kāi)發(fā)技術(shù)。本書(shū)共10個(gè)項(xiàng)目,前9個(gè)項(xiàng)目從項(xiàng)目描述、前導(dǎo)知識(shí)、項(xiàng)目分析、項(xiàng)目實(shí)踐、項(xiàng)目總結(jié)5個(gè)方面對(duì)各項(xiàng)目進(jìn)行了系統(tǒng)的講解,幫助讀者快速理解并掌握各項(xiàng)目的重點(diǎn)知識(shí),最后通過(guò)項(xiàng)目10的企業(yè)真實(shí)項(xiàng)目實(shí)戰(zhàn)對(duì)響應(yīng)式Web前端開(kāi)發(fā)全過(guò)程進(jìn)行梳理和講解,全面提高讀者分析問(wèn)題、解決問(wèn)題及動(dòng)手操作的能力。本書(shū)包含配套教學(xué)計(jì)劃、教案、教學(xué)PPT、教學(xué)案例、源代碼、課后習(xí)題等資源,讀者可登錄華信教育資源網(wǎng)(http://www.hxedu.com.cn)注冊(cè)后免費(fèi)下載。本書(shū)適用面廣,既可作為高職院校、培訓(xùn)機(jī)構(gòu)的Web前端開(kāi)發(fā)教材,也可作為網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站開(kāi)發(fā)、網(wǎng)頁(yè)編程等課程的教材及參考書(shū)。
孫曉娟,參加工作以來(lái),一直從事Web開(kāi)發(fā)和計(jì)算機(jī)軟件方向的研究與教學(xué)工作,撰寫(xiě)論文20余篇,多次獲得省級(jí)教學(xué)成果獎(jiǎng),教育部?jī)?yōu)秀指導(dǎo)教師等榮譽(yù)。2017年至今,多次擔(dān)任遼寧省職業(yè)技能大賽高職、中職組的計(jì)算機(jī)檢測(cè)與維修、電子商務(wù)賽項(xiàng)的評(píng)委。
項(xiàng)目1 制作HBuilder百科頁(yè)面 1
1.1 項(xiàng)目描述 1
1.2 前導(dǎo)知識(shí) 1
1.2.1 初識(shí)HTML5 1
1.2.2 HTML5基礎(chǔ) 4
1.2.3 文本控制元素 6
1.2.4 圖像控制元素 9
1.2.5 超鏈接元素 9
1.2.6 列表元素 10
1.2.7 結(jié)構(gòu)元素 13
1.2.8 分組元素 18
1.2.9 內(nèi)容交互元素 20
1.3 項(xiàng)目分析 21
1.3.1 頁(yè)面結(jié)構(gòu)分析 21
1.3.2 樣式分析 22
1.4 項(xiàng)目實(shí)踐 23
1.4.1 制作頁(yè)面結(jié)構(gòu) 23
1.4.2 定義CSS樣式 24
1.5 項(xiàng)目總結(jié) 24
項(xiàng)目2 制作化妝品展示列表頁(yè)面 25
2.1 項(xiàng)目描述 25
2.2 前導(dǎo)知識(shí) 25
2.2.1 初識(shí)CSS 25
2.2.2 引入CSS樣式與CSS語(yǔ)法格式 26
2.2.3 CSS基礎(chǔ)選擇器 29
2.2.4 偽元素選擇器 35
2.2.5 鏈接偽類 36
2.2.6 結(jié)構(gòu)化偽類選擇器 37
2.2.7 CSS的層疊性與繼承性 42
2.2.8 CSS的優(yōu)先級(jí) 44
2.2.9 字體樣式屬性與文本樣式屬性 45
2.3 項(xiàng)目分析 52
2.3.1 頁(yè)面結(jié)構(gòu)分析 52
2.3.2 樣式分析 52
2.4 項(xiàng)目實(shí)踐 53
2.4.1 制作頁(yè)面結(jié)構(gòu) 53
2.4.2 定義CSS樣式 54
2.5 項(xiàng)目總結(jié) 54
項(xiàng)目3 制作電商主播排行榜頁(yè)面 55
3.1 項(xiàng)目描述 55
3.2 前導(dǎo)知識(shí) 55
3.2.1 初識(shí)盒模型 55
3.2.2 邊框?qū)傩?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 項(xiàng)目分析 77
3.3.1 頁(yè)面結(jié)構(gòu)分析 77
3.3.2 樣式分析 78
3.4 項(xiàng)目實(shí)踐 78
3.4.1 制作頁(yè)面結(jié)構(gòu) 78
3.4.2 定義CSS樣式 78
3.5 項(xiàng)目總結(jié) 79
項(xiàng)目4 制作家裝行業(yè)產(chǎn)品展示頁(yè)面 80
4.1 項(xiàng)目描述 80
4.2 前導(dǎo)知識(shí) 81
4.2.1 過(guò)渡 81
4.2.2 變形 85
4.2.3 動(dòng)畫(huà) 92
4.3 項(xiàng)目分析 94
4.3.1 頁(yè)面結(jié)構(gòu)分析 94
4.3.2 樣式分析 95
4.4 項(xiàng)目實(shí)踐 95
4.4.1 制作頁(yè)面結(jié)構(gòu) 95
4.4.2 定義CSS樣式 97
4.5 項(xiàng)目總結(jié) 99
項(xiàng)目5 制作旅游網(wǎng)站的導(dǎo)航欄和banner 100
5.1 項(xiàng)目描述 100
5.2 前導(dǎo)知識(shí) 100
5.2.1 元素的浮動(dòng)屬性float 100
5.2.2 元素的清除浮動(dòng)屬性clear 102
5.2.3 元素的位置定位屬性position 103
5.2.4 元素的類型轉(zhuǎn)換 108
5.3 項(xiàng)目分析 111
5.3.1 頁(yè)面結(jié)構(gòu)分析 111
5.3.2 樣式分析 111
5.4 項(xiàng)目實(shí)踐 111
5.4.1 制作頁(yè)面結(jié)構(gòu) 111
5.4.2 定義CSS樣式 112
5.5 項(xiàng)目總結(jié) 114
項(xiàng)目6 制作信息注冊(cè)頁(yè)面 115
6.1 項(xiàng)目描述 115
6.2 前導(dǎo)知識(shí) 115
6.2.1 表單概述 115
6.2.2 表單元素及屬性 117
6.2.3 表單校驗(yàn) 129
6.3 項(xiàng)目分析 131
6.3.1 頁(yè)面結(jié)構(gòu)分析 131
6.3.2 樣式分析 132
6.4 項(xiàng)目實(shí)踐 132
6.4.1 制作頁(yè)面結(jié)構(gòu) 132
6.4.2 定義CSS樣式 135
6.5 項(xiàng)目總結(jié) 138
項(xiàng)目7 制作視頻播放頁(yè)面 139
7.1 項(xiàng)目描述 139
7.2 前導(dǎo)知識(shí) 139
7.2.1 多媒體的格式 139
7.2.2 支持視頻和音頻的瀏覽器 140
7.2.3 嵌入視頻 140
7.2.4 HTML DOM Video對(duì)象 141
7.2.5 嵌入音頻 143
7.2.6 HTML DOM Audio對(duì)象 143
7.2.7 視頻、音頻中的source
元素 145
7.3 項(xiàng)目分析 145
7.3.1 頁(yè)面結(jié)構(gòu)分析 145
7.3.2 樣式分析 146
7.4 項(xiàng)目實(shí)踐 146
7.4.1 制作頁(yè)面結(jié)構(gòu) 146
7.4.2 定義CSS樣式 147
7.5 項(xiàng)目總結(jié) 148
項(xiàng)目8 制作垃圾分類頁(yè)面 149
8.1 項(xiàng)目描述 149
8.2 前導(dǎo)知識(shí) 150
8.2.1 視口 150
8.2.2 媒體查詢 152
8.2.3 百分比布局 158
8.3 項(xiàng)目分析 161
8.3.1 頁(yè)面結(jié)構(gòu)分析 161
8.3.2 樣式分析 161
8.4 項(xiàng)目實(shí)踐 162
8.4.1 制作頁(yè)面結(jié)構(gòu) 162
8.4.2 定義CSS樣式 164
8.5 項(xiàng)目總結(jié) 171
項(xiàng)目9 制作個(gè)人信息頁(yè)面 172
9.1 項(xiàng)目描述 172
9.2 前導(dǎo)知識(shí) 173
9.2.1 柵格系統(tǒng) 173
9.2.2 彈性盒布局 176
9.3 項(xiàng)目分析 190
9.3.1 頁(yè)面結(jié)構(gòu)分析 190
9.3.2 樣式分析 190
9.4 項(xiàng)目實(shí)踐 191
9.4.1 制作頁(yè)面結(jié)構(gòu) 191
9.4.2 定義CSS樣式 194
9.5 項(xiàng)目總結(jié) 201
項(xiàng)目10 制作物流公司響應(yīng)式網(wǎng)站 202
10.1 項(xiàng)目描述 202
10.2 頁(yè)面結(jié)構(gòu)搭建 206
10.2.1 頁(yè)面結(jié)構(gòu)搭建的內(nèi)容 206
10.2.2 模塊結(jié)構(gòu) 206
10.2.3 代碼實(shí)現(xiàn) 206
10.3 頂部通欄 208
10.3.1 頂部通欄結(jié)構(gòu) 208
10.3.2 代碼實(shí)現(xiàn) 208
10.4 導(dǎo)航欄 209
10.4.1 導(dǎo)航欄結(jié)構(gòu) 209
10.4.2 代碼實(shí)現(xiàn) 210
10.5 輪播圖 211
10.5.1 輪播圖結(jié)構(gòu) 211
10.5.2 代碼實(shí)現(xiàn) 212
10.6 關(guān)于我們模塊 214
10.6.1 關(guān)于我們模塊結(jié)構(gòu) 214
10.6.2 代碼實(shí)現(xiàn) 215
10.7 我們的優(yōu)勢(shì)模塊 216
10.7.1 我們的優(yōu)勢(shì)模塊結(jié)構(gòu) 216
10.7.2 代碼實(shí)現(xiàn) 217
10.8 我們的服務(wù)模塊 219
10.8.1 我們的服務(wù)模塊結(jié)構(gòu) 219
10.8.2 代碼實(shí)現(xiàn) 221
10.9 運(yùn)輸物流模塊 222
10.9.1 運(yùn)輸物流模塊結(jié)構(gòu) 222
10.9.2 代碼實(shí)現(xiàn) 223
10.10 最新資訊模塊 224
10.10.1 最新資訊模塊結(jié)構(gòu) 224
10.10.2 代碼實(shí)現(xiàn) 225
10.11 版尾 227
10.11.1 版尾結(jié)構(gòu) 227
10.11.2 代碼實(shí)現(xiàn) 228
10.12 項(xiàng)目總結(jié) 228
參考文獻(xiàn) 228