1. 本書采用純項(xiàng)目式教學(xué)，通過18個項(xiàng)目，帶領(lǐng)讀者實(shí)際動手操作，打破以往的知識結(jié)構(gòu)，以完成項(xiàng)目為目標(biāo)，讓讀者學(xué)習(xí)后留下的是項(xiàng)目經(jīng)驗(yàn)而非孤零零的知識點(diǎn)；
2. 本書與市場上銷售的其他前端教材*大的區(qū)別在于，本書引入了一個重要概念——響應(yīng)式Web設(shè)計(jì)（也叫響應(yīng)式布局或響應(yīng)式頁面）。響應(yīng)式Web設(shè)計(jì)是隨著移動互聯(lián)網(wǎng)的發(fā)展孕育而生的重要技術(shù)，其核心思想是制作一個網(wǎng)站可供多種不同終端同時使用；
3. Bootstrap開發(fā)工具的引入。Bootstrap是一種簡潔、直觀、強(qiáng)悍的Web前端開發(fā)框架，它包含了HTML、CSS、Javascript以及jQuery的，各種元素、組件和插件，主要用于開發(fā)響應(yīng)式布局頁面和移動設(shè)備優(yōu)先的Web項(xiàng)目。
4. 本書提供免費(fèi)教學(xué)資源，包括8 個精美教學(xué)PPT、13 個教材補(bǔ)充項(xiàng)目、1000 道測試題、長達(dá)40 小時的教學(xué)視頻等。

內(nèi)容提要

Web前端開發(fā)在近年來迅速崛起，本書從Web開發(fā)實(shí)際應(yīng)用的角度，以項(xiàng)目式的教學(xué)方式講解HTML5、CSS3、響應(yīng)式設(shè)計(jì)等新技術(shù)。本書共分為8個單元，把Web開發(fā)項(xiàng)目按文本、圖文、表單、畫布、音頻視頻、響應(yīng)式進(jìn)行分類教學(xué)。最后通過Bootstrap工具開發(fā)來整合HTML5、CSS3和響應(yīng)式開發(fā)的知識，進(jìn)行快捷開發(fā)。本書優(yōu)選了18個項(xiàng)目，從【項(xiàng)目描述】→【前導(dǎo)知識】→【項(xiàng)目分析】→【代碼實(shí)現(xiàn)】→【項(xiàng)目總結(jié)】幾個方面進(jìn)行了全方面的講解，讓讀者可以真正做到既學(xué)到知識又熟練應(yīng)用。
本書配套教學(xué)PPT、題庫、教學(xué)視頻、源代碼、教學(xué)案例、教學(xué)設(shè)計(jì)等資源。
本書既可作為高等院校本、?？葡嚓P(guān)專業(yè)的網(wǎng)頁設(shè)計(jì)與制作課程的教材，也可作為網(wǎng)頁平面設(shè)計(jì)的培訓(xùn)教材，是一本適合網(wǎng)頁制作、網(wǎng)站開發(fā)、網(wǎng)頁編程等行業(yè)人員閱讀與參考的讀物。

黑馬程序員，傳智播客旗下高端IT教育品牌，成立于2006年，它是由中國Java培訓(xùn)**人張孝祥老師發(fā)起，聯(lián)合全球*大的中文IT社區(qū)CSDN、中關(guān)村軟件園共同創(chuàng)辦的一家專業(yè)教育機(jī)構(gòu)。辦學(xué)至今，我們一直堅(jiān)守著“為千萬人少走彎路而著書，為中華軟件之崛起而講課”的辦學(xué)理念。

