Html5+JavaScript+Css3开发手册：基础·案例·应用

《Html5 JavaScript Css3开发手册：基础·案例·应用》是“计算机科学与技术手册系列”图书之一，该系列图书内容全面，以理论联系实际、能学到并做到为宗旨，以技术为核心，以案例为辅助，引领读者全面学习基础技术、代码编写方法和具体应用项目，旨在为想要进入相应领域的技术人员提供新而全的技术性内容及案例。 本书是一本侧重编程基础 实践的Web前端开发图书，从基础、案例、应用三个层次循序渐进地介绍了Web前端开发从入门到实战所需知识，使读者在打好基础的同时快速提升实践能力。本书内容充实，给读者提供了较为丰富全面的技术支持和案例强化，通过各种示例将学习与应用相结合，打造轻松学习、零压力学习的环境，通过案例对所学知识进行综合应用，通过开发实际项目将各个知识点应用到实际工作中，帮助读者实现学以致用，快速掌握前端开发的各项技能。 本书提供丰富的资源，包含131个实例、10个案例、2个项目，力求为读者打造一本基础 案例 应用一体化的、精彩的前端开发图书。 本书不仅适合初学者、编程爱好者、零基础的编程自学者，也可供计算机相关专业师生、程序开发人员以及程序测试和维护人员等阅读参考。

: 无 主编推荐: ①分层学习，学以致用。本书将核心知识、案例和应用分成三个层级进行循序渐进的学习和实践，力争短时间快速掌握相关技能。 ②案例丰富，通过大量案例、实例讲解所学技能，举一反三，提高读者应用技能的能力。 ③本书配备了视频录像、资源库、社区技术支持、QQ在线等服务。

基础篇

第1章　HTML基础

1.1　HTML基础   2

1.1.1　什么是HTML   2

1.1.2　HTML的发展历程   3

1.2　HTML5相关概念与基本结构   3

1.2.1　HTML5的相关概念   3

1.2.2　HTML5的基本结构   4

【实例1.1】运用属性，渲染页面效果   6

1.3　编写个HTML5文件   9

1.3.1　HTML5文件的编写方法   9

1.3.2　手工编写页面   9

1.3.3　使用可视化软件制作页面   10

第2章　标题和段落

2.1　添加标题   15

2.1.1　添加各级标题   16

【实例2.1】巧用标题标签，编写程序员笑话   16

2.1.2　设置标题的对齐方式   17

【实例2.2】活用文字居中，推荐商品信息   18

2.2　添加段落   18

2.2.1　段落标签的使用   18

【实例2.3】巧用段落标签，介绍创意文字   19

2.2.2　段落中的换行标签   19

【实例2.4】巧用换行，书写故事   19

2.3　添加文字装饰效果   20

2.3.1　设置上标与下标   20

【实例2.5】使用上下标，展示数学方程式   21

2.3.2　文字的斜体、下划线与删除线   21

【实例2.6】活用文字装饰，推荐商品信息   21

2.4　添加水平线   22

【实例2.7】巧用水平线绘制行表格   22

2.5　综合案例——二十四节气歌   23

2.5.1　分析数据   23

2.5.2　实现过程   24

2.6　实战练习   24

第3章　图像和超链接

3.1　添加图像   25

3.1.1　图像的基本格式   25

3.1.2　添加图像   26

【实例3.1】使用标签实现五子棋的游戏简介   26

3.2　设置图像属性   27

3.2.1　图像大小与边框   27

【实例3.2】改变手机商品详情中的图片大小和边框   27

3.2.2　替换文本与提示文字   28

【实例3.3】设置图片的提示文字与替换文本   28

3.2.3　图像间距与对齐方式   29

【实例3.4】使用align属性改变头像的位置   30

3.3　添加超链接   30

3.3.1　添加文本链接   30

【实例3.5】巧用文本链接实现商城导航   31

3.3.2　添加书签链接   31

【实例3.6】巧用书签链接实现商城网页内部跳转   32

3.4　图像的超链接与热区链接   33

