网站前端技术案例教程（HTML+CSS+JavaScript）（第二版）

以建设旅游资讯网站为任务驱动，将复杂的网站设计转化为多个通俗易懂的任务。

第二版加入 flex 布局内容并对部分案例进行优化，使得案例编排更合理。

配备丰富的立体化教学资源，包括源代码、教学课件、配套视频等。

随着互联网的快速发展和竞争日渐激烈，网站用户体验成为了重要的关注点，专业的前端工程师随之成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。在各大人才招聘网站上都能看到不断更新的前端工程师的岗位招聘需求，因此学好前端技术对就业和发展都非常有用。前端工程师的职责是制作标准优化的代码，增加交互动态功能，并进行丰富互联网的Web开发，致力于通过技术改善用户体验。前端工程师需要掌握的技术有HTML、JavaScript、CSS，以及最新出现的各种框架如node.js、AngularJS、vue.js等。虽然未来会出现更多新技术和新框架来帮助前端工程师完成各种复杂的任务，但是它们都离不开三大核心技术：HTML、JavaScript、CSS。

本书以HTML、CSS、JavaScript 三大核心技术的知识点为主线，以建设一个旅游资讯网站为任务驱动，将复杂的网站设计操作转化为多个通俗易懂的任务，最后汇总成一个综合案例—“黄姚古镇旅游网”网站开发。全书共分11个模块、32个案例，每个案例以实例为引导，操作步骤清晰，有利于初学者系统地学习前端网页设计的基础知识，掌握网站开发的方法与过程。本书采用“案例驱动”编写方式，将知识点巧妙地设计到相应案例中，使读者在实现案例效果的同时掌握基础知识。本书案例具有连贯性，最后把前面所有案例串联起来形成一个综合案例，让学生的学习更有成就感。第二版加入了flex布局内容，并对部分案例进行了优化，使得案例编排更合理，使用更方便。

本书由黄华升任主编（负责统稿工作），罗兰花、袁淑丹、巫湘林、任子亭任副主编，另外参与编写的还有韦小梧、吴继军、陈杨明、张琴芳、胡世洋、殷玉玲、胡元闯、陈醒基、王珍珍、黄江鑫、张红军等。

本书配有案例源代码、电子教案、操作视频等教学资源。在“学习通”平台（https://mooc1.chaoxing.com/course/201676611.html）提供了慕课资源，方便开展混合式教学。

在本书编写过程中，编者得到了贺州学院领导和中国水利水电出版社的帮助与支持，在此一并表示感谢。由于时间仓促，加之编者水平有限，书中疏漏甚至错误之处在所难免，恳请读者批评指正。

编 者

2022年3月

第1章 网页制作基础知识 1
1.1 网站建设基本概念 1
1.1.1 名词解释 1
1.1.2 Web标准概述 3
1.2 网页制作入门 4
1.2.1 HTML简介 4
1.2.2 CSS简介 5
1.2.3 JavaScript简介 5
1.3 案例1：欢迎来到黄姚古镇 5
1.3.1 常用编辑工具对比 5
1.3.2 使用HBuilder编辑网页 7
第2章 建设基本HTML页面 11
2.1 案例2：黄姚古镇简介 11
2.1.1 案例描述 11
2.1.2 相关知识 12
2.1.3 实现过程 17
2.2 案例3：黄姚古镇简介引文注释 18
2.2.1 案例描述 18
2.2.2 相关知识 19
2.2.3 实现过程 21
2.3 案例4：醉黄姚—图文黄姚简介 22
2.3.1 案例描述 22
2.3.2 相关知识 22
2.3.3 实现过程 28
2.4 案例综合练习 29
第3章 使用CSS技术美化网页 31
3.1 案例5：黄姚古镇多彩标题 31
3.1.1 案例描述 31
3.1.2 相关知识 31
3.1.3 实现过程 42
3.2 案例6：黄姚古文化遗迹简介 43
3.2.1 案例描述 43
3.2.2 相关知识 44
3.2.3 实现过程 50
3.3 案例7：黄姚古镇美食推荐 51
3.3.1 案例描述 51
3.3.2 相关知识 51
3.3.3 实现过程 55
3.4 案例综合练习 57
第4章 CSS盒子模型 59
4.1 案例8：黄姚风景图文欣赏 59
4.1.1 案例描述 59
4.1.2 相关知识 60
4.1.3 实现过程 66
4.2 案例9：黄姚最受欢迎的土特产推介 68
4.2.1 案例描述 68
4.2.2 相关知识 69
4.2.3 实现过程 73
4.3 案例10：黄姚风景明信片 75
4.3.1 案例描述 75
4.3.2 相关知识 75
4.3.3 实现过程 80
4.4 案例综合练习 82
第5章 CSS的定位布局 85
5.1 案例11：友情链接 85
5.1.1 案例描述 85
5.1.2 相关知识 85
5.1.3 实现过程 91
5.2 案例12：黄姚门票网络票面 92
5.2.1 案例描述 92
5.2.2 相关知识 93
5.2.3 实现过程 99
5.3 案例13：首页的广告宣传区 101
5.3.1 案例描述 101
5.3.2 相关知识 101
5.3.3 实现过程 107
5.4 案例14：首页的布局定位 109
5.4.1 案例描述 109
5.4.2 相关知识 110
5.4.3 实现过程 114
5.5 案例15：黄姚古镇热销美食 117
5.5.1 案例描述 117
5.5.2 相关知识 118
5.5.3 实现过程 123
5.6 案例综合练习 125
第6章 列表与超链接 126
6.1 案例16：新闻页面列表 126
6.1.1 案例描述 126
6.1.2 相关知识 126
6.1.3 实现过程 132
6.2 案例17：旅游产品推荐 136
6.2.1 案例描述 136
6.2.2 相关知识 136
6.2.3 实现过程 142
6.3 案例18：首页旅游攻略导航 144
6.3.1 案例描述 144
6.3.2 相关知识 145
6.3.3 实现过程 150
6.4 案例综合练习 151
第7章 表格与表单 152
7.1 案例19：黄姚土特产销售表 152
7.1.1 案例描述 152
7.1.2 相关知识 152
7.1.3 实现过程 161
7.2 案例20：注册界面 164
7.2.1 案例描述 164
7.2.2 相关知识 165
7.2.3 实现过程 174
7.3 案例综合练习 177
第8章 CSS3基础应用 178
8.1 案例21：黄姚风景照片墙 178
8.1.1 案例描述 178
8.1.2 相关知识 178
8.1.3 实现过程 189
8.2 案例22：动态导航效果 193
8.2.1 案例描述 193
8.2.2 相关知识 193
8.2.3 实现过程 202
第9章 JavaScript基础 208
9.1 案例23：与网页对话 208
9.1.1 案例描述 208
9.1.2 相关知识 209
9.1.3 实现过程 212
9.2 案例24：控制字体大小 213
9.2.1 案例描述 213
9.2.2 相关知识 214
9.2.3 实现过程 221
9.3 案例25：商品详情提示 222
9.3.1 案例描述 222
9.3.2 相关知识 223
9.3.3 实现过程 228
9.4 案例26：照片集 230
9.4.1 案例描述 230
9.4.2 相关知识 230
9.4.3 实现过程 236
9.5 案例27：选项卡 240
9.5.1 案例描述 240
9.5.2 相关知识 240
9.5.3 实现过程 244
9.6 案例综合练习 248
第10章 JavaScript核心对象 249
10.1 案例28：秒杀商品 249
10.1.1 案例描述 249
10.1.2 相关知识 250
10.1.3 实现过程 257
10.2 案例29：抽取幸运观众 260
10.2.1 案例描述 260
10.2.2 相关知识 261
10.2.3 实现过程 264
10.3 案例30：文章的展开与收缩 266
10.3.1 案例描述 266
10.3.2 相关知识 267
10.3.3 实现过程 270
10.4 案例综合练习 272
第11章 事件处理 274
11.1 案例31：旅游商品展示 274
11.1.1 案例描述 274
11.1.2 相关知识 275
11.1.3 实现过程 279
11.2 案例32：追随鼠标的公告框 281
11.2.1 案例描述 281
11.2.2 相关知识 281
11.2.3 实现过程 285
11.3 案例综合练习 286
第12章 综合案例 287
12.1 网站开发流程 287
12.2 “黄姚古镇旅游网”网站开发 288
12.2.1 准备工作 289
12.2.2 网站公共部分模板开发 294
12.2.3 网站主要页面开发 297
12.3 网站发布 305
参考文献 308