單元1  響應(yīng)式和HTML5+CSS3初體驗(yàn) 1
【教學(xué)導(dǎo)航】　2
響應(yīng)式Web設(shè)計(jì)簡介　2
【項(xiàng)目1-1】使用HTML5+CSS3
繪制HTML5的logo　4
【項(xiàng)目描述】　4
【前導(dǎo)知識】　4
HTML5的新特性　4
HTML5的基本語法　5
CSS3的新特性　6
如何在HTML中引入樣式表　6
CSS3與瀏覽器　7
【項(xiàng)目分析】　7
【代碼實(shí)現(xiàn)】　7
【項(xiàng)目總結(jié)】　12
【項(xiàng)目1-2】構(gòu)建移動版旅游網(wǎng)站
頁面　13
【項(xiàng)目描述】　13
【前導(dǎo)知識】　14
HTML5語義化結(jié)構(gòu)標(biāo)簽　14
CSS選擇器　15
盒子模型　17
CSS的浮動與定位　18
【項(xiàng)目分析】　21
【代碼實(shí)現(xiàn)】　22
【項(xiàng)目總結(jié)】　28

單元2　文本類網(wǎng)頁設(shè)計(jì)　29
【教學(xué)導(dǎo)航】　30
【項(xiàng)目2-1】電子雜志頁面　30
【項(xiàng)目描述】　30
【前導(dǎo)知識】　31
HTML5中常用的文本標(biāo)簽　31
CSS的字體樣式屬性　31
多列布局　33
【項(xiàng)目分析】　34
【代碼實(shí)現(xiàn)】　35
【項(xiàng)目總結(jié)】　37
【項(xiàng)目2-2】軟文推廣頁面　38
【項(xiàng)目描述】　38
【前導(dǎo)知識】　38
CSS的文本外觀屬性　38
CSS的層疊性、繼承性和重要性　40
CSS的優(yōu)先級　41
Web字體圖標(biāo)-font-awesome的應(yīng)用　42
【項(xiàng)目分析】　44
【代碼實(shí)現(xiàn)】　45
【項(xiàng)目總結(jié)】　49
【項(xiàng)目2-3】手機(jī)郵箱導(dǎo)航頁面　49
【項(xiàng)目描述】　49
【前導(dǎo)知識】　49
CSS鏈接屬性　49
CSS導(dǎo)航欄　50
【項(xiàng)目分析】　50
【代碼實(shí)現(xiàn)】　51
【項(xiàng)目總結(jié)】　55

單元3　圖文展示網(wǎng)頁設(shè)計(jì)　56
【教學(xué)導(dǎo)航】　57
【項(xiàng)目3-1】黑馬書城　57
【項(xiàng)目描述】　57
【前導(dǎo)知識】　58
HTML5常用圖像標(biāo)簽　58
CSS背景設(shè)置　59
CSS陰影和漸變　59
【項(xiàng)目分析】　63
【代碼實(shí)現(xiàn)】　64
【項(xiàng)目總結(jié)】　68
【項(xiàng)目3-2】多肉植物商城　68
【項(xiàng)目描述】　68
【前導(dǎo)知識】　68
CSS3的圓角邊框　68
CSS3的過渡（CSS3　transition）　70
CSS3變形（CSS3　transform）　72
【項(xiàng)目分析】　76
【代碼實(shí)現(xiàn)】　78
【項(xiàng)目總結(jié)】　83
【項(xiàng)目3-3】搖晃的桃子　83
【項(xiàng)目描述】　83
【前導(dǎo)知識】　83
CSS3動畫（CSS3　animations）　83
CSS精靈技術(shù)（CSS　Sprites）　85
【項(xiàng)目分析】　87
【代碼實(shí)現(xiàn)】　88
【項(xiàng)目總結(jié)】　91

單元4　HTML5表單的應(yīng)用　93
【教學(xué)導(dǎo)航】　94
【項(xiàng)目4-1】移動版登錄頁面　94
【項(xiàng)目描述】　94
【前導(dǎo)知識】　95
介紹表單　95
HTML5　標(biāo)簽　96
【項(xiàng)目分析】　99
【代碼實(shí)現(xiàn)】　100
【項(xiàng)目總結(jié)】　102
【項(xiàng)目4-2】用戶注冊頁面　103
【項(xiàng)目描述】　103
【前導(dǎo)知識】　104
其他表單標(biāo)簽　104
HTML5表單驗(yàn)證　108
【項(xiàng)目分析】　109
【代碼實(shí)現(xiàn)】　110
【項(xiàng)目總結(jié)】　114

