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

本書內容

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

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

本書作者

盧欣欣，副教授。長期從事高校教學工作，專注Web應用開發，項目開發經驗豐富。主講《Web程序設計》《高級程序設計》《軟件開發綜合實踐》等課程，先后主編教材2部，參編教材3部。在慕課網上線的《企業網站綜合布局實戰》課程學習人數超15萬人。

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

本書讀者

《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》既可作為本專科院校計算機相關專業的Web程序設計、網頁設計與制作等課程的教材，也可作為Web應用開發人員的自學手冊和技術參考書。

本書目錄

第1章 Web前端開發概述 1

1.1 Web前端開發職責 1

1.2 Web前端開發相關概念 2

1.3 Web前端開發相關技術 3

1.3.1 Web標準 3

1.3.2 HTML 4

1.3.3 CSS 4

1.3.4 JavaScript 5

1.4 Web前端開發工具 5

1.4.1 代碼編輯工具：VSCode 6

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

1.4.3 開發者工具 9

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

1.5 網站設計與開發流程 11

1.6 實戰案例：網頁顯示“社會主義核心價值觀” 12

1.7 本章小結 13

第2章 HTML5基礎 14

2.1 HTML5語法基礎 14

2.1.1 HTML文檔結構 14

2.1.2 HTML標簽語法 17

2.1.3 HTML注釋 18

2.2 文本控制標簽 19

2.2.1 標題標簽 19

2.2.2 段落標簽 20

2.2.3 換行標簽 20

2.2.4 文本格式化標簽 21

2.2.5 特殊字符 22

2.3 圖像標簽 23

2.3.1 網頁常用圖像格式 23

2.3.2 圖像標簽的使用 24

2.3.3 相對路徑與絕對路徑 26

2.4 超鏈接標簽 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 表格結構 36

2.6.2 表格標簽 37

2.7 視頻和音頻標簽 41

2.7.1 視頻標簽 41

2.7.2 音頻標簽 42

2.8 其他標簽 42

2.8.1 預格式化標簽 42

2.8.2 水平線標簽 43

2.8.3 行內容器標簽 43

2.9 實戰案例：“大學生參軍網站”兵役登記頁面 44

2.10 本章小結 46

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

3.1 文檔結構標簽 47

3.1.1標簽 47

3.1.2標簽 49

3.1.3標簽 50

3.1.4標簽 51

3.1.5標簽 53

3.1.6標簽 53

3.1.7和標簽 54

3.1.8標簽 55

3.2 交互元素 55

3.2.1 標簽 55

3.2.2 標簽 56

3.2.3標簽 57

3.3 文本層次語義標簽 58

3.3.1 標簽 58

3.3.2 標簽 59

3.3.3 標簽 60

3.4 全局屬性 61

3.5 實戰案例：“大學生參軍網站”頁面結構 62

3.6 本章小結 64

第4章 表單 65

4.1 表單概述 65

4.2標簽 67

4.3 標簽 68

4.3.1 單行文本框 69

4.3.2 密碼框 69

4.3.3 文件域 70

4.3.4 單選按鈕和復選框 71

4.3.5 隱藏域 73

4.3.6 按鈕 73

4.3.7 HTML5新增輸入元素 76

4.4 標簽 78

4.5 標簽 79

4.6 選擇列表標簽 80

4.7 多行文本框標簽 83

4.8 表單常用屬性 84

4.9 實戰案例：“大學生參軍網站”網上咨詢表單 86

4.10 本章小結 88

第5章 CSS3基礎 89

5.1 CSS概述 89

5.2 CSS語法規則 90

5.3 CSS樣式的引入方法 91

5.3.1 行內樣式表 91

5.3.2 內部樣式表 92

5.3.3 外部樣式表 93

5.4 CSS基本選擇器 94

5.4.1 標簽選擇器 94

5.4.2 ID選擇器 95

5.4.3 類選擇器 95

5.4.4 通用選擇器 97

5.5 實戰案例：“大學生參軍網站”公共樣式表制作 97

5.6 本章小結 98

第6章 CSS3修飾頁面元素 99

6.1 CSS字體樣式 99

6.1.1 字體粗細屬性 99

