本书内容囊括当下主流的网页设计方法与理念，通过循序渐进的内容设计，引导读者每一步都聚焦项目需求，在持续迭代中完善作品。全书共11个模块，内容包括网页初探、使用HTML搭建基本网页、使用CSS美化基本网页、理解盒模型提升网页空间感、使用浮动与定位属性布局网页、添加表格和表单、添加CSS交互效果、添加多媒体元素、使用Flex布局网页、制作响应式页面和AI辅助网页设计与制作。 本书可作为职业院校计算机类相关专业的教材，也可作为网页设计爱好者的参考用书。 本书配套教学资源丰富，包括微课视频（书中扫码观看）、电子课件、教案、源代码等。选用本书作为授课教材的教师可登录机械工业出版社教育服务网（www.cmpedu.com）免费注册后下载，或联系编辑（010-88379807）咨询。

职业院校教师

目 录
前言
二维码索引
模块１　网页初探
任务1.1　认识网页 1
任务描述 1
知识准备 2
1.1.1　网页相关概念 2
1.1.2　网页技术发展的历程与趋势 2
1.1.3　网页的基本构成 3
任务实施 3
任务1.2　编写第一个网页 4
任务描述 4
知识准备 5
1.2.1　网页设计标准语言 5
1.2.2　HTML文档结构 6
1.2.3　网页开发工具 7
任务实施 9
模块2　使用HTML搭建基本网页
任务2.1　制作详情内容页 11
任务描述 11
知识准备 12
2.1.1　HTML标签概述 12
2.1.2　结构标签 13
2.1.3　文本类标签 14
2.1.4　图像标签 17
任务实施 19
拓展任务 20
任务2.2　制作超链接列表 21
任务描述 21
知识准备 21
2.2.1　超链接 21
2.2.2　列表 24
任务实施 27
拓展任务 27
模块3　使用CSS美化基本网页
任务3.1　美化详情内容页 29
任务描述 29
知识准备 30
3.1.1　认识CSS 30
3.1.2　CSS基本选择器 32
3.1.3　文本样式属性 35
3.1.4　超链接样式 36
3.1.5　元素分类和类型转换 36
3.1.6　CSS的层叠性和继承性 39
任务实施 41
拓展任务 43
任务3.2　美化超链接列表 45
任务描述 45
知识准备 45
3.2.1　列表样式 45
3.2.2　CSS高级选择器 47
3.2.3　背景样式 50
任务实施 57
拓展任务 59
模块4　理解盒模型提升网页空间感
任务4.1　制作侧边栏 63
任务描述 63
知识准备 64
4.1.1　理解盒模型 64
4.1.2　边框属性 65
4.1.3　内边距属性 68
4.1.4　外边距属性 69
任务实施 70
拓展任务 71
任务4.2　制作卡片式图文盒子 73
任务描述 73
知识准备 74
4.2.1　圆角（border-radius）属性 74
4.2.2　阴影（box-shadow）属性 75
4.2.3　box-sizing属性 76
4.2.4　overflow属性 77
任务实施 78
拓展任务 80
模块5　使用浮动与定位属性布局网页
任务5.1　制作多栏卡片式图文列表 83
任务描述 83
知识准备 84
5.1.1　网页标准流 84
5.1.2　浮动（float）属性 84
5.1.3　清除浮动 86
任务实施 87
拓展任务 90
任务5.2　制作多级导航菜单 91
任务描述 91
知识准备 92
5.2.1　定位（position）属性 92
5.2.2　z-index属性 97
任务实施 97
拓展任务 99
任务5.3　拼建完整页面 102
任务描述 102
知识准备 103
5.3.1　页面整体布局概述 103
5.3.2　创建网页模板 104
5.3.3　拼建完整页面 109
任务实施 110
拓展任务 111
模块6　添加表格和表单
任务6.1　制作表格数据展示 115
任务描述 115
知识准备 116
6.1.1　表格的主要标签 116
6.1.2　表格属性 117
6.1.3　表格常设样式 118
任务实施 120
拓展任务 123
任务6.2　制作会员注册表单 126
任务描述 126
知识准备 126
6.2.1　表单 126
6.2.2　创建表单 127
6.2.3　表单控件 127
6.2.4　表单常设样式 129
任务实施 131
拓展任务 134
任务6.3　制作环保倡议表单 138
任务描述 138
知识准备 139
6.3.1　input新增的输入类型 139
6.3.2　input新增的属性 139
任务实施 140
拓展任务 143
模块7　添加CSS交互效果
任务7.1　制作鼠标悬停时过渡变形效果 147
任务描述 147
知识准备 148
7.1.1　transform属性 148
7.1.2　transition属性 148
任务实施 151
拓展任务 153
任务7.2　制作图片轮播效果 155
任务描述 155
知识准备 155
7.2.1　@keyframes规则 155
7.2.2　animation属性 156
任务实施 158
拓展任务 160
模块8　添加多媒体元素
任务8.1　在网页中嵌入音频 163
任务描述 163
知识准备 164
8.1.1　音频格式 164
8.1.2　音频的嵌入与控制 164
8.1.3　在audio中使用source元素 165
任务实施 166
拓展任务 166
任务8.2　在网页中嵌入视频 167
任务描述 167
知识准备 167
8.2.1　视频格式 167
8.2.2　视频的嵌入与控制 168
8.2.3　在video中使用source元素 169
任务实施 169
拓展任务 171
模块9　使用Flex布局网页
任务9.1　实现多列等分布局 173
任务描述 173
知识准备 174
9.1.1　Flex布局概述 174
9.1.2　Flex容器属性 176
任务实施 183
拓展任务 184
任务9.2　实现侧边栏固定布局 187
任务描述 187
知识准备 188
9.2.1　Flex项目属性 188
9.2.2　Flex布局的典型应用 192
任务实施 192
拓展任务 194
模块10　制作响应式页面
任务10.1　实现响应式背景切换 197
任务描述 197
知识准备 198
10.1.1　响应式网页设计概述 198
10.1.2　测试响应式页面 199
10.1.3　使用媒体查询制作响应式页面 200
任务实施 202
拓展任务 203
任务10.2　实现响应式图文布局 205
任务描述 205
知识准备 207
10.2.1　相对单位 207
10.2.2　响应式图片 211
任务实施 212
拓展任务 214
模块11　AI辅助网页设计与制作
任务11.1　AI生成网页初稿 219
任务描述 219
知识准备 220
11.1.1　常见前端AI辅助工具 220
11.1.2　AI辅助网页生成原理速览 220
11.1.3　提示词三要素 222
11.1.4　新手三连问 223
任务实施 224
拓展任务 228
任务11.2　AI迭代局部细节 229
任务描述 229
知识准备 229
11.2.1　CSS轮播“三板斧” 229
11.2.2　波纹按钮 232
11.2.3　无障碍动画开关 235
任务实施 237
拓展任务 238
参考文献 239