單元5　HTML5畫布　115
【教學(xué)導(dǎo)航】　116
【項(xiàng)目5-1】網(wǎng)頁涂鴉板　116
【項(xiàng)目描述】　116
【前導(dǎo)知識】　116
JavaScript的那些事　116
初識canvas　123
【項(xiàng)目分析】　125
【代碼實(shí)現(xiàn)】　126
【項(xiàng)目總結(jié)】　127
【項(xiàng)目5-2】發(fā)紅包才能看的
照片　128
【項(xiàng)目描述】　128
【前導(dǎo)知識】　129
canvas繪制矩形和清除矩形　129
canvas繪制圓形　130
canvas　繪制圖片　131
canvas中的其他方法　132
【項(xiàng)目分析】　133
【代碼實(shí)現(xiàn)】　134
【項(xiàng)目總結(jié)】　137

單元6　音頻與視頻　138
【教學(xué)導(dǎo)航】　139
【項(xiàng)目6-1】視頻播放器　139
【項(xiàng)目描述】　139
【前導(dǎo)知識】　139

標(biāo)簽的使用　139
HTML　DOM Video對象　143
JavaScript運(yùn)算符和if條件語句　145
【項(xiàng)目分析】　147
【代碼實(shí)現(xiàn)】　149
【項(xiàng)目總結(jié)】　150
【項(xiàng)目6-2】HTML5　Web
鋼琴　151
【項(xiàng)目描述】　151
【前導(dǎo)知識】　151
標(biāo)簽的使用　151
HTML　DOM Audio對象　153
JavaScript循環(huán)語句　155
【項(xiàng)目分析】　156
【代碼實(shí)現(xiàn)】　157
【項(xiàng)目總結(jié)】　160
【項(xiàng)目6-3】音樂播放器　160
【項(xiàng)目描述】　160
【項(xiàng)目分析】　161
【代碼實(shí)現(xiàn)】　162
【項(xiàng)目總結(jié)】　168

單元7　響應(yīng)式Web設(shè)計(jì)　169
【教學(xué)導(dǎo)航】　170
【項(xiàng)目7-1】第一個響應(yīng)式
網(wǎng)站　170
【項(xiàng)目描述】　170
【前導(dǎo)知識】　171
關(guān)于視口　171
媒體查詢　172
百分比布局　175
【項(xiàng)目分析】　176
【代碼實(shí)現(xiàn)】　177
【項(xiàng)目總結(jié)】　187
【項(xiàng)目7-2】社交網(wǎng)站個人信息
頁面　187
【項(xiàng)目描述】　187
【前導(dǎo)知識】　188
響應(yīng)式柵格系統(tǒng)　188
彈性盒布局　190
【項(xiàng)目分析】　196
【代碼實(shí)現(xiàn)】　197
【項(xiàng)目總結(jié)】　205

單元8　響應(yīng)式設(shè)計(jì)神器—
Bootstrap　206
【教學(xué)導(dǎo)航】　207
【項(xiàng)目8】Bootstrap餐飲類網(wǎng)站
首頁　207
【項(xiàng)目描述】　207
【任務(wù)1-完成網(wǎng)頁header部分】　208
【任務(wù)2-完成網(wǎng)頁搜索模塊】　219
【任務(wù)3-完成熱賣商品模塊】　229
【任務(wù)4-完成特色推薦模塊】　235
【任務(wù)5-完成輪播廣告模塊】　243
【任務(wù)6-整合所有模塊，完成footer
部分】　250
附錄1　HTML5新增標(biāo)簽和廢除
標(biāo)簽　264
附錄2　CSS3新增屬性　267
附錄3　CSS3中需要加瀏覽器
私有前綴的屬性　281