HTML5+CSS3網頁設計與製作(微課視頻版)

本書是適合HTML5初學者學習的入門教材之一，從初學者的角度出發，理論與實踐相結合，使用通俗易懂的語言進行概念講解，並提供實用的案例對知識點加以說明，使讀者能夠更清晰地理解各個標簽和屬性的用法，同時對書中所講解的知識點能夠融會貫通，更加高效地使用HTML5和CSS3技術進行網頁製作。 全書共12章，從HTML5和CSS3基礎知識入手，逐漸過渡到對HTML5和CSS3的深入學習，對網頁文本、圖片、超鏈接、列表、表單和表格等進行優化，並在此基礎上使用CSS3對網頁的整體樣式進行設計。本書附有源代碼、習題、教學課件等資源，為幫助初學者更好地學習，編者還提供在線答疑服務，希望可以幫助更多的讀者。 本書可作為高等學校電腦相關專業網頁設計與製作課程的教材，也可作為網頁設計行業從業人員的參考讀物。

目錄

第1章Web前端技術簡介

1.1Web前端概述

1.1.1初識Web前端

1.1.2認識W3C

1.1.3Web標準

1.1.4Web前端3大核心技術

1.2HTML5入門

1.2.1HTML歷史版本

1.2.2新增語法

1.2.3HTML與XHTML的關系

1.2.4HTML5的基本結構

1.2.5HTML5標簽與元素

1.3Web前端開發工具

1.3.1瀏覽器

1.3.2VS Code編輯器

1.3.3運行第一個HTML5網頁

1.4本章小結

1.5習題

第2章HTML5標簽詳解

2.1HTML5語義化

2.2HTML5的常用標簽

2.2.1標題標簽

2.2.2段落標簽

2.2.3換行標簽

2.2.4水平線標簽

2.2.5文本格式化標簽

2.2.6特殊字符

2.2.7圖片標簽

2.2.8超鏈接標簽

2.2.9列表標簽

2.2.10div與span

2.3實例一： 感恩母親節

2.3.1“感恩母親節”頁面結構簡圖

2.3.2實現“感恩母親節”頁面效果

2.4本章小結

2.5習題

第3章HTML5表格與表單

3.1HTML5表格

3.1.1表格的基本結構

3.1.2語義化標簽

3.1.3單元格邊距與間距

3.1.4合並行與列

3.1.5表格的其他屬性

3.2實例二： 天氣情況表格統計

3.2.1“天氣情況表格統計”頁面結構簡圖

3.2.2實現“天氣情況表格統計”頁面效果

3.3HTML5表單

3.3.1表單的組成

3.3.2form標簽

3.3.3input標簽

3.3.4label標簽

3.3.5select標簽

3.3.6textarea標簽

3.3.7fieldset標簽

3.4實例三： 圖書庫存信息錄入表單

3.4.1“圖書庫存信息錄入表單”頁面結構簡圖

3.4.2實現“圖書庫存信息錄入表單”頁面效果

3.5本章小結

3.6習題

第4章初識CSS3

4.1CSS3簡介

4.1.1CSS3的歷史

4.1.2CSS改變元素樣式

4.2CSS3樣式的引入方式

4.2.1行內樣式

4.2.2內嵌樣式

4.2.3外鏈樣式

4.2.4引入方式的優先級

4.3CSS3基礎選擇器

4.3.1通用選擇器

4.3.2標簽選擇器

4.3.3類選擇器

4.3.4id選擇器

4.3.5後代選擇器

4.3.6子代選擇器

4.3.7並集選擇器

4.3.8兄弟選擇器

4.3.9相鄰兄弟選擇器

4.3.10權值與優先級

4.4新增選擇器

4.4.1屬性選擇器

4.4.2結構偽類選擇器

4.4.3偽元素選擇器

4.5本章小結

4.6習題

第5章CSS3屬性

5.1CSS3基本屬性

5.1.1尺寸屬性

5.1.2字體屬性

5.1.3背景屬性

5.1.4文本屬性

5.2樣式的繼承

5.3實例四： 美化“感恩母親節”頁面

5.3.1“感恩母親節”頁面美化後的效果圖

5.3.2實現“感恩母親節”美化頁面效果

5.4顯示或隱藏屬性

5.4.1display屬性

5.4.2visibility屬性

5.4.3opacity屬性

5.4.4rgba()函數

5.4.5overflow屬性

5.4.6顯示或隱藏屬性的區別

5.5實例五： 賞析宋詞

5.5.1“賞析宋詞”頁面結構簡圖

5.5.2實現“賞析宋詞”頁面效果

5.6本章小結

5.7習題

第6章CSS3佈局

6.1CSS3盒子模型

6.1.1盒子模型結構

6.1.2padding屬性

6.1.3border屬性

6.1.4margin屬性

6.1.5IE盒子模型

6.2實例六： 新聞小卡片

