电商网页设计怎么做-HTML（拼友购）电子商务项目的设计与实现（html前端源码及论文设计）

XXXX职业学院

毕业论文

标题：基于HTML的商品购物项目的设计与实现

院系：信息工程学院

专业班：

学生姓名：

导师：

2020 年 11 月 29 日

概括

拼友购网上商城是一个综合性的B2B2C平台，类似于京东、天猫商城。 网站采用商家入驻模式，商家在平台上提交申请吉祥物设计，平台进行资格审核。 审核通过后，商户有独立的管理后台录入商品信息。 产品经平台审核后即可发布。

拼友购网上商城主要分为三个子系统：网站前端、运营商后台、商户管理后台。

网站前台：主要包括网站首页、商家首页、商品详情页、搜索页、会员中心、订单支付相关页面、闪购通道等。

运营商后台：是运营商操作人员的管理后台。 主要包括商户审核、品牌管理、规格管理、模板管理、商品分类管理、商品审核、广告类型管理、广告管理、订单查询、商户结算等。

商户管理后台：入驻商户管理后台。 其主要功能有产品管理、订单查询统计、资金结算等功能。

关键词：HTML5； CSS3； 图标字体

目录

概括················································· ······················Ⅰ

1 简介··················································· ······················3

1.1 项目开发背景·················································· ·····3

1.2 研究目的及开发意义···········································4

1.2.1 研究开发目的···········································4

1.2.2 发展的研究意义·············································4

2 项目简介··················································· ················5

2.1 Web前端开发·············································· ··········1

2.1.1 Web前端开发简介········································ · 1

2.1.2 项目简介·············································· ·····1

2.1.3 项目特点················································· ·····1

3 项目启动··················································· ···············2

3.1 页面分析··················································· ··········2

3.1.1 公众风格分析············································· ·2

3.1.2 首页分析············································· ······3

3.2 字体介绍··················································· ··········2

3.2.1 iconfont字体下载········································2

3.3 页面制作··················································· ··········2

3.3.1 首页·············································· ··········2

3.3.2 列表页················································· ·······3

3.3.3 产品详情页············································· ····3

3.3.4 购物车页面················································ ····3

综上所述················································ ····················3

参考················································ · ···················4

1 简介

1.1 项目开发背景

随着一二线城市消费力日趋饱和，三六线城市、乡镇、县城和农村市场成为电商竞争的新焦点。 目前，中国农村人口超过6亿。 过去，传统商家对这些领域的渗透还不够，消费潜力没有得到充分挖掘。 随着互联网普及率的提高，特别是移动互联网的普及，这些领域的消费潜力将逐渐减少。 释放了。 除了农村旺盛的购物需求外，还有大量的出口需求。 在这方面，互联网的信息传输优势就得到充分体现。 基于服务农村生产者和消费者的农村电商成为新的增长点，因为由于地域、收入、消费习惯、生产商品的差异，农村市场表现出与城市市场完全不同的需求。 对此，电商企业也需要积极适应，为农村消费者提供因地制宜的服务。

商务B2B平台对于优化全产业链上下游、建立具有区域特色的电子商务产业带发挥着重要作用。 首先，电子商务B2B平台可以帮助工业领域客户减少采购程序、优化采购渠道、降低直接采购成本。 其次，平台可以利用自身优势资源为卖家进行网络营销，拓宽销售渠道。 同时，由于电商产业带普遍与地方政府开展多方合作，电商产业带模式也是孵化具有地方特色的电商生态系统的积极探索。 在国家政策引导下，全国各地正在围绕重点行业、重点区域深化电子商务拓展应用，更好发挥区域电子商务的积累和辐射效应。 未来，各地区将依托区域产业集群优势，加强区域内产业资源和企业资源的聚集，同时带动电商企业和电商相关配套企业入驻。区域特色电子商务产业带的发展，将带动周边地区发展特色电子商务，提高区域整体电子商务水平，更好地促进区域经济发展。

近年来，移动互联网保持快速发展态势，加速渗透到经济社会各个领域，带动电子商务加速从传统PC端向移动端迁移。 移动电子商务正在成为当前电子商务发展的生力军，也开辟了电子业务发展的新空间。 与PC端相比，移动购物受时间和空间的限制更小，与线下消费场景的互动更具情境性。 未来的移动市场潜力无限。 移动互联网的加速渗透，带动了各领域O2O应用的竞争发展。

跨境电商预计将在网络消费总额中贡献更高份额，预计将实现30%的年复合增长率，预计2020年总额将达到1万亿元。其中，食品和母婴品类将引领增长，到2020年复合增长率将超过30%。鉴于中国特殊的消费环境，强调安全的品类，如食品、母婴用品，以及价差较大的品类国内外服装、消费电子等已成为线上跨境采购的主体。 但跨境电商的兴起也是一把双刃剑。 随着中国网购人群货比三家的意识越来越强，如何制定全球价格体系将成为国际品牌面临的挑战。