3.4.1　图像的超链接   33

【实例3.7】添加图片链接实现手机风暴模块   33

3.4.2　图像热区链接   35

【实例3.8】使用热区链接添加多个链接地址   35

3.5　综合案例——实现明日学院明星讲师页面的跳转   36

3.5.1　案例分析   37

3.5.2　实现过程   37

3.6　实战练习   38

第4章　表格与标签、标签

4.1　简单表格   39

4.1.1　简单表格的制作   39

【实例4.1】使用表格标签编写考试成绩单   40

4.1.2　表头的设置   41

【实例4.2】使用表头标签制作简单课程表   41

4.2　表格的高级应用   42

4.2.1　表格的样式   42

【实例4.3】制作商品推荐表格   43

4.2.2　表格的合并   44

【实例4.4】使用表格制作复杂课程表   44

4.2.3　表格的分组   45

【实例4.5】使用表格分组制作学生联系表   45

4.3　标签   46

4.3.1　标签的介绍   46

【实例4.6】使用标签制作古诗一首   47

4.3.2　标签的应用   47

【实例4.7】使用标签制作个人简历   48

4.4　标签   48

4.4.1　标签的介绍   48

【实例4.8】使用不同的语言表述“我爱你”   49

4.4.2　标签的应用   49

【实例4.9】使用标签制作公司介绍短文   49

4.5　综合案例——制作网页中的女装模块   50

4.5.1　案例分析   50

4.5.2　实现过程   51

4.6　实战练习   52

第5章　列表

5.1　列表的标签   53

5.2　无序列表   54

5.2.1　无序列表标签   54

【实例5.1】运用无序列表显示NBA东部联盟球队前四强   54

5.2.2　无序列表属性    54

【实例5.2】运用无序列表显示全球品牌价值100强的前三名   55

5.3　有序列表   57

5.3.1　有序列表标签   57

【实例5.3】运用有序列表显示2018年俄罗斯世界杯排名前四强   57

5.3.2　有序列表属性   58

【实例5.4】运用有序列表制作商城页面   58

5.4　定义列表   59

【实例5.5】运用定义列表显示古诗二首   60

5.5　无序列表和有序列表的嵌套   60

【实例5.6】运用无序列表和有序列表制作导航栏   60

5.6　综合案例——使用列表制作二级导航菜单   62

5.6.1　案例分析   62

5.6.2　案例实现   62

5.7　实战练习   64

第6章　表单

6.1　表单概述   65

6.1.1　什么是表单   65

6.1.2　表单标签   65

6.2　输入标签   67

6.2.1　文本框和密码框   67

【实例6.1】制作商城中账号登录页面   68

6.2.2　单选按钮和复选框   69

【实例6.2】实现购物车页面选择商品功能   69

6.2.3　按钮   70

【实例6.3】制作收货地址信息填写页面   71

6.2.4　图像域和文件域   72

【实例6.4】实现注册页面中的上传图像功能   73

6.3　文本域和列表   74

6.3.1　文本域   74

【实例6.5】制作商品评价页面中的评价输入框   74

6.3.2　列表/菜单   74

【实例6.6】实现个人档案填写   75

6.4　综合案例——制作在线租房信息填写页面   77

6.4.1　案例分析   77

6.4.2　案例实现   78

6.5　实战练习   81

第7章　CSS3选择器

7.1　CSS3选择器概述   82

7.1.1　CSS3的发展史   82

7.1.2　一个简单的CSS3示例   83

7.1.3　选择器概述   85

7.2　基础选择器   86

7.2.1　元素选择器   86

【实例7.1】使用元素选择器实现生日贺卡的样式   86

7.2.2　类选择器   87

7.2.3　ID选择器   88

【实例7.2】制作网购商城中的爆款特卖页面   89

7.2.4　属性选择器   91

【实例7.3】制作51购商城首页的手机风暴版块   91

7.3　其他选择器   93

7.3.1　后代选择器   93

7.3.2　子代选择器   94