6.2.1“新聞小卡片”頁面結構簡圖

6.2.2實現“新聞小卡片”頁面效果

6.3CSS3浮動

6.3.1浮動原理

6.3.2float屬性

6.3.3清除浮動

6.4實例七： 設計導航欄

6.4.1“設計導航欄”頁面結構簡圖

6.4.2實現“設計導航欄”頁面效果

6.5CSS3定位

6.5.1定位屬性

6.5.2相對定位

6.5.3絕對定位

6.5.4固定定位

6.5.5zindex屬性

6.6實例八： 頂部搜索框

6.6.1“頂部搜索框”頁面結構簡圖

6.6.2實現“頂部搜索框”頁面效果

6.7本章小結

6.8習題

第7章HTML5新增標簽與屬性

7.1HTML5新增標簽

7.1.1結構標簽

7.1.2媒體標簽

7.1.3表單控件標簽

7.1.4其他標簽

7.2HTML5新增屬性

7.2.1data*屬性

7.2.2hidden屬性

7.2.3contenteditable屬性

7.3實例九： 中國戲曲介紹

7.3.1“中國戲曲介紹”頁面結構簡圖

7.3.2實現“中國戲曲介紹”頁面效果

7.4本章小結

7.5習題

第8章CSS3新增屬性

8.1文本屬性

8.1.1textshadow屬性

8.1.2textalignlast屬性

8.2背景屬性

8.2.1backgroundsize屬性

8.2.2backgroundorigin屬性

8.2.3backgroundclip屬性

8.3邊框屬性

8.3.1borderradius屬性

8.3.2borderimage屬性

8.3.3boxshadow屬性

8.4實例十： 登錄註冊表單

8.4.1“登錄註冊表單”頁面結構簡圖

8.4.2實現“登錄註冊表單”頁面效果

8.5本章小結

8.6習題

第9章CSS3高級動畫

9.1transition過渡

9.1.1transition屬性

9.1.2cubicbezier函數

9.2實例十一： 產品封面過渡效果

9.2.1產品封面效果圖

9.2.2實現產品封面過渡效果

9.3CSS3 2D變形

9.3.1transformorigin屬性

9.3.2translate()方法

9.3.3rotate()方法

9.3.4scale()方法

9.3.5skew()方法

9.4實例十二： 2D變形小賀卡

9.4.1“2D變形小賀卡”頁面結構簡圖

9.4.2實現“2D變形小賀卡”頁面效果

9.5CSS3 3D變形

9.5.1概述

9.5.2perspective屬性

9.5.3transformstyle屬性

9.5.4backfacevisibility屬性

9.5.5perspectiveorigin屬性

9.5.63D rotate()方法

9.5.73D translate()方法

9.6實例十三： 3D立體相冊

9.6.1“3D立體相冊”頁面結構簡圖

9.6.2實現“3D立體相冊”頁面效果

9.7animation動畫

9.7.1@keyframes規則

9.7.2animation屬性

9.7.3過渡效果與動畫效果的區分

9.8實例十四： 輪播圖動畫

9.8.1“輪播圖動畫”頁面結構簡圖

9.8.2實現“輪播圖動畫”頁面效果

9.9本章小結

9.10習題

第10章HTML5+CSS3訓練營

10.1屏幕居中設計

10.1.1理解元素居中

10.1.2解決元素居中顯示

10.2分頁居中展示

10.2.1理解分頁

10.2.2解決分頁居中

10.3三角形圖標

10.3.1瞭解三角形圖標

10.3.2實現三角形圖標

10.4精美的“上傳”按鈕

10.4.1瞭解“上傳”按鈕

10.4.2設計“上傳”按鈕

10.5CSS3擴展

10.5.1添加省略號

10.5.2合並表格邊框

10.6本章小結

10.7習題

第11章網頁開發流程

11.1圖書網頁分析

11.1.1網頁模塊命名規範

11.1.2圖書網頁效果圖

11.1.3文件夾組織結構

11.2圖書網頁的設計與實現

11.2.1結構劃分與公共樣式

11.2.2頭部導航製作

11.2.3廣告製作

11.2.4列表製作

11.2.5頁腳製作

11.3本章小結

11.4習題

第12章移動端佈局與響應式開發

12.1視口與流式佈局

12.1.1視口

12.1.2流式佈局

12.2Flex佈局

12.2.1Flex結構

12.2.2容器屬性

12.2.3項目屬性

12.3實例十五： “智慧教學”搜索專欄

12.3.1“‘智慧教學’搜索專欄”頁面效果圖

12.3.2實現“‘智慧教學’搜索專欄”頁面效果

12.4響應式開發

12.4.1媒體查詢

12.4.2Rem佈局

12.5實例十六： “智慧教學”首頁

12.5.1“智慧教學”首頁效果圖

12.5.2實現“智慧教學”首頁效果

12.6本章小結

12.7習題