HTML5 + CSS3 Web 開發案例教程

温谦：

## 全栈工程师，前沿科技创始人，现从事企业大型软件系统的分析与开发工作，拥有20年的软件开发经验，主持并成功开发了多个复杂系统，项目实战经验丰富。

## 常销书作者，毕业于华中科技大学计算机专业，主编网页设计与软件开发相关领域图书共12本，图书编写经验颇丰，其中《HTML+CSS网页设计与布局从入门到精通》《网页设计与布局项目化教程（HTML+CSS+DIV）》等图书常销10余年，被百余所高校选作教材。

## 章名目錄

 

【第　一篇】 基礎篇

第　1章 Web前端開發基礎知識

第　2章 HTML5基礎

第3章　CSS3基礎

第4章　CSS3選擇器

 

【第二篇】　樣式篇

第5章　用CSS設置文字樣式

第6章　用CSS設置圖片效果

第7章　盒子模型

第8章　用CSS設置鏈接與導航菜單

第9章　用CSS設置表格樣式

第　10章 用CSS設置表單

 

【第三篇】　佈局篇

第　11章 經典div+CSS網頁佈局方法

第　12章 網格佈局

第　13章 彈性盒子佈局

第　14章 響應式佈局

 

【第四篇】　擴展篇

第　15章 變換、過渡與動畫

第　16章 前端CSS的工程化

第　17章 綜合實例：Web前端開發工作流程

 

 

##　詳細目錄

 

【第　一篇】 基礎篇

 

第　1章 Web前端開發基礎知識

1.1　基礎概念　2

1.2　網頁與HTML　4

1.3　Web標準：結構、表現與行為　4

1.3.1　標準的重要性　4

1.3.2　“Web標準”概述　5

1.4　初步理解網頁設計與開發的過程　6

1.4.1　基本任務與角色　7

1.4.2　明確網站定位　7

1.4.3　收集信息和素材　7

1.4.4　策劃欄目內容　8

1.4.5　設計頁面方案　8

1.4.6　製作頁面　8

1.4.7　實現後台功能　8

1.4.8　整合與測試網站　9

1.4.9　頁面設計相關技術的基礎知識　9

本章小結　11

習題1　11

 

第　2章 HTML5基礎

2.1　HTML5基礎知識　13

2.1.1　HTML文件結構　13

2.1.2　簡單的HTML實例　14

2.1.3　網頁源文件的獲取　17

2.2　實例：利用VS Code快速建立基本文件　19

2.2.1　創建新的空白文件　19

2.2.2　編寫基礎的HTML文件　20

2.3　文本標記　20

2.3.1　實現段落與段內換行（p和br標記）　20

2.3.2　設置標題（h1～h6標記）　22

2.3.3　使文字水平居中（center標記）　23

2.3.4　設置文字段落的縮進（blockquote標記）　24

2.4　HTML標記與HTML屬性　25

2.4.1　用align屬性控制段落的水平位置　25

2.4.2　用bgcolor屬性設置背景顏色　26

2.4.3　設置文字的特殊樣式　27

2.4.4　設置文字的字體、大小和顏色（font標記）　28

2.4.5　網頁中的特殊文字符號　29

2.5　在網頁中使用圖片（img標記）　30

2.5.1　網頁中的圖片格式　30

2.5.2　一個插入了圖片的簡單網頁　31

2.5.3　使用路徑　32

2.5.4　用alt屬性為圖片設置替換文本　34

2.6　再談HTML5　35

2.6.1　追根溯源　35

2.6.2　HTML5的優勢與特點　36

2.6.3　HTML5新增標記　37

2.7　實例：創建一個簡單的網頁　38

本章小結　39

習題2　39

 

第3章　CSS3基礎

3.1　入門知識　41

3.1.1　CSS標準　41

3.1.2　傳統HTML的缺點　42

3.1.3　CSS引入　43

3.1.4　如何編寫CSS　44

3.2　理解CSS規則　45

3.3　基本CSS選擇器　46

3.3.1　標記選擇器　46

3.3.2　類別選擇器　47

3.3.3　ID選擇器　50

3.4　在HTML中使用CSS的方法　51

3.4.1　行內樣式　51

3.4.2　內嵌式　52

3.4.3　鏈接式　52

3.4.4　導入樣式　53

3.4.5　各種方式的優先級問題　55

本章小結　57

習題3　57

 

第4章　CSS3選擇器

4.1　復合選擇器　59

4.1.1　交集選擇器　60

4.1.2　並集選擇器　61

4.1.3　後代選擇器　63

4.2　CSS的繼承和層疊特性　65

4.2.1　繼承關系　65