7.3.3　相邻兄弟元素选择器   95

7.3.4　通用兄弟元素选择器   96

7.4　伪类和伪元素选择器   97

7.4.1　伪类选择器   97

7.4.2　伪元素选择器   98

【实例7.4】制作vivo X9s手机的宣传页面   98

7.5　综合案例——仿制个人空间主页   100

7.5.1　案例分析   100

7.5.2　案例实现   101

7.6　实战练习   103

第8章　CSS3常用属性

8.1　文本相关属性   104

8.1.1　文字相关属性   104

【实例8.1】制作网购商城的商品抢购页面   106

8.1.2　文本相关属性   107

【实例8.2】演示word-break属性的功能   108

8.2　背景相关属性   109

8.2.1　背景常规属性   109

【实例8.3】实现为登录页面插入背景图像   111

8.2.2　CSS3新增背景属性   112

8.3　列表相关属性   116

【实例8.4】更改鼠标悬停在二级导航菜单上时的列表项符号   116

8.4　框模型   118

8.4.1　框模型概述   118

8.4.2　设置元素的大小   118

8.4.3　设置外边距   118

【实例8.5】实现对vivo系列手机儿童模式的介绍   120

8.4.4　设置内边距   121

【实例8.6】制作手机商城中的新品专区页面   121

8.4.5　设置边框   122

【实例8.7】制作购物商城中的商品列表页面   124

8.5　定位相关属性   125

8.5.1　设置元素的位置   125

【实例8.8】实现鼠标滑过垂直菜单时，展开对应的内容   126

8.5.2　设置元素的浮动   127

【实例8.9】在商品详情页面，标签设置向左浮动   128

8.6　综合案例——制作换季换新机促销页面   129

8.6.1　案例分析   129

8.6.2　案例实现   129

8.7　实战练习   131

第9章　响应式网页设计

9.1　响应式网页设计概述   132

9.1.1　响应式网页设计的概念   132

9.1.2　响应式网页设计的优缺点   132

9.1.3　响应式网页设计的技术原理   133

9.2　像素和屏幕分辨率   134

9.2.1　像素和屏幕分辨率   134

9.2.2　设备像素和CSS像素   134

9.3　视口   135

9.3.1　视口简介   135

9.3.2　视口常用属性   136

9.3.3　媒体查询   136

9.4　响应式网页的布局设计   137

9.4.1　常用布局类型   137

9.4.2　布局的实现方式   138

9.4.3　响应式布局的设计与实现   139

【实例9.1】实现51购商城登录页面的响应式布局   140

9.5　综合案例——制作响应式表格   142

9.5.1　案例分析   142

9.5.2　案例实现   142

9.6　实战练习   144

第10章　Bootstrap基础

10.1　Bootstrap概述   145

10.1.1　Bootstrap是什么   145

10.1.2　Bootstrap的优点   145

10.1.3　Bootstrap包含的内容   146

10.2　Bootstrap的下载与安装   146

10.2.1　Bootstrap的下载   146

10.2.2　Bootstrap的文件结构   147

10.3　Bootstrap通用样式   148

10.3.1　文字相关样式   148

【实例10.1】实现《东北吃货进行曲》的歌词   149

【实例10.2】实现华为P30 Pro手机简介   150

10.3.2　颜色相关样式   150

【实例10.3】制作拼多多中多多果然获取水滴页面   152

10.3.3　设置内外边距   153

【实例10.4】制作人见人爱奖状页面   154

10.3.4　设置边框与浮动   154

【实例10.5】仿制简易密码输入器页面   155

【实例10.6】仿制电商网站首页中“用券爆款”页面   156

10.4　Bootstrap中的网格布局   157

10.4.1　网格系统的基本使用   157

【实例10.7】使用网格系统来布局一则360每日趣玩消息   159

10.4.2　自动布局列   159

【实例10.8】设计游戏列表页面的响应式布局   161

10.4.3　项目的对齐处理   161

【实例10.9】设计游戏列表的响应式水平对齐方式   162

