本書緊密圍繞前端開發(fā)工程師在工作中會(huì)遇到的實(shí)際問(wèn)題和相應(yīng)的解決方法與技術(shù)層層展開，全面介紹使用HTML5和CSS3進(jìn)行前端開發(fā)的知識(shí)內(nèi)容和實(shí)戰(zhàn)技巧。
本書共17章：第1～4章介紹了HTML5和CSS3的基礎(chǔ)知識(shí)；第5～10章介紹CSS3的盒子模型和應(yīng)用CSS3對(duì)各種網(wǎng)頁(yè)元素進(jìn)行樣式設(shè)計(jì)的方法；第11～14章介紹了幾種進(jìn)行頁(yè)面整體布局的方法，包括使用傳統(tǒng)div布局、CSS3引入的網(wǎng)格布局和彈性盒子布局，特別是在第14章介紹了響應(yīng)式布局的方法；第15章介紹了CSS3中引入的過(guò)渡與動(dòng)畫等知識(shí)；第16章介紹了前端開發(fā)工程化方面的知識(shí)；第17章用一個(gè)綜合實(shí)例完整地講述了一個(gè)中型網(wǎng)站的開發(fā)全過(guò)程。
全書遵循Web標(biāo)準(zhǔn)，強(qiáng)調(diào)“表現(xiàn)”與“內(nèi)容”的分離，規(guī)范、全面、系統(tǒng)地介紹了網(wǎng)頁(yè)設(shè)計(jì)與制作的方法和技巧。書中給出了大量詳細(xì)的實(shí)例，并對(duì)實(shí)例進(jìn)行了分析，便于讀者在理解的基礎(chǔ)上直接修改后使用。本書作者具備豐富的實(shí)踐技術(shù)和教育培訓(xùn)經(jīng)驗(yàn)，行文細(xì)膩，對(duì)每一個(gè)技術(shù)細(xì)節(jié)和每一個(gè)實(shí)際工作中可能遇到的難點(diǎn)與錯(cuò)誤，都進(jìn)行了詳細(xì)的說(shuō)明和提示，大大降低了讀者的學(xué)習(xí)門檻。
本書可以作為高等院校相關(guān)專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)與制作、前端開發(fā)等課程的教材，也可供網(wǎng)頁(yè)設(shè)計(jì)、制作和開發(fā)人員參考使用。讀者可以在學(xué)習(xí)并掌握本書所講內(nèi)容之后做出精美的網(wǎng)頁(yè)。
叢書特色：
（1）編排豐富實(shí)戰(zhàn)案例，可掃前言二維碼進(jìn)行快速預(yù)覽。
（2）提供在線實(shí)訓(xùn)平臺(tái)（http://code.artech.cn），支撐隨時(shí)開展全書案例實(shí)戰(zhàn)演練。
（3）開源分階實(shí)戰(zhàn)項(xiàng)目（http://www.geekfun.website），助力不同層次讀者（學(xué)生）獲取企業(yè)實(shí)戰(zhàn)項(xiàng)目開發(fā)能力。
（4）配套多類教輔資源，包含文本類、視頻類（微課視頻）、案例類、平臺(tái)類等。
（5）建立教師服務(wù)與交流群（QQ群號(hào)：368845661），立體化服務(wù)院校教師教學(xué)。
特別說(shuō)明：
為了使本書中的案例作用最大化，我們專門為其提供了“在線實(shí)訓(xùn)平臺(tái)”（http://code.artech.cn）。該平臺(tái)的具體功能介紹如下。
【在線實(shí)訓(xùn)平臺(tái)】功能：
（1）教師可以利用該平臺(tái)，在上課過(guò)程中直接演練（展示）書中的所有案例，并可通過(guò)實(shí)時(shí)的運(yùn)行結(jié)果同步講解相關(guān)知識(shí)點(diǎn)和技能。
（2）師生可以通過(guò)該平臺(tái)觀看全書導(dǎo)學(xué)、原理講解、案例講解等視頻，配合實(shí)操演練，隨時(shí)隨地進(jìn)行學(xué)習(xí)，支持開展線上線下混合式教學(xué)。
（3）學(xué)生可以在課前或課后通過(guò)該平臺(tái)，實(shí)操練習(xí)書中的所有案例，實(shí)時(shí)查看代碼運(yùn)行結(jié)果，而且所有案例代碼均支持復(fù)制與還原。
（4）學(xué)生還可以通過(guò)該平臺(tái)實(shí)操練習(xí)各章課后的實(shí)操題，并可通過(guò)微信分享功能，將實(shí)操的結(jié)果分享給其他人，如分享給老師進(jìn)行審閱。
說(shuō)明：掃描“從書序中的二維碼”可以了解該平臺(tái)的具體使用方法，教師也可通過(guò)“教師用書指導(dǎo)手冊(cè)”了解該平臺(tái)的具體操作步驟。
溫謙：
## 全棧工程師，前沿科技創(chuàng)始人，現(xiàn)從事企業(yè)大型軟件系統(tǒng)的分析與開發(fā)工作，擁有超20年的軟件開發(fā)經(jīng)驗(yàn)，主持并成功開發(fā)了多個(gè)復(fù)雜系統(tǒng)，項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)豐富。
## 常銷書作者，畢業(yè)于華中科技大學(xué)計(jì)算機(jī)專業(yè)，主編網(wǎng)頁(yè)設(shè)計(jì)與軟件開發(fā)相關(guān)領(lǐng)域圖書共12本，圖書編寫經(jīng)驗(yàn)頗豐，其中《HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與布局從入門到精通》《網(wǎng)頁(yè)設(shè)計(jì)與布局項(xiàng)目化教程（HTML+CSS+DIV）》等圖書常銷10余年，被百余所高校選作教材。
## 章名目錄
【第 一篇】 基礎(chǔ)篇
第 1章 Web前端開發(fā)基礎(chǔ)知識(shí)
第 2章 HTML5基礎(chǔ)
第3章 CSS3基礎(chǔ)
第4章 CSS3選擇器
【第二篇】 樣式篇
第5章 用CSS設(shè)置文字樣式
第6章 用CSS設(shè)置圖片效果
第7章 盒子模型
第8章 用CSS設(shè)置鏈接與導(dǎo)航菜單
第9章 用CSS設(shè)置表格樣式
第 10章 用CSS設(shè)置表單
【第三篇】 布局篇
第 11章 經(jīng)典div+CSS網(wǎng)頁(yè)布局方法
第 12章 網(wǎng)格布局
第 13章 彈性盒子布局
第 14章 響應(yīng)式布局
【第四篇】 擴(kuò)展篇
第 15章 變換、過(guò)渡與動(dòng)畫
第 16章 前端CSS的工程化
第 17章 綜合實(shí)例：Web前端開發(fā)工作流程
## 詳細(xì)目錄
【第 一篇】 基礎(chǔ)篇
第 1章 Web前端開發(fā)基礎(chǔ)知識(shí)
1.1 基礎(chǔ)概念 2
1.2 網(wǎng)頁(yè)與HTML 4
1.3 Web標(biāo)準(zhǔn)：結(jié)構(gòu)、表現(xiàn)與行為 4
1.3.1 標(biāo)準(zhǔn)的重要性 4
1.3.2 “Web標(biāo)準(zhǔn)”概述 5
1.4 初步理解網(wǎng)頁(yè)設(shè)計(jì)與開發(fā)的過(guò)程 6
1.4.1 基本任務(wù)與角色 7
1.4.2 明確網(wǎng)站定位 7
1.4.3 收集信息和素材 7
1.4.4 策劃?rùn)谀績(jī)?nèi)容 8
1.4.5 設(shè)計(jì)頁(yè)面方案 8
1.4.6 制作頁(yè)面 8
1.4.7 實(shí)現(xiàn)后臺(tái)功能 8
1.4.8 整合與測(cè)試網(wǎng)站 9
1.4.9 頁(yè)面設(shè)計(jì)相關(guān)技術(shù)的基礎(chǔ)知識(shí) 9
本章小結(jié) 11
習(xí)題1 11
第 2章 HTML5基礎(chǔ)
2.1 HTML5基礎(chǔ)知識(shí) 13
2.1.1 HTML文件結(jié)構(gòu) 13
2.1.2 簡(jiǎn)單的HTML實(shí)例 14
2.1.3 網(wǎng)頁(yè)源文件的獲取 17
2.2 實(shí)例：利用VS Code快速建立基本文件 19
2.2.1 創(chuàng)建新的空白文件 19
2.2.2 編寫基礎(chǔ)的HTML文件 20
2.3 文本標(biāo)記 20
2.3.1 實(shí)現(xiàn)段落與段內(nèi)換行（p和br標(biāo)記） 20
2.3.2 設(shè)置標(biāo)題（h1～h6標(biāo)記） 22
2.3.3 使文字水平居中（center標(biāo)記） 23
2.3.4 設(shè)置文字段落的縮進(jìn)（blockquote標(biāo)記） 24
2.4 HTML標(biāo)記與HTML屬性 25
2.4.1 用align屬性控制段落的水平位置 25
2.4.2 用bgcolor屬性設(shè)置背景顏色 26
2.4.3 設(shè)置文字的特殊樣式 27
2.4.4 設(shè)置文字的字體、大小和顏色（font標(biāo)記） 28
2.4.5 網(wǎng)頁(yè)中的特殊文字符號(hào) 29
2.5 在網(wǎng)頁(yè)中使用圖片（img標(biāo)記） 30
2.5.1 網(wǎng)頁(yè)中的圖片格式 30
2.5.2 一個(gè)插入了圖片的簡(jiǎn)單網(wǎng)頁(yè) 31
2.5.3 使用路徑 32
2.5.4 用alt屬性為圖片設(shè)置替換文本 34
2.6 再談HTML5 35
2.6.1 追根溯源 35
2.6.2 HTML5的優(yōu)勢(shì)與特點(diǎn) 36
2.6.3 HTML5新增標(biāo)記 37
2.7 實(shí)例：創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)頁(yè) 38
本章小結(jié) 39
習(xí)題2 39
第3章 CSS3基礎(chǔ)
3.1 入門知識(shí) 41
3.1.1 CSS標(biāo)準(zhǔn) 41
3.1.2 傳統(tǒng)HTML的缺點(diǎn) 42
3.1.3 CSS引入 43
3.1.4 如何編寫CSS 44
3.2 理解CSS規(guī)則 45
3.3 基本CSS選擇器 46
3.3.1 標(biāo)記選擇器 46
3.3.2 類別選擇器 47
3.3.3 ID選擇器 50
3.4 在HTML中使用CSS的方法 51
3.4.1 行內(nèi)樣式 51
3.4.2 內(nèi)嵌式 52
3.4.3 鏈接式 52
3.4.4 導(dǎo)入樣式 53
3.4.5 各種方式的優(yōu)先級(jí)問(wèn)題 55
本章小結(jié) 57
習(xí)題3 57
第4章 CSS3選擇器
4.1 復(fù)合選擇器 59
4.1.1 交集選擇器 60
4.1.2 并集選擇器 61
4.1.3 后代選擇器 63
4.2 CSS的繼承和層疊特性 65
4.2.1 繼承關(guān)系 65
4.2.2 CSS繼承的運(yùn)用 67
4.2.3 CSS的層疊特性 68
4.3 關(guān)系選擇器 70
4.3.1 后代選擇器 71
4.3.2 子元素選擇器 72
4.3.3 相鄰兄弟選擇器 72
4.3.4 相鄰兄弟組選擇器 73
4.4 屬性選擇器 73
4.4.1 屬性存在選擇器 74
4.4.2 屬性等于選擇器 74
4.4.3 屬性包含選擇器 75
4.5 結(jié)構(gòu)偽類選擇器 75
4.6 偽元素選擇器 77
本章小結(jié) 78
習(xí)題4 78
【第二篇】 樣式篇
第5章 用CSS設(shè)置文字樣式
5.1 長(zhǎng)度單位 81
5.1.1 相對(duì)類型 81
5.1.2 絕對(duì)類型 82
5.2 顏色定義 82
5.3 實(shí)例：通過(guò)文字樣式美化頁(yè)面 83
5.3.1 準(zhǔn)備頁(yè)面 83
5.3.2 設(shè)置文字的字體 84
5.3.3 設(shè)置文字的傾斜效果 85
5.3.4 設(shè)置文字的加粗效果 86
5.3.5 英文字母大小寫轉(zhuǎn)換 87
5.3.6 控制文字的大小 87
5.3.7 設(shè)置文字的裝飾效果 89
5.4 實(shí)例：通過(guò)段落樣式美化頁(yè)面 89
5.4.1 設(shè)置段落首行縮進(jìn) 89
5.4.2 設(shè)置字詞間距 91
5.4.3 設(shè)置段落內(nèi)部的文字行高 91
5.4.4 設(shè)置段落之間的距離 92
5.4.5 控制文字的水平位置 93
5.4.6 設(shè)置文字與背景的顏色 94
5.4.7 設(shè)置文字的特效 94
本章小結(jié) 95
習(xí)題5 96
第6章 用CSS設(shè)置圖片效果
6.1 設(shè)置圖片邊框 97
6.1.1 基本屬性 97
6.1.2 為不同的邊框分別設(shè)置樣式 99
6.2 圖片縮放 100
6.3 圖文混排 101
6.3.1 文字環(huán)繞 101
6.3.2 設(shè)置圖片與文字的間距 102
6.4 實(shí)例：制作八大行星科普網(wǎng)頁(yè) 103
6.5 設(shè)置圖片與文字的對(duì)齊方式 106
6.5.1 橫向?qū)R 106
6.5.2 縱向?qū)R 107
本章小結(jié) 108
習(xí)題6 108
第7章 盒子模型
7.1 “盒子”與“模型”的概念探究 111
7.2 設(shè)置邊框（border） 112
7.2.1 設(shè)置邊框樣式（border-style） 113
7.2.2 屬性值的簡(jiǎn)寫形式 113
7.3 設(shè)置內(nèi)邊距（padding） 115
7.4 設(shè)置外邊距（margin） 116
7.5 盒子之間的關(guān)系 117
7.5.1 HTML與DOM 118
7.5.2 標(biāo)準(zhǔn)流 120
7.5.3 div標(biāo)記與span標(biāo)記 122
7.6 盒子在標(biāo)準(zhǔn)流中的定位原則 124
7.6.1 行內(nèi)元素之間的水平外邊距 124
7.6.2 塊級(jí)元素之間的豎直外邊距 125
7.6.3 嵌套盒子之間的外邊距 126
7.6.4 margin屬性可以被設(shè)置為負(fù)數(shù) 127
7.7 實(shí)例：盒子模型計(jì)算思考題 128
7.8 盒子模型相關(guān)的常用樣式屬性 131
7.8.1 背景 131
7.8.2 圓角 136
7.8.3 陰影 138
7.8.4 漸變 139
本章小結(jié) 141
習(xí)題7 142
第8章 用CSS設(shè)置鏈接與導(dǎo)航菜單
8.1 超鏈接標(biāo)記 144
8.2 豐富的超鏈接特效 146
8.3 創(chuàng)建按鈕式超鏈接 148
8.4 實(shí)例：制作熒光燈效果的菜單 149
8.4.1 HTML框架 149
8.4.2 設(shè)置容器的CSS樣式 150
8.4.3 設(shè)置菜單項(xiàng)的CSS樣式 151
8.5 控制鼠標(biāo)指針 152
8.6 設(shè)置項(xiàng)目列表樣式 153
8.6.1 列表符號(hào) 153
8.6.2 圖片符號(hào) 155
8.7 實(shí)例：創(chuàng)建簡(jiǎn)單的導(dǎo)航菜單 157
本章小結(jié) 160
習(xí)題8 160
第9章 用CSS設(shè)置表格樣式
9.1 控制表格 161
9.1.1 表格中的標(biāo)記 161
9.1.2 設(shè)置表格的邊框 163
9.1.3 確定表格的寬度 166
9.1.4 合并單元格 166
9.1.5 其他與表格相關(guān)的標(biāo)記 168
9.2 美化表格 169
9.2.1 搭建HTML結(jié)構(gòu) 169
9.2.2 整體設(shè)置 170
9.2.3 設(shè)置單元格樣式 171
9.2.4 實(shí)現(xiàn)斑馬紋效果 172
9.2.5 設(shè)置列樣式 172
9.3 實(shí)例：制作日歷 173
9.3.1 搭建HTML結(jié)構(gòu) 173
9.3.2 設(shè)置整體樣式和表頭樣式 174
9.3.3 設(shè)置日歷單元格樣式 176
本章小結(jié) 179
習(xí)題9 179
第 10章 用CSS設(shè)置表單
10.1 表單的用途和原理 180
10.2 表單輸入類型 181
10.2.1 文本輸入框 181
10.2.2 單選按鈕 182
10.2.3 復(fù)選按鈕 182
10.2.4 密碼輸入框 183
10.2.5 按鈕 183
10.2.6 多行文本框 184
10.2.7 下拉列表框和列表框 185
10.3 CSS與表單 186
10.4 實(shí)例：制作“數(shù)獨(dú)”游戲網(wǎng)頁(yè) 188
10.4.1 搭建基本表格 188
10.4.2 設(shè)置表格樣式 189
10.4.3 加入文本輸入框 191
10.4.4 設(shè)置文本輸入框的樣式 191
本章小結(jié) 193
習(xí)題10 193
【第三篇】 布局篇
第 11章 經(jīng)典div+CSS網(wǎng)頁(yè)布局方法
11.1 向報(bào)紙學(xué)習(xí)排版 195
11.2 CSS排版觀念 197
11.2.1 兩列布局 198
11.2.2 三列布局 198
11.2.3 多列布局 199
11.3 元素的浮動(dòng) 200
11.3.1 浮動(dòng)的方式 201
11.3.2 使用clear屬性清除浮動(dòng)的影響 203
11.3.3 擴(kuò)展盒子的高度 204
11.4 元素的定位 205
11.4.1 靜態(tài)定位（static） 206
11.4.2 相對(duì)定位（relative） 207
11.4.3 絕對(duì)定位（absolute） 209
11.4.4 固定定位（fixed） 211
11.5 z-index空間位置 211
11.6 制作經(jīng)典兩列布局 212
11.6.1 準(zhǔn)備工作 212
11.6.2 絕對(duì)定位法 214
11.6.3 浮動(dòng)定位法 216
本章小結(jié) 217
習(xí)題11 217
第 12章 網(wǎng)格布局
12.1 基礎(chǔ)概念 219
12.1.1 網(wǎng)格容器和網(wǎng)格項(xiàng) 220
12.1.2 網(wǎng)格線 220
12.1.3 行、列、單元格和網(wǎng)格區(qū)域 220
12.2 準(zhǔn)備代碼 220
12.3 劃分網(wǎng)格 222
12.4 放置網(wǎng)格項(xiàng) 223
12.4.1 使用網(wǎng)格區(qū)域名稱定位 224
12.4.2 使用網(wǎng)格線數(shù)字定位 225
12.4.3 使用網(wǎng)格線名稱定位 225
12.4.4 自動(dòng)定位 226
12.5 設(shè)置網(wǎng)格項(xiàng)的對(duì)齊方式 227
12.6 設(shè)置行間隔和列間隔 229
12.7 實(shí)例：用網(wǎng)格實(shí)現(xiàn)經(jīng)典三列布局 231
12.8 實(shí)例：制作計(jì)算器 233
12.8.1 建立基礎(chǔ)的HTML結(jié)構(gòu) 233
12.8.2 添加基礎(chǔ)樣式 234
12.8.3 使用網(wǎng)格布局定位 236
12.8.4 調(diào)整細(xì)節(jié) 237
本章小結(jié) 238
習(xí)題12 238
第 13章 彈性盒子布局
13.1 基礎(chǔ)概念 240
13.2 彈性容器 241
13.3 彈性的核心基礎(chǔ) 244
13.3.1 彈性三要素（flex-grow、flex-shrink和flex-basis屬性） 244
13.3.2 設(shè)置換行 246
13.3.3 實(shí)例：用彈性盒子實(shí)現(xiàn)Bootstrap的柵格系統(tǒng) 247
13.4 設(shè)置對(duì)齊方式 250
13.5 實(shí)例：用彈性盒子創(chuàng)建嵌套的留言布局 254
13.5.1 搭建框架 255
13.5.2 用彈性盒子布局 255
13.5.3 頭像放右側(cè) 256
13.5.4 實(shí)現(xiàn)布局的嵌套 256
本章小結(jié) 257
習(xí)題13 258
第 14章 響應(yīng)式布局
14.1 響應(yīng)式概述 259
14.2 彈性布局 260
14.3 媒體查詢 262
14.3.1 實(shí)例：用網(wǎng)格布局實(shí)現(xiàn)手機(jī)端頁(yè)面 263
14.3.2 斷點(diǎn) 265
14.4 實(shí)例：實(shí)現(xiàn)Bootstrap響應(yīng)式柵格系統(tǒng) 266
14.4.1 建立基礎(chǔ)框架 266
14.4.2 適配小型設(shè)備 267
14.4.3 適配中型設(shè)備 268
14.4.4 適配大型設(shè)備 268
14.5 元視口標(biāo)記 269
14.6 彈性媒體 271
14.7 實(shí)例：制作仿蘋果官網(wǎng)的響應(yīng)式頁(yè)頭 271
14.7.1 搭建框架 272
14.7.2 適配計(jì)算機(jī)端 274
14.7.3 適配平板電腦端 279
14.7.4 適配手機(jī)端 279
本章小結(jié) 285
習(xí)題14 286
【第四篇】 擴(kuò)展篇
第 15章 變換、過(guò)渡與動(dòng)畫
15.1 變換 289
15.1.1 旋轉(zhuǎn)（rotate） 289
15.1.2 縮放（scale） 290
15.1.3 平移（translate） 291
15.1.4 傾斜（skew） 292
15.1.5 變換原點(diǎn)（transform-origin） 293
15.2 過(guò)渡 295
15.3 關(guān)鍵幀動(dòng)畫 296
本章小結(jié) 299
習(xí)題15 299
第 16章 前端CSS的工程化
16.1 CSS預(yù)處理器Sass 300
16.1.1 嵌套寫法 301
16.1.2 定義變量 301
16.1.3 模塊系統(tǒng) 302
16.1.4 混入 303
16.1.5 繼承 305
16.2 使用webpack構(gòu)建系統(tǒng) 305
16.2.1 安裝Node.js環(huán)境 306
16.2.2 準(zhǔn)備項(xiàng)目文件 307
16.2.3 安裝webpack及其相關(guān)組件 308
16.2.4 預(yù)覽與調(diào)試 310
16.2.5 打包 311
本章小結(jié) 313
習(xí)題16 313
第 17章 綜合實(shí)例：Web前端開發(fā)工作流程
17.1 Web前端開發(fā)概述 314
17.2 實(shí)例概述 315
17.3 網(wǎng)站結(jié)構(gòu)與頁(yè)面內(nèi)容分析 316
17.4 HTML結(jié)構(gòu)設(shè)計(jì) 318
17.5 原型設(shè)計(jì) 320
17.6 頁(yè)面方案設(shè)計(jì) 321
17.7 頁(yè)面制作 322
17.8 遵從Web標(biāo)準(zhǔn)的設(shè)計(jì)流程 324
本章小結(jié) 324
習(xí)題17 324
書單推薦