4.2.2　CSS繼承的運用　67

4.2.3　CSS的層疊特性　68

4.3　關系選擇器　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　結構偽類選擇器　75

4.6　偽元素選擇器　77

本章小結　78

習題4　78

 

【第二篇】　樣式篇

 

第5章　用CSS設置文字樣式

5.1　長度單位　81

5.1.1　相對類型　81

5.1.2　絕對類型　82

5.2　顏色定義　82

5.3　實例：通過文字樣式美化頁面　83

5.3.1　準備頁面　83

5.3.2　設置文字的字體　84

5.3.3　設置文字的傾斜效果　85

5.3.4　設置文字的加粗效果　86

5.3.5　英文字母大小寫轉換　87

5.3.6　控制文字的大小　87

5.3.7　設置文字的裝飾效果　89

5.4　實例：通過段落樣式美化頁面　89

5.4.1　設置段落首行縮進　89

5.4.2　設置字詞間距　91

5.4.3　設置段落內部的文字行高　91

5.4.4　設置段落之間的距離　92

5.4.5　控制文字的水平位置　93

5.4.6　設置文字與背景的顏色　94

5.4.7　設置文字的特效　94

本章小結　95

習題5　96

 

第6章　用CSS設置圖片效果

6.1　設置圖片邊框　97

6.1.1　基本屬性　97

6.1.2　為不同的邊框分別設置樣式　99

6.2　圖片縮放　100

6.3　圖文混排　101

6.3.1　文字環繞　101

6.3.2　設置圖片與文字的間距　102

6.4　實例：製作八大行星科普網頁　103

6.5　設置圖片與文字的對齊方式　106

6.5.1　橫向對齊　106

6.5.2　縱向對齊　107

本章小結　108

習題6　108

 

第7章　盒子模型

7.1　“盒子”與“模型”的概念探究　111

7.2　設置邊框（border）　112

7.2.1　設置邊框樣式（border-style）　113

7.2.2　屬性值的簡寫形式　113

7.3　設置內邊距（padding）　115

7.4　設置外邊距（margin）　116

7.5　盒子之間的關系　117

7.5.1　HTML與DOM　118

7.5.2　標準流　120

7.5.3　div標記與span標記　122

7.6　盒子在標準流中的定位原則　124

7.6.1　行內元素之間的水平外邊距　124

7.6.2　塊級元素之間的豎直外邊距　125

7.6.3　嵌套盒子之間的外邊距　126

7.6.4　margin屬性可以被設置為負數　127

7.7　實例：盒子模型計算思考題　128

7.8　盒子模型相關的常用樣式屬性　131

7.8.1　背景　131

7.8.2　圓角　136

7.8.3　陰影　138

7.8.4　漸變　139

本章小結　141

習題7　142

 

第8章　用CSS設置鏈接與導航菜單

8.1　超鏈接標記　144

8.2　豐富的超鏈接特效　146

8.3　創建按鈕式超鏈接　148

8.4　實例：製作熒光燈效果的菜單　149

8.4.1　HTML框架　149

8.4.2　設置容器的CSS樣式　150

8.4.3　設置菜單項的CSS樣式　151

8.5　控制鼠標指針　152

8.6　設置項目列表樣式　153

8.6.1　列表符號　153

8.6.2　圖片符號　155

8.7　實例：創建簡單的導航菜單　157

本章小結　160

習題8　160

 

第9章　用CSS設置表格樣式

9.1　控製表格　161

9.1.1　表格中的標記　161

9.1.2　設置表格的邊框　163

9.1.3　確定表格的寬度　166

9.1.4　合並單元格　166

9.1.5　其他與表格相關的標記　168

9.2　美化表格　169

9.2.1　搭建HTML結構　169

9.2.2　整體設置　170

9.2.3　設置單元格樣式　171

9.2.4　實現斑馬紋效果　172

9.2.5　設置列樣式　172

9.3　實例：製作日歷　173

9.3.1　搭建HTML結構　173

9.3.2　設置整體樣式和表頭樣式　174

9.3.3　設置日歷單元格樣式　176

本章小結　179

習題9　179

 

第　10章 用CSS設置表單

10.1　表單的用途和原理　180

10.2　表單輸入類型　181

10.2.1　文本輸入框　181

10.2.2　單選按鈕　182

10.2.3　復選按鈕　182

10.2.4　密碼輸入框　183

10.2.5　按鈕　183

10.2.6　多行文本框　184

10.2.7　下拉列表框和列表框　185

10.3　CSS與表單　186

10.4　實例：製作“數獨”游戲網頁　188

10.4.1　搭建基本表格　188