【实例10.10】设计游戏列表的响应式垂直对齐方式   164

10.4.4　列的偏移、嵌套和重排序   164

【实例10.11】使用列偏移等间距对齐游戏列表   165

【实例10.12】实现为商品列表按价格进行排序   166

10.5　综合案例——制作音乐网站的热门推荐列表   167

10.5.1　案例分析   168

10.5.2　案例实现   168

10.6　实战练习   169

第11章　JavaScript基础

11.1　JavaScript概述   170

11.1.1　JavaScript的发展   170

11.1.2　JavaScript的主要特点   171

11.1.3　JavaScript的应用   171

11.1.4　JavaScript在HTML中的使用   172

【实例11.1】编写个JavaScript程序   173

【实例11.2】调用外部JavaScript文件   173

11.1.5　基本语法   174

11.2　数据类型   176

11.2.1　数值型   176

11.2.2　字符串型   178

11.2.3　布尔型   179

11.2.4　特殊数据类型   179

11.3　变量   180

11.3.1　变量的命名   180

11.3.2　变量的声明   180

11.3.3　变量的赋值   181

11.3.4　变量的类型   182

【实例11.3】输出球员信息   182

11.4　运算符和表达式   182

11.4.1　算术运算符   182

【实例11.4】将华氏度转换为摄氏度   183

11.4.2　字符串运算符   183

【实例11.5】字符串运算符的使用   184

11.4.3　比较运算符   184

【实例11.6】比较运算符的使用   185

11.4.4　赋值运算符   185

【实例11.7】赋值运算符的使用   185

11.4.5　逻辑运算符   186

【实例11.8】逻辑运算符的使用   186

11.4.6　条件运算符   186

【实例11.9】条件运算符的使用   187

11.4.7　其他运算符   187

11.4.8　运算符优先级   188

【实例11.10】运算符优先级的使用   189

11.4.9　表达式   190

11.5　数据类型的转换规则   190

11.6　综合案例——判断员工收入   191

11.6.1　案例分析   191

11.6.2　实现过程   191

11.7　实战练习   192

第12章　流程控制

12.1　条件判断语句   193

12.1.1　if语句   193

【实例12.1】获取3个数中的值   194

【实例12.2】判断3是奇数还是偶数   196

【实例12.3】输出考试成绩对应的等级   197

【实例12.4】判断女职工是否已经退休   198

12.1.2　switch语句   198

【实例12.5】输出奖项级别及奖品   200

12.2　循环语句   200

12.2.1　while语句   201

【实例12.6】计算3000米障碍比赛的完整圈数   202

12.2.2　do...while语句   202

【实例12.7】计算1 2 … 100的和   203

12.2.3　for语句   203

【实例12.8】计算50以内所有奇数的和   204

12.2.4　循环语句的嵌套   205

【实例12.9】输出乘法口诀表   205

12.3　跳转语句   205

12.3.1　continue语句   206

【实例12.10】输出影厅座位图   206

12.3.2　break语句   207

12.4　综合案例——输出表格   208

12.4.1　案例分析   208

12.4.2　实现过程   208

12.5　实战练习   209

第13章　函数

13.1　函数的定义和调用   210

13.1.1　函数的定义   210

13.1.2　函数的调用   211

13.2　函数的参数和返回值   213

13.2.1　函数的参数   213

【实例13.1】输出图书名称和图书作者   213

13.2.2　函数的返回值   214

【实例13.2】计算购物车中商品的总价   214

13.3　嵌套函数   215

13.3.1　函数的嵌套定义   215

13.3.2　函数的嵌套调用   215

【实例13.3】获得选手的平均分   216

13.4　变量的作用域   216

13.4.1　全局变量和局部变量   216

13.4.2　变量的优先级   217

13.5　内置函数   217

13.5.1　数值处理函数   217

13.5.2　字符串处理函数   219

13.6　在表达式中定义函数   220

【实例13.4】输出星号金字塔形图案   221

13.7　综合案例——输出自定义的表格   221

13.7.1　案例分析   222

