## 章名目錄 【第 一篇】 基礎(chǔ)篇 第 1章　Web前端開(kāi)發(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)畫(huà) 第 16章　前端CSS的工程化 第 17章　綜合實(shí)例：Web前端開(kāi)發(fā)工作流程 ## 詳細(xì)目錄 【第 一篇】 基礎(chǔ)篇 第 1章　Web前端開(kāi)發(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ì)與開(kāi)發(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 編寫(xiě)基礎(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 入門(mén)知識(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 如何編寫(xiě)CSS　44 3.2 理解CSS規(guī)則　45 3.3 基本CSS選擇器　46 3.3.1 標(biāo)記選擇器　46 3.3.2 類(lèi)別選擇器　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)偽類(lèi)選擇器　75 4.6 偽元素選擇器　77 本章小結(jié)　78 習(xí)題4　78 【第二篇】 樣式篇 第5章　用CSS設(shè)置文字樣式 5.1 長(zhǎng)度單位　81 5.1.1 相對(duì)類(lèi)型　81 5.1.2 絕對(duì)類(lèi)型　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 英文字母大小寫(xiě)轉(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ū)�齊　106 6.5.2 縱向?qū)�齊　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)寫(xiě)形式　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 表單輸入類(lèi)型　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)格線(xiàn)　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ū)域名稱(chēng)定位　224 12.4.2 使用網(wǎng)格線(xiàn)數(shù)字定位　225 12.4.3 使用網(wǎng)格線(xiàn)名稱(chē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 媒體查詢(xún)　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í)例：制作仿蘋(píng)果官網(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)畫(huà) 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)畫(huà)　296 本章小結(jié)　299 習(xí)題15　299 第 16章　前端CSS的工程化 16.1 CSS預(yù)處理器Sass　300 16.1.1 嵌套寫(xiě)法　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前端開(kāi)發(fā)工作流程 17.1 Web前端開(kāi)發(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