本书是面向Web前端开发学习者的一本入门教材,以通俗易懂的语言、丰富实用的案例,详细讲解了HTML5 + CSS3 + Bootstrap响应式开发技术。 全书共9章。第1~3章讲解HTML5和CSS3的基础内容;第4~6章讲解HTML5表单的应用、HTML5画布、HTML5视频和音频的内容;第7章讲解响应式Web设计的基础知识;第8~9章讲解Bootstrap,内容包括栅格系统、组件和样式等相关内容,以及如何利用Bootstrap相关技术开发PC端登录界面和后台管理系统。 本书既可作为高等教育本、专科院校计算机相关专业的Web前端开发课程的教材,也可作为广大IT技术人员和编程爱好者的参考书。

第 1章 HTML5+CSS3初体验1 1.1 HTML5和CSS3的优势 1 1.1.1 HTML5的优势 1 1.1.2 CSS3的优势 2 1.2 HTML5的基本使用 2 1.2.1 HTML5的基本语法 3 1.2.2 HTML5语义化标签 3 1.3 CSS的基本使用 4 1.3.1 CSS的引入方式 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.5 CSS3边框属性 15 1.5.1 圆角边框 15 1.5.2 特殊边框效果 16 1.6 CSS3背景设置 18 1.7 CSS3阴影和渐变 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.1 HTML5中常用的文本标签 26 2.2 CSS3文本样式属性 27 2.2.1 字体样式属性 27 2.2.2 文本外观属性 27 2.2.3 链接属性 29 2.2.4 @font-face属性 29 2.3 font-awesome字体图标 31 2.3.1 下载font-awesome 31 2.3.2 使用font-awesome 31 2.4 CSS3用户界面属性 33 2.4.1 box-sizing属性 33 2.4.2 resize调整尺寸 34 2.4.3 outline-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.1 CSS3过渡 42 3.1.1 什么是过渡 42 3.1.2 transition的子属性 43 3.2 CSS3变形 44 3.2.1 2D转换 44 3.2.2 元素变形原点 45 3.2.3 3D转换 46 3.3 CSS3动画 49 3.3.1 @keyframes规则 49 3.3.2 animation属性 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.3 HTML5表单新特性 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.1 JavaScript的基础知识 80 5.1.1 JavaScript引入方式 80 5.1.2 数据类型 81 5.1.3 变量 81 5.1.4 函数 82 5.1.5 对象 82 5.1.6 事件处理 82 5.1.7 DOM操作 84 5.1.8 getBoundingClientRect()方法 86 5.2 Canvas绘图基本步骤 87 5.2.1 创建画布 87 5.2.2 准备画笔 87 5.2.3 定义坐标和起始点 87 5.2.4 绘制线条图案 88 5.2.5 绘制三角形 90 5.3 Canvas常用方法 91 5.3.1 绘制几何图形 91 5.3.2 绘制笑脸 92 5.3.3 绘制图片 94 5.4 Canvas其他方法 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.1 JavaScript编程基础 104 6.1.1 JavaScript运算符 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.1 Bootstrap简介 161 8.1.1 什么是Bootstrap 161 8.1.2 Bootstrap的优势 162 8.1.3 Bootstrap 4的新特性 162 8.2 Bootstrap的下载和环境安装 162 8.2.1 Bootstrap的下载方式 162 8.2.2 下载Bootstrap预编译文件 163 8.2.3 下载Bootstrap源文件手动 编译 164 8.2.4 使用CDN加载Bootstrap 165 8.2.5 在HTML中引入Bootstrap 166 8.3 Bootstrap布局容器 167 8.3.1 初识布局容器 167 8.3.2 栅格系统 167 8.3.3 栅格系统基本使用 168 8.3.4 响应式布局工具 168 8.4 Flex弹性布局 169 8.5 SVG矢量图的使用 170 8.6 Bootstrap常用组件 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.3 pills导航 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 安装Gulp 198 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