13.7.2　实现过程   222

13.8　实战练习   223

第14章　对象

14.1　对象简介   224

14.1.1　什么是对象   224

14.1.2　对象的属性和方法   224

14.1.3　JavaScript对象的种类   225

14.2　自定义对象的创建   225

14.2.1　直接创建自定义对象   226

14.2.2　通过自定义构造函数创建对象   226

【实例14.1】输出演员个人简介   227

14.2.3　通过Object对象创建自定义对象   228

14.3　Array对象   229

14.3.1　数组介绍   230

14.3.2　定义数组   230

14.3.3　操作数组元素   231

【实例14.2】输出3个学霸姓名   232

14.3.4　获取数组的长度   234

【实例14.3】输出省份、省会以及旅游景点   234

14.3.5　数组的方法   235

14.4　String对象   240

14.4.1　String对象的创建   240

14.4.2　获取字符串的长度   241

14.4.3　String对象的方法   241

【实例14.4】获取字符“兵”在绕口令中出现的次数   242

【实例14.5】截取网站公告标题   244

14.5　Math对象   247

14.5.1　Math对象的属性   247

14.5.2　Math对象的方法   248

【实例14.6】生成指定位数的随机数   248

14.6　Date对象   249

14.6.1　创建Date对象   249

14.6.2　Date对象的方法   250

【实例14.7】输出当前的日期和时间   252

【实例14.8】获取当前日期距离明年元旦的天数   252

14.7　综合案例——2020年内地电影票房排行   253

14.7.1　案例分析   253

14.7.2　实现过程   254

14.8　实战练习   255

第15章　事件处理

15.1　事件与事件处理概述   256

15.1.1　什么是事件   256

15.1.2　事件的调用   257

15.1.3　Event对象   258

15.2　表单相关事件   258

15.2.1　获得焦点与失去焦点事件   258

【实例15.1】改变文本框的背景颜色   258

15.2.2　失去焦点内容改变事件   259

【实例15.2】改变文本框的字体颜色   259

15.2.3　表单提交与重置事件   260

【实例15.3】验证提交表单中是否有空值   260

15.3　鼠标键盘事件   261

15.3.1　鼠标单击事件   261

【实例15.4】动态改变页面的背景颜色   261

15.3.2　鼠标按下和松开事件   262

【实例15.5】用事件模拟超链接标签的功能   262

15.3.3　鼠标移入移出事件   263

【实例15.6】动态改变图片的透明度   263

15.3.4　鼠标移动事件   263

15.3.5　键盘事件   264

15.4　页面事件   265

15.4.1　页面加载事件   265

【实例15.7】动态改变图片大小   265

15.4.2　页面大小事件   266

15.5　综合案例——二级联动菜单   266

15.5.1　案例分析   266

15.5.2　实现过程   267

15.6　实战练习   268

第16章　DOM编程

16.1　DOM概述   269

16.2　获取HTML元素   270

16.2.1　通过元素的id属性获取元素   271

【实例16.1】在页面的指定位置显示当前日期   271

16.2.2　通过元素的标签名获取元素   271

16.2.3　通过元素的类名获取元素   272

16.3　DOM对象节点属性   272

16.4　节点的操作   273

16.4.1　创建节点   273

【实例16.2】补全古诗   273

16.4.2　插入节点   274

【实例16.3】向页面中插入文本   274

16.4.3　复制节点   275

【实例16.4】复制下拉菜单   275

16.4.4　删除节点   275

【实例16.5】动态删除选中的文本   276

16.4.5　替换节点   276

【实例16.6】选择头像   276

16.5　获取或设置元素内容   277

【实例16.7】显示时间和问候语   277

16.6　综合案例——歌曲置顶和删除   278

16.6.1　案例分析   278

16.6.2　实现过程   278

16.7　实战练习   280

第17章　jQuery技术

17.1　jQuery下载与配置   281

17.1.1　下载jQuery   281

17.1.2　配置jQuery   282

17.2　jQuery选择器   282

17.2.1　jQuery的工厂函数   282