10.4.2　設置表格樣式　189

10.4.3　加入文本輸入框　191

10.4.4　設置文本輸入框的樣式　191

本章小結　193

習題10　193

 

【第三篇】　佈局篇

 

第　11章 經典div+CSS網頁佈局方法

11.1　向報紙學習排版　195

11.2　CSS排版觀念　197

11.2.1　兩列佈局　198

11.2.2　三列佈局　198

11.2.3　多列佈局　199

11.3　元素的浮動　200

11.3.1　浮動的方式　201

11.3.2　使用clear屬性清除浮動的影響　203

11.3.3　擴展盒子的高度　204

11.4　元素的定位　205

11.4.1　靜態定位（static）　206

11.4.2　相對定位（relative）　207

11.4.3　絕對定位（absolute）　209

11.4.4　固定定位（fixed）　211

11.5　z-index空間位置　211

11.6　製作經典兩列佈局　212

11.6.1　準備工作　212

11.6.2　絕對定位法　214

11.6.3　浮動定位法　216

本章小結　217

習題11　217

 

第　12章 網格佈局

12.1　基礎概念　219

12.1.1　網格容器和網格項　220

12.1.2　網格線　220

12.1.3　行、列、單元格和網格區域　220

12.2　準備代碼　220

12.3　劃分網格　222

12.4　放置網格項　223

12.4.1　使用網格區域名稱定位　224

12.4.2　使用網格線數字定位　225

12.4.3　使用網格線名稱定位　225

12.4.4　自動定位　226

12.5　設置網格項的對齊方式　227

12.6　設置行間隔和列間隔　229

12.7　實例：用網格實現經典三列佈局　231

12.8　實例：製作計算器　233

12.8.1　建立基礎的HTML結構　233

12.8.2　添加基礎樣式　234

12.8.3　使用網格佈局定位　236

12.8.4　調整細節　237

本章小結　238

習題12　238

 

第　13章 彈性盒子佈局

13.1　基礎概念　240

13.2　彈性容器　241

13.3　彈性的核心基礎　244

13.3.1　彈性三要素（flex-grow、flex-shrink和flex-basis屬性）　244

13.3.2　設置換行　246

13.3.3　實例：用彈性盒子實現Bootstrap的柵格系統　247

13.4　設置對齊方式　250

13.5　實例：用彈性盒子創建嵌套的留言佈局　254

13.5.1　搭建框架　255

13.5.2　用彈性盒子佈局　255

13.5.3　頭像放右側　256

13.5.4　實現佈局的嵌套　256

本章小結　257

習題13　258

 

第　14章 響應式佈局

14.1　響應式概述　259

14.2　彈性佈局　260

14.3　媒體查詢　262

14.3.1　實例：用網格佈局實現手機端頁面　263

14.3.2　斷點　265

14.4　實例：實現Bootstrap響應式柵格系統　266

14.4.1　建立基礎框架　266

14.4.2　適配小型設備　267

14.4.3　適配中型設備　268

14.4.4　適配大型設備　268

14.5　元視口標記　269

14.6　彈性媒體　271

14.7　實例：製作仿蘋果官網的響應式頁頭　271

14.7.1　搭建框架　272

14.7.2　適配電腦端　274

14.7.3　適配平板電腦端　279

14.7.4　適配手機端　279

本章小結　285

習題14　286

 

【第四篇】　擴展篇

 

第　15章 變換、過渡與動畫

15.1　變換　289

15.1.1　旋轉（rotate）　289

15.1.2　縮放（scale）　290

15.1.3　平移（translate）　291

15.1.4　傾斜（skew）　292

15.1.5　變換原點（transform-origin）　293

15.2　過渡　295

15.3　關鍵幀動畫　296

本章小結　299

習題15　299

 

第　16章 前端CSS的工程化

16.1　CSS預處理器Sass　300

16.1.1　嵌套寫法　301

16.1.2　定義變量　301

16.1.3　模塊系統　302

16.1.4　混入　303

16.1.5　繼承　305

16.2　使用webpack構建系統　305

16.2.1　安裝Node.js環境　306

16.2.2　準備項目文件　307

16.2.3　安裝webpack及其相關組件　308

16.2.4　預覽與調試　310

16.2.5　打包　311

本章小結　313

習題16　313

 

第　17章 綜合實例：Web前端開發工作流程

17.1　Web前端開發概述　314

17.2　實例概述　315

17.3　網站結構與頁面內容分析　316

17.4　HTML結構設計　318

17.5　原型設計　320

17.6　頁面方案設計　321

17.7　頁面製作　322

17.8　遵從Web標準的設計流程　324

本章小結　324

習題17　324