新書速覽-HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版

HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》

本書內(nèi)容

《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》秉承“思政引領(lǐng)，立德樹人”的教育理念，自然融入多維度、深層次的思政元素，全面對標(biāo)企業(yè)和行業(yè)需求；引入現(xiàn)代Web前端開發(fā)的核心技術(shù)，如Flex布局、Grid布局，以及人工智能編程插件，同時融入企業(yè)開發(fā)實踐，確保學(xué)習(xí)內(nèi)容與實際工作緊密相關(guān)。全書以一個完整案例為主線，結(jié)合綜合項目實戰(zhàn)操作，體現(xiàn)育人、應(yīng)用和創(chuàng)新三項能力?！禜TML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》配套提供課程思政元素、案例源代碼、PPT課件、課后習(xí)題與答案、微課視頻、教案、教學(xué)大綱、章節(jié)測試、云題庫、實驗報告、學(xué)習(xí)通在線課程、企業(yè)高頻面試題、學(xué)科競賽真題等豐富的教學(xué)資源，并設(shè)有QQ群提供線上學(xué)習(xí)跟蹤和指導(dǎo)服務(wù)。

《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》共分14章，系統(tǒng)地講解Web前端開發(fā)的核心技術(shù)，主要內(nèi)容包括Web前端開發(fā)概述、HTML5基礎(chǔ)、HTML5頁面元素和屬性、表單、CSS3基礎(chǔ)、CSS3修飾頁面元素、CSS3高級選擇器、CSS3盒子模型、浮動與定位、CSS3高級應(yīng)用、網(wǎng)頁布局、Flex布局、Grid布局等，并提供“大學(xué)生參軍入伍專題網(wǎng)站”和“文創(chuàng)商城”兩個實戰(zhàn)案例。

本書作者

盧欣欣，副教授。長期從事高校教學(xué)工作，專注Web應(yīng)用開發(fā)，項目開發(fā)經(jīng)驗豐富。主講《Web程序設(shè)計》《高級程序設(shè)計》《軟件開發(fā)綜合實踐》等課程，先后主編教材2部，參編教材3部。在慕課網(wǎng)上線的《企業(yè)網(wǎng)站綜合布局實戰(zhàn)》課程學(xué)習(xí)人數(shù)超15萬人。

崔仲遠，副教授，畢業(yè)于北京交通大學(xué)。長期從事高校教學(xué)工作和軟件項目開發(fā)工作，實戰(zhàn)開發(fā)經(jīng)驗豐富。先后承擔(dān)《網(wǎng)頁特效設(shè)計》《Web前端基礎(chǔ)》《跨平臺腳本開發(fā)技術(shù)》等多門課程的教學(xué)任務(wù)，發(fā)表學(xué)術(shù)論文多篇，主編教材2部，參編教材3部、專著1部。主持省級教改項目1項、科研項目1項。

本書讀者

《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》既可作為本?？圃盒Ｓ嬎銠C相關(guān)專業(yè)的Web程序設(shè)計、網(wǎng)頁設(shè)計與制作等課程的教材，也可作為Web應(yīng)用開發(fā)人員的自學(xué)手冊和技術(shù)參考書。

本書目錄

第1章 Web前端開發(fā)概述 1

1.1 Web前端開發(fā)職責(zé) 1

1.2 Web前端開發(fā)相關(guān)概念 2

1.3 Web前端開發(fā)相關(guān)技術(shù) 3

1.3.1 Web標(biāo)準(zhǔn) 3

1.3.2 HTML 4

1.3.3 CSS 4

1.3.4 JavaScript 5

1.4 Web前端開發(fā)工具 5

1.4.1 代碼編輯工具：VSCode 6

1.4.2 代碼運行工具：瀏覽器 8

1.4.3 開發(fā)者工具 9

1.4.4 人工智能輔助編程工具 10

1.5 網(wǎng)站設(shè)計與開發(fā)流程 11

1.6 實戰(zhàn)案例：網(wǎng)頁顯示“社會主義核心價值觀” 12

1.7 本章小結(jié) 13

第2章 HTML5基礎(chǔ) 14

2.1 HTML5語法基礎(chǔ) 14

2.1.1 HTML文檔結(jié)構(gòu) 14

2.1.2 HTML標(biāo)簽語法 17

2.1.3 HTML注釋 18

2.2 文本控制標(biāo)簽 19

2.2.1 標(biāo)題標(biāo)簽 19

2.2.2 段落標(biāo)簽 20

2.2.3 換行標(biāo)簽 20

2.2.4 文本格式化標(biāo)簽 21

2.2.5 特殊字符 22

2.3 圖像標(biāo)簽 23

2.3.1 網(wǎng)頁常用圖像格式 23

2.3.2 圖像標(biāo)簽的使用 24