6.1.2 字體風格屬性 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 實戰案例：“大學生參軍網站”在線咨詢頁面 123

6.7 本章小結 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 本章小結 141

第8章 CSS3盒子模型 142

8.1 盒子模型概述 142

8.1.1 認識盒子模型 142

8.1.2

標簽 144

8.2 盒子模型的相關屬性 144

8.2.1 內容區域的寬度和高度 144

8.2.2 邊框 145

8.2.3 內邊距 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 背景復合屬性 164

8.5.9 CSS精靈圖 165

8.6 實戰案例：“大學生參軍網站”登錄頁面 166

8.7 本章小結 169

第9章 浮動與定位 170

9.1 標準文檔流 170

9.2 元素的分類 171

9.2.1 塊級元素、行內元素與行內塊元素 171

9.2.2 元素的類型轉換 172

9.3 元素的浮動 173

9.3.1 設置浮動 174

9.3.2 清除浮動 176

9.4 元素的定位 180

9.4.1 定位的概念 180

9.4.2 定位屬性 181

9.4.3 靜態定位 181

9.4.4 相對定位 182

9.4.5 絕對定位 183

9.4.6 固定定位 186

9.4.7 粘性定位 187

9.4.8 層疊等級屬性 188

9.5 實戰案例：“大學生參軍網站”輪播圖效果 190

9.6 本章小結 192

第10章 CSS3高級應用 193

10.1 變換 193

10.1.1 旋轉 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 實戰案例：“大學生參軍網站”CSS3高級應用 205

10.5 本章小結 208

第11章 網頁布局 209

11.1 網頁布局概述 209

11.1.1 網頁布局的概念 209

11.1.2 網頁布局的流程 210

11.1.3 常見的網頁布局方法 211

11.2 網頁布局命名規范 211

11.3 常見布局的實現 212

11.3.1 單列布局 212

11.3.2 兩列常規布局 214

11.3.3 三列常規布局 216

11.3.4 兩列自適應等高布局 217

11.3.5 三列自適應布局 219

11.4 實戰案例：“大學生參軍網站”首頁主體部分 223

11.5 本章小結 225

第12章 Flex布局 226

12.1 Flex布局概述 226

12.2 Flex布局相關概念 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 實戰案例：“大學生參軍網站”導航條 242

12.6 本章小結 244

第13章 Grid布局 245

13.1 Grid布局概述 245

13.2 Grid布局相關概念 246

13.3 容器屬性 246

13.3.1 display屬性 247

13.3.2 劃分網格 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 實戰案例：“大學生參軍網站”視頻展播列表 258

13.6 本章小結 260

第14章 Web前端項目綜合實踐——文創商城 261

14.1 項目概述 261

14.2 需求分析 262

14.3 原型設計 262

14.4 公共部分的設計與實現 265

14.4.1 重置樣式 265

14.4.2 頁面頭部 265

14.4.3 頁面底部 268

14.4.4 懸浮側邊欄 270

14.5 首頁的設計與實現 271

14.5.1 甄選好物版塊 271

14.5.2 國博文房版塊 274

14.6 商品列表頁的設計與實現 277

14.6.1 商品類型篩選 277

14.6.2 分頁導航 278

14.7 商品詳情頁的設計與實現 279

14.8 本章小結 283

編輯推薦

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

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

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

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

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

篇文章主要講述了CSS樣式更改中的背景Background，這篇文章我們來談談字體設置Font&邊框Border的基礎用法。

1.字體設置Font

1).字體系列

<div style='font-family: sans-serif normal'></div>
可用字體：
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier

2).字體風格

<div style='font-style:normal'></div>
文本傾斜:
normal   文本正常顯示
italic   文本斜體顯示
oblique  文本傾斜顯示

3).字體變形

<div style='font-variant:small-caps'></div>
normal          顯示標準字體。
small-caps      顯示小型大寫字母的字體。

4).字體加粗

<div style='font-weight:normal'></div>
normal    標準的字符
bold      粗體字符
bolder    更粗的字符
lighter   更細的字符
也可以使用數字表示，范圍為100~900

5).字體大小

<div style='font-size:60px'></div>
smaller 變小
larger  變大
length  固定值
而且還支持百分比

2.邊框Border