17.2.2　基本选择器   283

【实例17.1】筛选元素并添加新的样式   283

17.2.3　层级选择器   284

【实例17.2】为指定元素添加样式   285

17.2.4　过滤选择器   285

【实例17.3】实现带表头的双色表格   286

17.2.5　属性选择器   288

17.2.6　表单选择器   288

17.3　jQuery控制页面   289

17.3.1　对元素内容和值进行操作   289

【实例17.4】为多行列表框设置并获取值   291

17.3.2　对DOM节点进行操作   291

【实例17.5】开心小农场   293

17.3.3　对元素属性进行操作   294

【实例17.6】改变图片大小   295

17.3.4　对元素的CSS样式进行操作   295

【实例17.7】为图片添加和去除边框   296

17.4　jQuery的事件处理   297

17.4.1　页面加载响应事件   297

17.4.2　jQuery中的事件   298

17.4.3　事件绑定   299

17.4.4　模拟用户操作   300

【实例17.8】切换表情图片   300

17.5　jQuery的动画效果   301

17.5.1　基本的动画效果   301

【实例17.9】实现自动隐藏式菜单   302

17.5.2　滑动效果   303

17.5.3　自定义的动画效果   304

【实例17.10】实现幕帘的效果   304

17.6　综合案例——验证用户注册信息   306

17.6.1　案例分析   306

17.6.2　实现过程   306

17.7　实战练习   308

第18章　Vue.js框架

18.1　什么是Vue.js   309

18.2　Vue.js的安装   310

18.3　Vue实例及选项   311

18.3.1　挂载元素   311

18.3.2　数据   311

18.3.3　方法   312

18.4　数据绑定   313

18.4.1　插值   313

【实例18.1】插入文本   313

【实例18.2】插入HTML内容   313

18.4.2　过滤器   314

【实例18.3】截取新闻标题   314

18.5　指令   315

18.5.1　v-bind指令   315

【实例18.4】设置文字样式   315

18.5.2　v-on指令   316

【实例18.5】动态改变图片透明度   316

18.5.3　v-if指令   317

18.5.4　v-else指令   318

18.5.5　v-for指令   318

18.5.6　v-model指令   319

18.6　综合案例——选择职位   319

18.6.1　案例分析   319

18.6.2　实现过程   320

18.7　实战练习   321

案例篇

第19章　游戏公园（HTML CSS JavaScript Bootstrap）

19.1　系统预览   323

19.2　案例准备   323

19.3　功能结构   323

19.4　实现过程   324

19.4.1　“主页”的设计与实现   324

19.4.2　“博客列表”的设计与实现   327

19.4.3　“博客详情”的设计与实现   328

19.4.4　“关于我们”的设计与实现   329

第20章　咸鱼简历（HTML CSS jQuery Bootstrap）

20.1　系统预览   333

20.2　案例准备   335

20.3　功能结构   335

20.4　实现流程   336

20.4.1　导航菜单   336

20.4.2　自我介绍   337

20.4.3　工作经验   339

20.4.4　参与项目   340

20.4.5　联系方式   340

第21章　抖音秀（HTML CSS JavaScript H5FullScreenPage插件)

21.1　系统预览   342

21.2　案例准备   342

21.3　功能结构   343

21.4　实现过程   343

21.4.1　页头页尾区   343

21.4.2　视频功能区   345

21.4.3　挂件功能区   347

第22章　旅游信息网（HTML CSS jQuery jquery.faded插件）

22.1　案例效果预览   349

22.2　案例准备   351

22.3　功能结构   351

22.4　实现过程   351

22.4.1　实现网站公共header和footer   351

22.4.2　网站主页设计   354

22.4.3　“留下足迹”页面设计   356

第23章　用户注册与登录验证（HTML CSS JavaScript jQuery）

23.1　案例效果预览   358

23.2　案例准备   358

23.3　业务流程   359

23.4　实现过程   359

23.4.1　注册页面设计   359

23.4.2　用户注册验证   360