2.3.3 相對路徑與絕對路徑 26

2.4 超鏈接標(biāo)簽 27

2.4.1 文本鏈接 27

2.4.2 圖像鏈接 28

2.4.3 書簽（錨點）鏈接 28

2.4.4 其他鏈接 30

2.5 列表 30

2.5.1 有序列表 31

2.5.2 無序列表 32

2.5.3 定義列表 34

2.5.4 嵌套列表 35

2.6 表格 36

2.6.1 表格結(jié)構(gòu) 36

2.6.2 表格標(biāo)簽 37

2.7 視頻和音頻標(biāo)簽 41

2.7.1 視頻標(biāo)簽 41

2.7.2 音頻標(biāo)簽 42

2.8 其他標(biāo)簽 42

2.8.1 預(yù)格式化標(biāo)簽 42

2.8.2 水平線標(biāo)簽 43

2.8.3 行內(nèi)容器標(biāo)簽 43

2.9 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”兵役登記頁面 44

2.10 本章小結(jié) 46

第3章 HTML5頁面元素和屬性 47

3.1 文檔結(jié)構(gòu)標(biāo)簽 47

3.1.1標(biāo)簽 47

3.1.2標(biāo)簽 49

3.1.3標(biāo)簽 50

3.1.4標(biāo)簽 51

3.1.5標(biāo)簽 53

3.1.6標(biāo)簽 53

3.1.7和標(biāo)簽 54

3.1.8標(biāo)簽 55

3.2 交互元素 55

3.2.1 標(biāo)簽 55

3.2.2 標(biāo)簽 56

3.2.3標(biāo)簽 57

3.3 文本層次語義標(biāo)簽 58

3.3.1 標(biāo)簽 58

3.3.2 標(biāo)簽 59

3.3.3 標(biāo)簽 60

3.4 全局屬性 61

3.5 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”頁面結(jié)構(gòu) 62

3.6 本章小結(jié) 64

第4章表單 65

4.1 表單概述 65

4.2標(biāo)簽 67

4.3 標(biāo)簽 68

4.3.1 單行文本框 69

4.3.2 密碼框 69

4.3.3 文件域 70

4.3.4 單選按鈕和復(fù)選框 71

4.3.5 隱藏域 73

4.3.6 按鈕 73

4.3.7 HTML5新增輸入元素 76

4.4 標(biāo)簽 78

4.5 標(biāo)簽 79

4.6 選擇列表標(biāo)簽 80

4.7 多行文本框標(biāo)簽 83

4.8 表單常用屬性 84

4.9 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”網(wǎng)上咨詢表單 86

4.10 本章小結(jié) 88

第5章 CSS3基礎(chǔ) 89

5.1 CSS概述 89

5.2 CSS語法規(guī)則 90

5.3 CSS樣式的引入方法 91

5.3.1 行內(nèi)樣式表 91

5.3.2 內(nèi)部樣式表 92

5.3.3 外部樣式表 93

5.4 CSS基本選擇器 94

5.4.1 標(biāo)簽選擇器 94

5.4.2 ID選擇器 95

5.4.3 類選擇器 95

5.4.4 通用選擇器 97

5.5 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”公共樣式表制作 97

5.6 本章小結(jié) 98

第6章 CSS3修飾頁面元素 99

6.1 CSS字體樣式 99

6.1.1 字體粗細屬性 99

6.1.2 字體風(fēng)格屬性 100

6.1.3 字體大小屬性 101

6.1.4 字體族屬性 103

6.1.5 字體屬性 106

6.2 CSS文本樣式 107

6.2.1 行高屬性 107

6.2.2 顏色屬性 109

6.2.3 文本水平對齊屬性 110

6.2.4 首行縮進屬性 111

6.2.5 文本修飾屬性 111

6.2.6 字符間距屬性 112

6.2.7 字間距屬性 113

6.2.8 字母大小寫屬性 114

6.2.9 文本陰影效果屬性 115

6.3 CSS表格樣式 116

6.4 CSS表單樣式 118

6.4.1 單行文本框美化 119

6.4.2 按鈕美化 120

6.4.3 下拉列表美化 120

6.5 CSS列表樣式 122

6.6 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”在線咨詢頁面 123

6.7 本章小結(jié) 126

第7章 CSS3高級選擇器 127

7.1 組合選擇器 127

7.1.1 交集選擇器 127

7.1.2 并集選擇器 128

7.1.3 后代選擇器 129

7.1.4 子元素選擇器 130

7.1.5 相鄰兄弟選擇器 131

7.1.6 通用兄弟選擇器 132

7.2 屬性選擇器 133

7.3 偽類選擇器 134

7.4 偽元素選擇器 136

7.5 CSS三大特性 138

7.6 本章小結(jié) 141

第8章 CSS3盒子模型 142