首先說一下邊框風格，它的風格比較多，常用的一般是實線為主：

<div style='border-style:none'></div>
hidden     隱藏邊框
dotted     點狀邊框
dashed     虛線邊框
solid      實線邊框
double     雙線邊框
groove     3D凹槽邊框
ridge      3D壟狀邊框
inset      3D inset邊框
outset     3D outset邊框
邊框也有四面，所以也會有上下左右
所以有時候為了更精確定位并修改樣式可以使用：
border-top-style     上邊框樣式
border-right-style   右邊框樣式
border-bottom-style  下邊框樣式
border-left-style    左邊框樣式

先定義邊框的寬度 風格和顏色，然后定義邊框的其它屬性。

1).邊框形狀

<div style='border-radius:25px;'></div>

2).邊框陰影

<div style='box-shadow:1px 2px 2px 2px red'></div>
參數含義：
邊框各個方向的大小和顏色

3).邊框圖片

<div style='border-image:url(1.png) 30 30 10 round'></div>
參數含義：
邊框圖片的路徑
圖片邊框向內偏移
圖片邊框的寬度
邊框圖像區域超出邊框的量
圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。

總結

這篇文章主要介紹了CSS樣式更改篇中的字體設置Font&邊框Border設置，希望讓大家對CSS選擇器有個簡單的認識和了解。
****看完本文有收獲？請轉發分享給更多的人****

IT共享之家

想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/

標

使用border-image可以設置漸變色邊框，但是當它與border-radius組合使用時，兩者卻無法兼容。

因此，實現這個效果的另一個思路是：利用兩個圓角矩形的面積差形成邊框。故可以使用以下方法實現：

基礎版本

使用嵌套的兩個div，并設置父元素的內邊距padding以此制造面積差，從而形成邊框的效果。

HTML

復制代碼

<div class="border-box">    <div class="border-content"></div></div>

CSS

復制代碼

.border-box{  width: 200px;  background:linear-gradient(0deg,#00135A,#01A1FF);  border-radius: 5px;  padding: 2px;/* 邊框寬度 */}.border-content{  width: 200px;  height: 100px;  border-radius: 5px;   background-color: white;  }

簡化HTML結構版：使用偽元素

使用偽元素充當背景也同樣可以達到上述效果，注意設置z-index將偽元素置于內容之下

HTML

復制代碼

<div class="border-content"></div>

CSS

復制代碼

.border-content{  width: 200px;  height: 100px;  border-radius: 5px;    position: relative;  background-color: white;  }.border-content::before{  content: '';  position: absolute;  top: -2px; right: -2px; bottom: -2px; left: -2px;/* 邊框寬度 */  border-radius: 5px;   background: linear-gradient(0deg,#00135A,#01A1FF);    z-index: -1;/* 置于內容之下 */ }

進階版：使用background相關屬性

給一個div設置兩個不同大小的背景，從而利用兩個背景制造面積差，也可以實現上述效果。

• 如何給div設置兩個背景？

使用background-image屬性設置兩組顏色，一組是內容顏色，另一組是border邊框顏色，用逗號隔開。

• 如何將兩個背景設置成不同大小？

可以使用background-clip 屬性，該屬性規定了背景的繪制區域。給一組設置為padding-box（背景繪制區域從內邊距框開始），第二組為border-box（背景繪制區域延伸至邊框）。

此時的效果如下：

可以看出背景色并不是我們想要的效果，原因是這兩組的繪制起點都是padding-box。

• 如何更改背景繪制區域的起點？

使用background-origin屬性，該屬性規定了背景的繪制區域相對于什么位置來定位。給一組設置為padding-box（背景繪制區域以 padding 區域為參考），第二組為border-box（背景繪制區域以 border 區域為參考）。

此時即可得到想要的效果，代碼如下：

HTML

復制代碼

<div class="border-content"></div>

CSS

復制代碼

.border-content{  width: 200px;  height: 100px;  border: 2px solid transparent;  border-radius: 5px;  background-clip: padding-box,border-box;  background-origin: padding-box,border-box;  background-image: linear-gradient(0deg,#FFF,#fff),linear-gradient(0deg,#00135A,#01A1FF);}

缺陷

該思路無法實現透明底的漸變色圓角邊框。