1.2 论文的研究目的及意义

1.2.1 开发研究目的

节省购物时间，避免购物疲劳。 在网上找到你想要的东西，在商城里稍微搜索一下就可以直接找到。 不用去街上走来走去，大包小包挨着，累得连鞋都不想穿。 从断腿购物发展到鼠标控制的网上购物，消除了长途跋涉的痛苦，而且只要有一定的购买目标，确实省时省力。

节省购物费用。 由于网上商店简化了从制造商到零售商的中间环节，节省了实体销售地点需要支付的租金、人工成本、工商水电费、库存费等杂费，因此很少或没有额外成本用于销售商品。 价格普遍不同程度低于市场零售价。

尤其是像淘宝这样的购物网站，目前个人在其网站上开店是免费的（商城大卖家自愿选择缴纳增值服务费），而eBay则收取一定的开店费，这样一来，在网上开商店可以购买产品。 商品自然比实际购物便宜很多。

比较安全。 一般来说，网上购物的支付系统是非常安全的。 今天的网上银行比以前稍微复杂一些。 程序的增加意味着安全性的增加。 更重要的是，还有支付宝等很多第三方交易平台，极大地保障了您的付款。 钱肯定是有迹可循的。 即使您对购买的产品不满意并想要退货，您的钱仍然会回到我们的口袋。

产品系列齐全。 有时候想买点东西电商网页设计怎么做，在各大商场找了好久，可是已经快累死了，还是找不到。 或者我需要到处跑，挑选，比较。 而网上商城则采用单页面来描述，直观、清晰。 本产品的基本参数及数据。

它可以让你清楚地了解它的特点，网上商城几乎囊括了你能想到的一切。 就连零售业也突然在网上崛起并迅速发展。 也许你无意中发现了自己喜欢已久的东西。

产品比较更直观，避免争议。 正确的做法是“货比三家，选最好的”。 网上购物时，我们可以同时打开多个页面，浏览同一商品在多个商店的价格、功能介绍和发货方式。 多方面对比。 不容易引起两方意见分歧，引发纠纷。

便捷的赠送方式，方便的支付。 电子商务网站提供的一站式服务，直接发送给对方。 非常方便。 付款和直接转账一步完成。

订单不受时间限制。 您可以随时购买。 一般来说，网上购物有很多优点。 现实生活中比较懒或者不喜欢讨价还价的朋友可以尝试一下网购！ 上面的东西还是很便宜的，较大的BTC网上商城都是正品。

立即购买，服务范围更广。 互联网的速度非常快。 只要产品在他们的网上商店上架销售，千里之外的人一打开互联网就可以立即看到它们。 它非常高效，而且几乎没有地域差距。 你可以购买它们。 可以远距离购买物品，网友无论身在何处都可以购买到世界各地的产品。

产品搜索更容易。 在大多数真实的购物中心中，不同类型的商品在不同楼层出售。 如果商场很大，逛一圈往往需要半天时间。 在网上商店中，我们可以直接搜索所需的产品名称，也可以根据导航栏中的产品类别购买产品，节省搜索时间。

购物环境非常“安静”。 你可以一边听音乐一边哼着曲子，而不用考虑别人的感受。 没有其他人打扰你。 您可以看到、选择并购买您想要的任何东西。

1.2.2 开发研究意义

《中国100位电商CEO调查报告》将网络购物定义为“消费者通过购物网站获取商品信息，产生购买意向后通过电子采购订单发出购物请求，然后填写详细地址和联系方式。当前消费金额为通过货到付款、第三方支付等方式支付，然后厂家通过快递将商品送到消费者手中。”

简单来说，网络购物就是利用互联网在购物交易平台上购买商品。 这是当今最流行的消费方式。 买家直接在购物平台搜索想要购买的商品，选择商品并提交购物订单，填写相关信息，如姓名、电话、收货地址等，由运营商运输发货通过快递公司。 消费者使用网上银行支付方式。

目前，我国网络购物发展迅速。 2015年，淘宝推出的天猫双十一活动，单日交易额达912.17亿元，有232个国家和地区参与交易。 我们可以清楚地看到网络购物的快速发展。 凭借自身的优越性和特殊性，在市场上站稳了脚跟，并呈上升趋势。

网上购物是虚拟的。 买家在购买商品时，无法直接拜访卖家的实体店吉祥物设计，无法通过面对面的沟通询问商品详细信息，更无法亲眼看到想要购买的商品的真实状况。 消费者在购买想要的产品时，只能向商店询问产品的详细信息。 但在网上交易中，从咨询经营者，到提交订单，再到最终收到商品，消费者和经营者之间不会有直接接触。 消费者仅通过网上交易平台发出商品。 聊天软件用于文本通信。 消费者如果想要更多地了解产品，只能根据网店商家传递的网页宣传、信誉评价等内容来了解​​。 这些与传统的交易方式有很大不同。