1. 信息技术基础（麒麟操作系统+WPS Office） [主编　芮雪　蒋莉　王亮亮]
2. Office高级应用项目式教程（第2版） [主编 李观金 张倩文 黎夏克 ]
3. 巧用翻译学英语：英汉互译500例 [王学文 著]
4. 高等教育多维评价体系构建与高质量发展研究 [张妍 著]
5. 系统规划与管理师章节习题与考点特训（第二版） [主编 薛大龙]
6. 计算机操作系统实践指导（openEuler版） [主编 秦光 曾陈萍 岳付强]
7. 信息系统管理工程师真题及模考卷精析（适用机考） [主 编 薛大龙 程 刚 上官绪]
8. 航海类院校体育教育教学研究 [张利超 李宁 著]
9. 新时代背景下我国职业教育产教融合长效机制建设研究 [王玉贤 著]
10. 电路分析 [主编 李飞 毛先柏]
11. 信息系统管理工程师（适用第2版大纲）一站通关 [指尖疯　编著]
12. 传统山水画论解读与实践 [陈钠 著]
13. 网络工程师备考一本通（适配第6版考纲） [夏杰 编著]
14. 陈孝云的职教理想与情怀 [祝吉太 江传瑞 张义廷 著]
15. 地方本科院校电子信息学科课程思政案例集 [王甫]
16. Excel数据处理与分析（第二版） [主编 张志明 邹 蕾]
17. 网络工程师5天修炼（适配第6版考纲） [主编　朱小平 施游]
18. 仓储管理实务（第二版） [周宁武 编著]
19. 基于AE与C#的地理信息系统二次开发 [李小根 贾艳昌 乔翠平 姜彤 ]
20. 2023年长沙市文化和旅游业发展报告 [主编 陈莉]
21. 舞台化妆造型设计 [主编 刘思彤 张 涛 张忆雨]
22. 产教融合视角高校体育专业实践教学体系构建研究 [杨柳青 叶华兵 著]
23. 知识图谱及应用案例 [张善文 黄文准 于长青 陈明淑]
24. Python程序设计案例教程（微课版） [主编　石利平　田辉平　余以胜]
25. 皓月繁星：青少年儿童心理成长手册 [主　编　林赞歌 副主编　杜志南]
26. 材料力学 [章宝华 赵新胜 徐斌]
27. 系统集成项目管理工程师考试32小时通关（第3版） [主编　薛大龙 副主编　上官绪阳]
28. 软考论文高分特训与范文10篇——系统分析师（第二版） [薛大龙 邹月平 施游]
29. 黄河海勃湾水利枢纽防凌安全运行 [王战领 王丛发 范瑜彬 著]
30. 大学生心理健康教育 [方雄 著]