第1章 HTML页面结构构建 1
项目1-1 个人简介页面 2
项目需求 2
知识储备 2
1．HTML概述 2
2．浏览器 2
3．Visual Studio Code编辑器 3
4．标签概述 8
5．页面格式化标签 9
6．文本格式化标签 10
7．图像标签 11
8．HTML实体 12
项目实现 13
项目1-2 新闻页面 14
项目需求 14
知识储备 14
1．列表 14
2．列表嵌套 17
3．超链接 17
4．容器标签 18
5．元素 18
项目实现 19
本章小结 20
课后习题 20
第2章 CSS页面样式美化 22
项目2-1 文章详情页面 23
项目需求 23
知识储备 23
1．CSS概述 23
2．CSS样式规则 24
3．CSS的引入方式 24
4．基础选择器 25
5．字体属性 25
6．字体图标 27
7．文本外观属性 32
8．CSS注释 34
项目实现 34
项目2-2 下拉菜单页面 36
项目需求 36
知识储备 36
1．复合选择器 36
2．伪类选择器 38
3．伪元素选择器 39
4．CSS的三大特性 40
5．列表样式属性 42
6．CSS标准盒模型 43
7．边框属性 44
8．内边距属性 47
9．外边距属性 48
10．盒子的宽度和高度 48
11．box-sizing属性 49
12．display属性 49
项目实现 49
项目2-3 商城首页 51
项目需求 51
知识储备 51
1．背景属性 51
2．渐变 53
3．object-fit属性 55
4．浮动布局 55
5．清除浮动 56
6．语义化标签 60
7．弹性盒布局 60
8．元素的定位 63
9．层叠等级属性 65
10．阴影属性 65
项目实现 66
本章小结 68
课后习题 68
第3章 表格和表单 70
项目3-1 图书列表页面 70
项目需求 70
知识储备 71
1．表格标签 71
2．CSS控制表格样式 72
3．表格标签属性 73
项目实现 74
项目3-2 安全教育活动调查问卷页面 75
项目需求 75
知识储备 76
1．表单标签 76
2．<form>标签 77
3．<input>标签 77
4．<label>标签 78
5．<textarea>标签 79
6．<select>、<optgroup>、<option>标签 80
项目实现 81
本章小结 83
课后习题 83
第4章 JavaScript与视频、音频 85
项目4-1 视频播放器 85
项目需求 85
知识储备 86
1．JavaScript概述 86
2．JavaScript的引入方式 86
3．JavaScript常用的输入和输出语句 87
4．JavaScript注释 87
5．变量 88
6．数据类型 89
7．运算符 89
8．函数 91
9．分支结构 92
10．循环结构 94
11．DOM简介 95
12．获取元素 95
13．操作元素 96
14．事件 97
15．注册事件 98
16．Math对象 98
17．<video>标签 100
18．video对象 100
项目实现 102
项目4-2 音频播放器 105
项目需求 105
知识储备 106
1．<audio>标签 106
2．audio对象 107
项目实现 107
本章小结 111
课后习题 111
第5章 阶段项目——在线学习平台 113
任务5-1 项目开发准备 113
项目分析 113
项目目录结构 114
任务5-2 快捷导航模块 115
任务需求 115
任务实现 115
任务5-3 导航栏模块 115
任务需求 115
任务实现 116
任务5-4 侧边导航栏模块 116
任务需求 116
任务实现 116
任务5-5 轮播图模块 116
任务需求 116
任务实现 116
任务5-6 精品书籍推荐模块 116
任务需求 116
任务实现 117
任务5-7 版权声明模块 117
任务需求 117
任务实现 117
本章小结 117
第6章 Canvas绘图与CSS动画 118
项目6-1 水果销量饼图页面 118
项目需求 118
知识储备 119
1．认识画布 119
2．使用画布 119
3．绘制线条 120
4．线条的样式 121
5．路径 122
6．填充路径 123
7．绘制文本 124
8．绘制圆或弧线 125
项目实现 125
项目6-2 鲜花列表页面 128
项目需求 128
知识储备 129
1．过渡属性 129
2．二维变形 130
3．三维变形 132
项目实现 134
项目6-3 课程宣传页面 138
项目需求 138
知识储备 139
动画属性 139
项目实现 142
本章小结 146
课后习题 146
第7章 移动Web屏幕适配 148
项目7-1 线上问诊页面 148
项目需求 148
知识储备 149
1．屏幕分辨率和设备像素比 149
2．视口 150
3．媒体查询 151
4．二倍图 154
5．rem单位 155
6．rem适配方案 156
7．Less 158
项目实现 162
项目7-2 音乐屋首页页面 165
项目需求 165
知识储备 166
1．流式布局 166
2．vw单位和vh单位 167
项目实现 168
本章小结 173
课后习题 174
第8章 Bootstrap基础入门 175
项目8-1 需求定制列表页面 175
项目需求 175
知识储备 176
1．Bootstrap概述 176
2．Bootstrap的特点 176
3．Bootstrap的组成 177
4．Bootstrap的下载和引入 177
5．Bootstrap布局容器 181
6．Bootstrap栅格系统 182
7．Bootstrap工具类 184
项目实现 186
项目8-2 用户注册页面 189
项目需求 189
知识储备 190
1．表单控件样式类 190
2．表单布局方式 192
3．文本格式类 194
4．文本颜色类 194
5．背景颜色类 195
6．边框样式类 196
项目实现 197
本章小结 200
课后习题 200
第9章 Bootstrap组件应用 202
项目9-1 轮播图页面 202
项目需求 202
知识储备 203
1．什么是组件 203
2．Bootstrap组件的基本使用方法 204
3．轮播组件 205
4．定位样式类 207
项目实现 208
项目9-2 课程介绍页面 210
项目需求 210
知识储备 211
1．浮动样式类 211
2．图像样式类 211
3．阴影样式类 212
4．Bootstrap Icons图标库 213
5．列表样式类 215
6．卡片组件 216
7．按钮组件 218
项目实现 220
项目9-3 下拉菜单导航栏页面 223
项目需求 223
知识储备 224
1．导航栏组件 224
2．下拉菜单组件 227
项目实现 230
本章小结 232
课后习题 233
第10章 综合项目——在线鲜花商城 235
任务10-1 项目开发准备 235
项目分析 235
项目初始化 237
任务10-2 快捷导航模块 238
任务需求 238
任务实现 238
任务10-3 导航栏模块 239
任务需求 239
任务实现 239
任务10-4 轮播图模块 239
任务需求 239
任务实现 240
任务10-5 服务模块 240
任务需求 240
任务实现 241
任务10-6 鲜花推荐模块 241
任务需求 241
任务实现 242
任务10-7 送长辈鲜花模块 242
任务需求 242
任务实现 243
任务10-8 晒单评价模块 244
任务需求 244
任务实现 245
任务10-9 服务条款模块 245
任务需求 245
任务实现 246
任务10-10 版权声明模块 246
任务需求 246
任务实现 246
本章小结 246