23.4.3　登录页面设计   361

23.4.4　验证滑块设计   362

23.4.5　用户登录验证   363

第24章　计算器（HTML CSS JavaScript）

24.1　案例效果预览   365

24.2　案例准备   365

24.3　业务流程   366

24.4　实现过程   366

24.4.1　计算器页面设计   366

24.4.2　基本计算功能的实现   368

24.4.3　特殊功能的实现   370

第25章　幸运大抽奖（HTML CSS JavaScript）

25.1　案例效果预览   371

25.2　案例准备   371

25.3　业务流程   372

25.4　实现过程   372

25.4.1　抽奖页面设计   372

25.4.2　抽奖功能的实现   373

第26章　贪吃蛇小游戏（HTML CSS JavaScript）

26.1　案例效果预览   377

26.2　案例准备   378

26.3　业务流程   378

26.4　实现过程   378

26.4.1　游戏初始页面设计   378

26.4.2　游戏操作   380

第27章　别踩白块儿小游戏（HTML CSS JavaScript）

27.1　案例效果预览   382

27.2　案例准备   382

27.3　业务流程   383

27.4　实现过程   383

27.4.1　游戏初始页面设计   383

27.4.2　游戏页面设计   385

27.4.3　游戏结束与重新开始游戏   386

第28章　手机端看图猜词小游戏（HTML CSS JavaScript jQuery）

28.1　案例效果预览   388

28.2　案例准备   388

28.3　业务流程   388

28.4　实现过程   389

28.4.1　构建看图猜词页面   389

28.4.2　看图猜词功能的实现   390

应用篇

第29章　51购商城

29.1　项目的设计思路   395

29.1.1　项目概述   395

29.1.2　页面预览   396

29.1.3　系统功能结构   397

29.1.4　系统业务流程   397

29.1.5　文件夹组织结构   398

29.2　主页的设计与实现   398

29.2.1　主页的设计   398

29.2.2　顶部区和底部区功能的实现   399

29.2.3　商品分类导航功能的实现   401

29.2.4　轮播图功能的实现   402

29.2.5　商品推荐功能的实现   404

29.2.6　适配移动端的实现   405

29.3　商品列表页面的设计与实现   406

29.3.1　商品列表页面的设计   406

29.3.2　分类选项功能的实现   406

29.3.3　商品列表区的实现   408

29.4　商品详情页面的设计与实现   409

29.4.1　商品详情页面的设计   410

29.4.2　图片放大镜效果的实现   411

29.4.3　商品概要功能的实现   412

29.4.4　商品评价功能的实现   414

29.4.5　猜你喜欢功能的实现   415

29.5　购物车页面的设计与实现   416

29.5.1　购物车页面的设计   417

29.5.2　购物车页面的实现   417

29.6　付款页面的设计与实现   418

29.6.1　付款页面的设计   418

29.6.2　付款页面的实现   418

29.7　登录注册页面的设计与实现   421

29.7.1　登录注册页面的设计   421

29.7.2　登录页面的实现   421

29.7.3　注册页面的实现   422

第30章　365影视网站设计

30.1　系统分析   425

30.2　系统设计   425

30.2.1　系统目标   425

30.2.2　系统功能结构   426

30.2.3　系统业务流程   426

30.2.4　网页预览   426

30.3　系统开发   427

30.3.1　开发环境   427

30.3.2　文件夹组织结构   429

30.4　关键技术   430

30.4.1　JavaScript脚本技术   430

30.4.2　jQuery技术   431

30.4.3　jQuery中的Ajax请求   432

30.5　首页技术实现   432

30.5.1　JavaScript实现导航菜单   432

30.5.2　JavaScript实现图片的轮换效果   434

30.5.3　Ajax实现热门专题页面   435

30.5.4　JavaScript实现电影图片不间断滚动   436

30.5.5　JavaScript实现浮动窗口   438

30.5.6　jQuery实现滑动门效果   438

30.5.7　jQuery实现向上间断滚动效果   441

30.6　查看影片详情页面   442