响应式Web开发项目教程(HTML5+CSS3+Bootstrap) 第2版 黑马程序员 编 大中专 文轩网

第1章HTML5+CSS3初体验1
1．1HTML5和CSS3的优势1
1．1．1HTML5的优势1
1．1．2CSS3的优势2
1．2HTML5的基本使用2
1．2．1HTML5的基本语法3
1．2．2HTML5语义化标签3
1．3CSS的基本使用4
1．3．1CSS的引入方式5
1．3．2选择器5
1．3．3盒子模型8
1．3．4浮动与定位10
1．4【项目1-1】三栏布局页面11
1．4．1项目分析11
1．4．2编写头部和底部区域12
1．4．3编写主体区域13
1．4．4实现左侧边栏效果14
1．4．5实现右侧边栏效果14
1．4．6项目总结15
1．5CSS3边框属性15
1．5．1圆角边框15
1．5．2特殊边框效果16
1．6CSS3背景设置18
1．7CSS3阴影和渐变19
1．7．1阴影19
1．7．2线性渐变20
1．7．3径向渐变21
1．8【项目1-2】许愿墙22
1．8．1项目分析22
1．8．2编写许愿墙页面结构23
1．8．3编写许愿墙页面样式24
1．8．4项目总结24
课后练习25
第2章CSS3文本与图标26
2．1HTML5中常用的文本标签26
2．2CSS3文本样式属性27
2．2．1字体样式属性27
2．2．2文本外观属性27
2．2．3链接属性29
2．2．4@font-face属性29
2．3font-awesome字体图标31
2．3．1下载font-awesome31
2．3．2使用font-awesome31
2．4CSS3用户界面属性33
2．4．1box-sizing属性33
2．4．2resize调整尺寸34
2．4．3outline-offset外形修饰36
2．5【项目2】软文推广页面37
2．5．1项目分析37
2．5．2编写头部页面效果38
2．5．3编写中间部分页面效果38
2．5．4编写底部页面效果40
2．5．5项目总结40
课后练习41
第3章CSS3过渡、变形与动画42
3．1CSS3过渡42
3．1．1什么是过渡42
3．1．2transition的子属性43
3．2CSS3变形44
3．2．12D转换44
3．2．2元素变形原点45
3．2．33D转换46
3．3CSS3动画49
3．3．1@keyframes规则49
3．3．2animation属性49
3．4【项目3】摇晃的桃子51
3．4．1项目分析51
3．4．2编写摇晃桃子的基本页面效果52
3．4．3编写桃子的摇晃效果54
3．4．4项目总结56
课后练习56
第4章HTML5表单的应用57
4．1介绍表单57
4．1．1标签57
4．1．2标签58
4．1．3其他表单标签60
4．2【项目4-1】调查问卷页面65
4．2．1项目分析65
4．2．2编写用户基本信息页面效果66
4．2．3编写上传文件和文本域页面效果68
4．2．4项目总结68
4．3HTML5表单新特性69
4．3．1新特性69
4．3．2新特性71
4．4【项目4-2】登录注册页面72
4．4．1项目分析72
4．4．2编写登录页面效果74
4．4．3编写注册基本页面效果76
4．4．4实现注册信息验证页面效果77
4．4．5项目总结78
课后练习78
第5章HTML5画布80
5．1JavaScript的基础知识80
5．1．1JavaScript引入方式80
5．1．2数据类型81
5．1．3变量81
5．1．4函数82
5．1．5对象82
5．1．6事件处理82
5．1．7DOM操作84
5．1．8getBoundingClientRect()方法86
5．2Canvas绘图基本步骤87
5．2．1创建画布87
5．2．2准备画笔87
5．2．3定义坐标和起始点87
5．2．4绘制线条图案88
5．2．5绘制三角形90
5．3Canvas常用方法91
5．3．1绘制几何图形91
5．3．2绘制笑脸92
5．3．3绘制图片94
5．4Canvas其他方法95
5．5【项目5-1】涂鸦板96
5．5．1项目分析96
5．5．2编写页面结构，定义画布97
5．5．3在JavaScript中绘制图形97
5．5．4实现鼠标涂鸦效果98
5．5．5项目总结98
5．6【项目5-2】发红包看照片99
5．6．1项目分析99
5．6．2编写页面结构100
5．6．3编写页面样式101
5．6．4绘制圆形图片102
5．6．5实现单击按钮图片显示效果102
5．6．6项目总结103
课后练习103
第6章HTML5视频和音频104
6．1JavaScript编程基础104
6．1．1JavaScript运算符104
6．1．2分支结构106
6．1．3循环结构107
6．2视频和音频技术简介108
6．3视频的基本使用108
6．3．1在HTML5中嵌入视频108
6．3．2视频标签的常用属性109
6．3．3处理视频文件格式110
6．4音频的基本使用110
6．4．1在HTML5中嵌入音频111
6．4．2处理音频文件格式111
6．5视频和音频对象112
6．5．1视频和音频对象的常用方法112
6．5．2视频和音频对象的常用属性112
6．5．3视频和音频对象的常用事件113
6．6【项目6-1】视频播放器114
6．6．1项目分析114
6．6．2编写播放器页面结构116
6．6．3编写播放器页面样式116
6．6．4计算视频播放的总时长119
6．6．5实现视频播放和暂停效果119
6．6．6实现进度条显示效果120
6．6．7实现视频全屏显示效果120
6．6．8实现视频播放完成后的重置操作120
6．6．9实现单击进度条视频跳转效果120
6．6．10使用Esc键退出全屏121
6．6．11使用按键控制视频的播放和暂停121
6．6．12项目总结122
6．7【项目6-2】音乐播放器122
6．7．1项目分析122
6．7．2编写音乐播放器页面结构124
6．7．3编写音乐播放器页面样式125
6．7．4实现歌词控制栏效果126
6．7．5实现播放器样式效果127
6．7．6实现音频文件的播放功能129
6．7．7项目总结130
课后练习130
第7章响应式Web设计131
7．1响应式Web设计基础131
7．1．1视口131
7．1．2媒体查询132
7．1．3百分比布局134
7．1．4栅格系统136
7．2响应式常见实现方式136
7．2．1媒体查询实现响应式布局136
7．2．2弹性盒布局137
7．2．3弹性盒常用属性138
7．2．4弹性盒属性的综合运用142
7．3【项目7-1】环保网站144
7．3．1项目分析144
7．3．2编写HTML结构代码146
7．3．3编写style．css公共样式代码146
7．3．4实现header响应式效果147
7．3．5实现banner响应式效果149
7．3．6实现中间区域效果150
7．3．7实现底部区域效果153
7．3．8项目总结153
7．4【项目7-2】学习教程库154
7．4．1项目分析154
7．4．2编写HTML结构代码156
7．4．3编写标题部分样式代码156
7．4．4编写免费教程资源部分样式代码157
7．4．5编写媒体查询样式代码158
7．4．6项目总结159
课后练习160
第8章Bootstrap（上）161
8．1Bootstrap简介161
8．1．1什么是Bootstrap161
8．1．2Bootstrap的优势162
8．1．3Bootstrap4的新特性162
8．2Bootstrap的下载和环境安装162
8．2．1Bootstrap的下载方式162
8．2．2下载Bootstrap预编译文件163
8．2．3下载Bootstrap源文件手动编译164
8．2．4使用CDN加载Bootstrap165
8．2．5在HTML中引入Bootstrap166
8．3Bootstrap布局容器167
8．3．1初识布局容器167
8．3．2栅格系统167
8．3．3栅格系统基本使用168
8．3．4响应式布局工具168
8．4Flex弹性布局169
8．5SVG矢量图的使用170
8．6Bootstrap常用组件172
8．6．1表单172
8．6．2输入框组174
8．6．3按钮174
8．6．4分页176
8．7辅助样式177
8．7．1文本颜色177
8．7．2背景颜色177
8．7．3设置元素间距178
8．8【项目8】PC端登录界面179
8．8．1项目分析179
8．8．2编写HTML结构代码180
8．8．3设置body和html样式181
8．8．4实现页面垂直居中显示181
8．8．5实现头部head部分182
8．8．6实现中间center部分182
8．8．7实现底部footer部分183
8．8．8项目总结183
课后练习183
第9章Bootstrap（下）185
9．1导航185
9．1．1基础导航185
9．1．2标签式导航186
9．1．3pills导航186
9．1．4导航对齐方式187
9．1．5导航下拉菜单187
9．1．6标签页切换188
9．2导航栏189
9．2．1基础导航栏189
9．2．2设置导航栏的标题190
9．2．3导航栏折叠效果190
9．3卡片191
9．3．1卡片结构191
9．3．2卡片主体内容192
9．3．3设置带有图片的卡片193
9．3．4设置卡片背景图193
9．4【项目9】后台管理系统194
9．4．1项目展示194
9．4．2安装Node．js环境196
9．4．3使用Sass编写样式代码197
9．4．4安装Gulp198
9．4．5下载和安装Chart．js图表库199
9．4．6引入Feather图标库200
9．4．7搭建项目目录结构200
9．4．8创建模板文件200
9．4．9实现导航栏201
9．4．10实现网页中间部分布局203
9．4．11编写中间部分结构代码205
9．4．12实现侧边导航布局205
9．4．13实现右侧内容布局206
9．4．14实现侧边导航激活效果207
9．4．15解决iframe框架高度自适应207
9．4．16项目总结207
课后练习208