8.1 盒子模型概述 142

8.1.1 認識盒子模型 142

8.1.2

標(biāo)簽 144

8.2 盒子模型的相關(guān)屬性 144

8.2.1 內(nèi)容區(qū)域的寬度和高度 144

8.2.2 邊框 145

8.2.3 內(nèi)邊距 152

8.2.4 外邊距 153

8.3 陰影 155

8.4 box-sizing 156

8.5 背景屬性 158

8.5.1 背景顏色 158

8.5.2 背景圖像 158

8.5.3 圖像平鋪方式 158

8.5.4 背景圖像位置 160

8.5.5 背景圖像固定 161

8.5.6 背景圖像大小 161

8.5.7 背景裁剪 163

8.5.8 背景復(fù)合屬性 164

8.5.9 CSS精靈圖 165

8.6 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”登錄頁面 166

8.7 本章小結(jié) 169

第9章浮動與定位 170

9.1 標(biāo)準(zhǔn)文檔流 170

9.2 元素的分類 171

9.2.1 塊級元素、行內(nèi)元素與行內(nèi)塊元素 171

9.2.2 元素的類型轉(zhuǎn)換 172

9.3 元素的浮動 173

9.3.1 設(shè)置浮動 174

9.3.2 清除浮動 176

9.4 元素的定位 180

9.4.1 定位的概念 180

9.4.2 定位屬性 181

9.4.3 靜態(tài)定位 181

9.4.4 相對定位 182

9.4.5 絕對定位 183

9.4.6 固定定位 186

9.4.7 粘性定位 187

9.4.8 層疊等級屬性 188

9.5 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”輪播圖效果 190

9.6 本章小結(jié) 192

第10章 CSS3高級應(yīng)用 193

10.1 變換 193

10.1.1 旋轉(zhuǎn) 194

10.1.2 傾斜 195

10.1.3 縮放 196

10.1.4 平移 197

10.1.5 變換原點 198

10.2 過渡 200

10.3 動畫 202

10.4 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”CSS3高級應(yīng)用 205

10.5 本章小結(jié) 208

第11章網(wǎng)頁布局 209

11.1 網(wǎng)頁布局概述 209

11.1.1 網(wǎng)頁布局的概念 209

11.1.2 網(wǎng)頁布局的流程 210

11.1.3 常見的網(wǎng)頁布局方法 211

11.2 網(wǎng)頁布局命名規(guī)范 211

11.3 常見布局的實現(xiàn) 212

11.3.1 單列布局 212

11.3.2 兩列常規(guī)布局 214

11.3.3 三列常規(guī)布局 216

11.3.4 兩列自適應(yīng)等高布局 217

11.3.5 三列自適應(yīng)布局 219

11.4 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”首頁主體部分 223

11.5 本章小結(jié) 225

第12章 Flex布局 226

12.1 Flex布局概述 226

12.2 Flex布局相關(guān)概念 227

12.3 容器屬性 227

12.3.1 display屬性 228

12.3.2 flex-direction屬性 228

12.3.3 flex-wrap屬性 230

12.3.4 justify-content屬性 232

12.3.5 align-items屬性 233

12.3.6 align-content屬性 235

12.4 項目屬性 236

12.4.1 order屬性 236

12.4.2 flex-grow屬性 237

12.4.3 flex-shrink屬性 239

12.4.4 flex-basis屬性 240

12.4.5 flex屬性 241

12.5 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”導(dǎo)航條 242

12.6 本章小結(jié) 244

第13章 Grid布局 245

13.1 Grid布局概述 245

13.2 Grid布局相關(guān)概念 246

13.3 容器屬性 246

13.3.1 display屬性 247

13.3.2 劃分網(wǎng)格 248

13.3.3 行間隔和列間隔 252

13.3.4 項目對齊方式 253

13.4 項目屬性 255

13.4.1 grid-column和grid-row屬性 255

13.4.2 grid-area屬性 257

13.5 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”視頻展播列表 258

13.6 本章小結(jié) 260

第14章 Web前端項目綜合實踐——文創(chuàng)商城 261

14.1 項目概述 261

14.2 需求分析 262

14.3 原型設(shè)計 262

14.4 公共部分的設(shè)計與實現(xiàn) 265

14.4.1 重置樣式 265

14.4.2 頁面頭部 265

14.4.3 頁面底部 268

14.4.4 懸浮側(cè)邊欄 270

14.5 首頁的設(shè)計與實現(xiàn) 271

14.5.1 甄選好物版塊 271

14.5.2 國博文房版塊 274

14.6 商品列表頁的設(shè)計與實現(xiàn) 277

14.6.1 商品類型篩選 277

14.6.2 分頁導(dǎo)航 278

14.7 商品詳情頁的設(shè)計與實現(xiàn) 279

