电商WEB前端基础

本书以培养 Web 前端开发相关岗位人才为出发点，以培养学生利用 Web 前端技术进行电商网站设计的 能力为主线，将 Web 前端基础的典型工作任务提炼为三大学习模块，分别是电商网站结构搭建与基础区块 制作、电商网站二级页面内容板块制作和电商网站首页制作。学生可以由浅入深地认识 Web 前端页面开发 的相关知识。本书引入相应的案例和实训任务，以理论与实际操作一体化的教学方式，让学生掌握电商网 站结构搭建、电商网站二级页面内容板块制作及电商网站首页制作等核心技能。 本书以电商平台开发为例，介绍了Web 前端技术在电商网站搭建中的应用方法及标准，详细阐述了 CSS 的基本内容及相关应用，介绍了超链接、盒子模型、伪类与伪元素、表格、表单等前端开发技术；还 介绍了 CSS 应用于 HTML 文件的方式，在此基础上通过能力提升、任务训练的方式，指导学生对电商平台 项目中的各板块内容进行开发，使学生深入理解 Web 前端技术在电商网站搭建中的应用，提高学生的实践 操作水平。 本书可以作为高等职业院校计算机类、电子信息类及电子商务类等专业的 Web 前端技术、互联网与电商 平台开发技术等课程的教材，也可以作为非计算机专业学生和工程技术人员在进行 Web 前端开发时的教材及 参考书。

模块一 电商网站结构搭建与基础区块制作 项目一  站点结构搭建 ..........................................................................................................2 任务一  站点搭建前准备 .........................................................................................................3 任务二  站点主体结构搭建 ...................................................................................................18 任务单 1-1 .................................................................................................................................26 任务单 1-2 .................................................................................................................................27 项目二  帮助中心板块制作 ................................................................................................29 任务一  帮助中心板块结构搭建 ...........................................................................................30 任务二  帮助中心板块链接设置 ...........................................................................................44 任务单 2-1 .................................................................................................................................50 任务单 2-2 .................................................................................................................................51 项目三  网站 LOGO 区块制作 ...........................................................................................53 任务一  网站 LOGO 区块的效果图分析 ..............................................................................54 任务二  网站 LOGO 区块的结构搭建与样式设置 ..............................................................57 任务单 3-1 .................................................................................................................................74 任务单 3-2 .................................................................................................................................75 模块二 电商网站二级页面内容板块制作 项目四  商品详情页面制作 ................................................................................................78 任务一  商品详情页面加入购物车板块的结构搭建与样式设置 .......................................79 任务二  商品详情页面中商品图片展示与关联推荐板块的实现 .....................................106 任务单 4-1 ...............................................................................................................................127 任务单 4-2 ...............................................................................................................................129 项目五  购物车板块制作 ..................................................................................................131 任务一  购物车板块的框架搭建 .........................................................................................132 任务二  购物车板块的样式设置 .........................................................................................141 任务单 5-1 ...............................................................................................................................149 任务单 5-2 ...............................................................................................................................151 项目六  电商网站的表单制作 ...........................................................................................152 任务一  电商网站注册表单的结构搭建 .............................................................................153 任务二  电商网站注册表单的样式设置 .............................................................................164 任务单 6-1 ...............................................................................................................................172 任务单 6-2 ...............................................................................................................................174 模块三 电商网站首页制作 项目七  首页页头、页尾及导航制作 ................................................................................178 任务一  首页页头、页尾制作 .............................................................................................179 任务二  网站主导航与分类导航制作 .................................................................................200 任务单 7-1 ...............................................................................................................................212 任务单 7-2 ...............................................................................................................................214 项目八  首页内容区制作 ..................................................................................................215 任务一  首页内容区的结构搭建与样式设置 .....................................................................216 任务二  首页内容区的动态效果实现 .................................................................................241 任务单 8-1 ...............................................................................................................................249 任务单 8-2 ...............................................................................................................................251 附录 A  HTML 常用标签及说明 ........................................................................................253 附录 B  CSS 参考手册 .....................................................................................................257 参考文献 ...........................................................................................................................265