第1章 HTML5+CSS3网页设计
概述 1
1.1 网页简介 1
1.1.1 网页的组成 2
1.1.2 网页的相关名词 2
1.1.3 Web标准 4
1.2 网页制作技术 4
1.2.1 HTML 5
1.2.2 CSS 5
1.2.3 JavaScript 6
1.3 浏览器 6
1.4 Visual Studio Code编辑器 7
1.4.1 下载和安装Visual Studio Code
编辑器 7
1.4.2 安装扩展 9
1.4.3 Visual Studio Code编辑器的简单
使用 12
AI实践：AI与网页工具初体验 13
本章小结 13
本章习题 13
第2章 构建HTML5页面 14
案例2-1 剪纸介绍页面 14
案例描述 14
知识引入 15
1．HTML文档的基本格式 15
2．标签分类 15
3．标签属性 16
4．页面格式化标签 17
案例实现 20
案例2-2 新闻页面 20
案例描述 20
知识引入 21
1．HTML文档头部标签 21
2．文本格式化标签 22
案例实现 23
案例2-3 图文混排页面 24
案例描述 24
知识引入 25
1．常见图像格式 25
2．图像标签 25
3．相对路径和绝对路径 27
4．特殊字符 28
案例实现 28
AI实践：基于AI开发个人作品集网站 29
本章小结 29
本章习题 29
第3章 运用CSS3美化页面 30
案例3-1 变色文字 30
案例描述 30
知识引入 31
1．认识CSS 31
2．CSS样式规则 31
3．引入CSS样式 32
4．CSS基础选择器 35
案例实现 37
案例3-2 鲜花专题栏目 38
案例描述 38
知识引入 38
1．字体样式属性 38
2．文本外观属性 41
案例实现 49
案例3-3 搜索页面 51
案例描述 51
知识引入 51
1．CSS复合选择器 51
2．CSS层叠性和继承性 54
3．CSS优先级 56
案例实现 58
AI实践：基于AI优化网站的CSS
样式 60
本章小结 60
本章习题 60
第4章 运用盒子模型划分网页模块 61
案例4-1 环保宣传页面 61
案例描述 61
知识引入 62
1．认识盒子模型 62
2．<div>标签 63
3．边框属性 64
案例实现 73
案例4-2 图书介绍专栏 75
案例描述 75
知识引入 75
1．内边距属性 75
2．外边距属性 76
3．宽度属性和高度属性 78
案例实现 78
案例4-3 背景拼图 80
案例描述 80
知识引入 80
1．设置背景颜色 80
2．设置背景图像 81
3．设置背景图像平铺 82
4．设置背景图像的位置 83
5．设置背景图像位置固定 84
6．综合设置元素的背景样式 85
7．多背景图像 85
案例实现 85
案例4-4 电商网站导航栏 87
案例描述 87
知识引入 87
1．元素类型 87
2．<span>标签 89
3．元素类型的转换 90
案例实现 91
案例4-5 创意相框 93
案例描述 93
知识引入 93
1．颜色透明度 93
2．阴影 94
3．渐变 95
案例实现 99
AI实践：基于AI开发产品展示页面 100
本章小结 100
本章习题 100
第5章 为网页添加列表和超链接 101
案例5-1 美味食谱页面 101
案例描述 101
知识引入 102
1．无序列表标签 102
2．有序列表标签 103
3．定义列表标签 104
4．列表嵌套的应用 105
案例实现 106
案例5-2 电商团购悬浮框 108
案例描述 108
知识引入 108
1．列表样式属性 108
2．通过背景图像定义列表项目符号 112
案例实现 113
案例5-3 电商页面 115
案例描述 115
知识引入 115
1．超链接 115
2．锚点链接 117
3．链接伪类控制超链接样式 118
案例实现 120
AI实践：基于AI制作在线食谱分享
网站 124
本章小结 124
本章习题 124
第6章 为网页添加表格和表单 125
案例6-1 在线简历表 125
案例描述 125
知识引入 126
1．创建表格 126
2．表格标签的属性 127
3．表格的结构 134
4．CSS控制表格样式 135
案例实现 140
案例6-2 课题问卷调研表 142
案例描述 142
知识引入 143
1．认识表单 143
2．创建表单 143
3．<input>标签 145
4．<textarea>标签 148
5．<select>标签 150
案例实现 152
案例6-3 员工信息登记表 156
案例描述 156
知识引入 157
CSS控制表单样式 157
案例实现 159
AI实践：基于AI制作注册页面 163
本章小结 163
本章习题 163
第7章 运用浮动和定位布局 164
案例7-1 古典乐器展示页面 164
案例描述 164
知识引入 165
1．布局概述 165
2．浮动属性 165
3．清除浮动 168
案例实现 173
案例7-2 中国载人航天网站页面 175
案例描述 175
知识引入 176
overflow属性 176
案例实现 178
案例7-3 智能导航界面 179
案例描述 179
知识引入 180
1．元素的定位 180
2．不同定位模式的特点 181
3．重叠顺序属性 184
案例实现 184
案例7-4 鲜花驿站首页 188
案例描述 188
知识引入 188
1．单列布局 188
2．两列布局 189
3．三列布局 190
4．网页模块命名规范 193
案例实现 195
AI实践：基于AI制作电商页面 197
本章小结 197
本章习题 197
第8章 全新的网页视听技术 198
案例8-1 影视播放页面 198
案例描述 198
知识引入 199
1．视频和音频嵌入技术概述 199
2．嵌入视频 200
3．嵌入音频 201
4．浏览器对视频和音频文件的
兼容性 202
5．控制视频宽度和高度 203
案例实现 205
案例8-2 导航栏鼠标指针悬停特效 207
案例描述 207
知识引入 207
1．transition-property属性 207
2．transition-duration属性 209
3．transition-timing-function属性 209
4．transition-delay属性 211
5．transition属性 211
案例实现 211
案例8-3 翻牌动画 213
案例描述 213
知识引入 214
1．2D变形 214
2．3D变形 219
案例实现 223
案例8-4 太阳笑脸 225
案例描述 225
知识引入 226
1．@keyframes规则 226
2．animation-name属性 226
3．animation-duration属性 227
4．animation-timing-function属性 228
5．animation-delay属性 228
6．animation-iteration-count属性 228
7．animation-direction属性 228
8．animation属性 230
案例实现 230
AI实践：基于AI制作视频网站首页 232
本章小结 232
本章习题 232
第9章 JavaScript入门 233
案例9-1 身份验证 234
案例描述 234
知识引入 234
1．认识JavaScript 234
2．JavaScript语法规则 235
3．关键字 236
4．JavaScript脚本代码的引入方式 237
5．alert()方法 238
6．prompt()方法 238
案例实现 239
案例9-2 商城下拉菜单式导航栏 239
案例描述 239
知识引入 240
1．DOM简介 240
2．对象 241
3．访问节点 241
4．设置节点样式 241
5．变量 242
6．函数 243
7．事件 246
8．JavaScript中的常用事件 246
案例实现 248
案例9-3 限时抢购页面 249
案例描述 249
知识引入 250
1．数据类型 250
2．运算符 251
3．运算符优先级与结合性 256
4．条件语句 257
5．BOM简介 262
6．Date对象 265
7．数据类型转换 266
案例实现 267
案例9-4 Tab栏切换效果 271
案例描述 271
知识引入 271
1．循环语句 271
2．跳转语句 274
3．数组 275
案例实现 277
AI实践：基于AI的在线学习平台注册与
登录页面 281
本章小结 281
本章习题 281
第10章 实战开发——好趣艺术设计部落
首页 282
10.1 效果图分析 282
10.1.1 HTML结构分析 282
10.1.2 CSS样式和JavaScript特效
分析 283
10.2 页面制作 284
10.2.1 制作头部和导航模块 284
10.2.2 制作焦点图和通知公告模块 289
10.2.3 制作主体内容模块 293
10.2.4 制作版权信息模块 308
10.3 本章小结 310