14.8 本章小結(jié) 283

編輯推薦

1HTML5與CSS3是Web前端開發(fā)的兩大核心技術(shù)，它們不僅是Web前端開發(fā)工程師必須掌握的技能，也是高校一門重要的Web前端課程內(nèi)容

2《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》以“從項目中來到項目中去”為主旨，從Web前端開發(fā)的基本概念入手，系統(tǒng)介紹HTML5、CSS3網(wǎng)頁編程技巧。

3《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》采取“知識點講解+示例解析+案例詳講+高頻面試題+實踐操作+學(xué)科競賽真題”的遞進式教學(xué)模式，引導(dǎo)讀者理解理論知識，掌握開發(fā)方法，學(xué)會復(fù)雜的網(wǎng)站設(shè)計技能，全面提升讀者的Web前端開發(fā)能力。

4《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》配套資源非常豐富，包括思政元素、案例源代碼、PPT課件、微課視頻、習(xí)題與答案、教案、教學(xué)大綱、章節(jié)測試、云題庫、實驗報告、學(xué)習(xí)通在線課程，能幫助讀者快速掌握HTML5與CSS3前端技術(shù)。

本文摘自《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》，獲出版社和作者授權(quán)發(fā)布。

SS3 可以將文本內(nèi)容設(shè)計成像報紙一樣的多列布局，如下實例:

我們學(xué)的不僅是技術(shù)，更是夢想！我的頭條里介紹了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各種編程語言的基礎(chǔ)知識。

瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個瀏覽器的版本號。

緊跟在數(shù)字后面的 -webkit- 或 -moz- 為指定瀏覽器的前綴。

屬性
column-count	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit-11.1
column-gap	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit-11.1
column-rule	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit-11.1
column-rule-color	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit11.1
column-rule-style	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit11.1
column-rule-width	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit11.1
column-width	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit11.1

CSS3 多列屬性

我們將學(xué)習(xí)以下幾個 CSS3 的多列屬性:

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

CSS3 創(chuàng)建多列

column-count 屬性指定了需要分割的列數(shù)。

以下實例將 <div> 元素中的文本分為 3 列：

實例

div {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

}

CSS3 多列中列與列間的間隙

column-gap 屬性指定了列與列間的間隙。

以下實例指定了列與列間的間隙為 40 像素：

實例

div {

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

}

CSS3 列邊框

column-rule-style 屬性指定了列與列間的邊框樣式：

實例

div {

-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

-moz-column-rule-style: solid; /* Firefox */

column-rule-style: solid;

}

嘗試一下 ?

column-rule-width 屬性指定了兩列的邊框厚度:

實例

div {

-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */

-moz-column-rule-width: 1px; /* Firefox */

column-rule-width: 1px;

}

column-rule-color 屬性指定了兩列的邊框顏色：

實例

div {

-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */

-moz-column-rule-color: lightblue; /* Firefox */

column-rule-color: lightblue;

}

嘗試一下 ?

column-rule 屬性是 column-rule-* 所有屬性的簡寫。

以下實例設(shè)置了列直接的邊框的厚度，樣式及顏色：

實例

div {

-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */

-moz-column-rule: 1px solid lightblue; /* Firefox */

column-rule: 1px solid lightblue;

}

嘗試一下 ?

指定元素跨越多少列

以下實例指定 <h2> 元素跨越所有列：

實例

h2 {

-webkit-column-span: all; /* Chrome, Safari, Opera */

column-span: all;

}

嘗試一下 ?

指定列的寬度

column-width 屬性指定了列的寬度。

實例

div {

-webkit-column-width: 100px; /* Chrome, Safari, Opera */

column-width: 100px;

}

嘗試一下 ?

CSS3 多列屬性

下表列出了所有 CSS3 的多列屬性：

屬性	描述
column-count	指定元素應(yīng)該被分割的列數(shù)。
column-fill	指定如何填充列
column-gap	指定列與列之間的間隙
column-rule	所有 column-rule-* 屬性的簡寫
column-rule-color	指定兩列間邊框的顏色
column-rule-style	指定兩列間邊框的樣式
column-rule-width	指定兩列間邊框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的寬度
columns	設(shè)置 column-width 和 column-count 的簡寫

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

分布局就是指一行被分為若干列, 每一列的寬度是相同的值

float 屬性實現(xiàn)等分布局效果

display 屬性的值有關(guān) table 實現(xiàn)等分布局效果

<div id="parent">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

通過以下 CSS 代碼實現(xiàn)兩列布局效果

在線咨詢

上一篇：HTML網(wǎng)頁編程之按鈕詳解
下一篇：（HTML完結(jié)篇）制作一個簡單頁面(詳解)-零基礎(chǔ)自學(xué)網(wǎng)頁制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

新書速覽-HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版

您的項目需求