网上购物很便宜。 网上店铺管理与传统店铺管理有着完全不同的业务形态。 虚拟化和技术是网上商店的独特特征。 开设网上商店的成本非常低。 与传统商店不同，网上商店不需要租用商店或支付电费。 门店经营者只需从批发地点直接发货，将货物送到消费者手中，节省了运输成本。 处理货物的人少了，货物的价格自然就会低一些。

网上购物不受时间限制。 网上商店可以提供24小时服务。 只要您选择了您想要购买的产品，您就可以随时下订单。 网上商店不受空间限制。 只要他们能上网，提交订单并付款后，快递公司就会将货物送货上门。 消费者在家就可以买到自己需要的商品。

2 项目介绍

2.1 Web前端开发

2.1.1 Web前端开发简介

2005年后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站前端发生了翻天覆地的变化。 网页不再只包含单一的文本和图片。 各种富媒体使网页内容更加生动。 基于软件的网页交互形式为用户提供了更好的用户体验。 这些都是基于前端技术的。

随着Web 2.0概念的普及和W3C组织的推动，网站重构的影响力正以惊人的速度增长。 XHTML+CSS布局、DHTML和Ajax如旋风般席卷而来。 百度、腾讯、淘宝、新浪、搜狐、网易等大大小小的IT公司都纷纷改造了自己的网站。

前端开发的入门门槛其实是比较低的。 与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。 因此，对于从事IT工作的人来说电商网页设计怎么做，前端开发是一个很好的切入点。

正因为如此，前端开发领域有很多自学成才的同行，但学习曲线却越来越陡，每前进一步都艰难。 另一方面，如前所述，前端开发是一个非常新的职业，对一些规范和最佳实践的研究还处于探索阶段。 总有新的灵感和技术不时涌现，比如HTML5、CSS3、JavaScript、负边距布局、网格布局等； 各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力； 浏览器之战也变得越来越重要。 越来越激烈，跨浏览器兼容的解决方案还是有很多种。 为了满足“高可维护性”的需求，需要更深入、更系统地掌握前端知识，这样才有可能打造出良好的前端架构并保证代码质量。

2.1.2 项目介绍

拼友购网上商城是一个综合性的B2B2C平台，类似于京东、天猫商城。 网站采用商家入驻模式，商家在平台上提交申请，平台进行资格审核。 审核通过后，商户有独立的管理后台录入商品信息。 产品经平台审核后即可发布。

拼友购网上商城主要分为三个子系统：网站前端、运营商后台、商户管理后台。

网站前台：主要包括网站首页、商家首页、商品详情页、搜索页、会员中心、订单支付相关页面、闪购通道等。

运营商后台：是运营商操作人员的管理后台。 主要包括商户审核、品牌管理、规格管理、模板管理、商品分类管理、商品审核、广告类型管理、广告管理、订单查询、商户结算等。

商户管理后台：入驻商户管理后台。 其主要功能有产品管理、订单查询统计、资金结算等功能。

2.1.3 项目特点

1、传统企业项目的特点：用户数量固定、数据量有限、并发量低。 比如OA办公软件以及一些内部人员使用的软件就可以认为是传统的企业项目。

2、互联网企业项目的特点：不限制用户，不限制用户角色。 例如，电子商务是互联网产业的一种体现。

互联网：互联网也被称为“国际网络”。 这些网络按照共同的协议相互连接并共享资源，就像彼此互连的蜘蛛网一样，只不过该网是圆形的。 后来提出的“互联网+”概念，就是在此基础上不断加入这个网络。 例如：互联网金融、医疗保健等。

电子商务：电子商务的这种模式只是互联网的一种，但电子商务的概念还不止于此。 电子商务也叫“互联网电子商务”，所以我把任何通过互联网进行销售和传播的东西都称为电子商务。

根据互联网项目的特点，互联网项目需要解决的主要问题是：高并发、大数据量、高可用性。

3、电商行业技术特点：技术新、范围广、分布式、高并发、集群、负载均衡、高可用、海量数据、业务复杂、系统安全等。

3个项目启动

3.1 页面分析

3.1.1 大众风格分析

首先我们需要一个初始化 css 文件。 然后顶部导航栏、标题和页面底部都是公共内容。 我们需要将顶部导航栏、标题和底部的css写入公共css文件中，以方便后面介绍。 然后分别写中间的内容。

公共样式header使用顶部导航栏nav，使用列表浮动效果实现。

底部也使用列表和浮动，帮助部门使用自定义列表。

整体公示风格图如下。