目录





第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习题