基于HTML的服装商城项目设计与实现

XXXX职业学院

毕业论文

主题：基于HTML的服装商城项目的设计与实现

所属院系：信息工程学院

专业课：

学生姓名：

导师：

2020 年 11 月 29 日

概括

美梦服饰网上商城是一个综合性的B2B2C平台，类似于京东商城和天猫商城。 网站采用商家入驻平台的模式。 商户提交入驻申请，平台进行资质审核。 审核通过后，商户拥有独立的管理后台录入商品信息。 产品通过平台审核后方可发布。

萌服饰网上商城主要分为三个子系统：网站前台、运营商后台、商管后台

网站前台：主要包括网站首页、商户首页、商品详情页、搜索页、会员注册/登录、购物车页、分类频道等。

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

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

关键词：HTML5； CSS3； 查询

目录

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

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

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

1.2开发的研究目的和意义。

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

1.2.2开发的研究显着性。

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字体下载...

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 发展的研究意义

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

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

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

在线购物是虚拟的。 买家在购买商品时，不能直接光顾卖家的实体店btc电子商务模式，不能通过面对面的交流询问商品的详细情况，也不能亲眼看到所购买商品的真实情况。 消费者在购买所需商品时，只需到店内查询商品详情即可。 但是，在网上交易中，从咨询运营商，到提交订单，再到最终收到商品，这个过程中消费者与运营商并没有直接的接触。 聊天软件以文字进行交流，消费者想要进一步了解商品，只能根据网店商家传送的网页宣传、口碑评价等内容来了解​​商品。 这些与传统的交易方式有很大不同。

便宜的网上购物。 网上商店的经营与传统商店完全不同。 虚拟化和技术是在线商店的独特特征。 开网店的成本非常低。 与传统商店不同，在线商店不需要租用商店或支付电费。 店铺经营者只需要在批发地直接发货，将货物送到消费者手中btc电子商务模式，节省了运输成本，搬运货物的人少了，商品价格自然也就低了。

网上购物不受时间限制。 网上商城可以提供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 文件。 那么页面的顶部导航栏、head、bottom都是公共内容，我们需要将顶部导航栏、head、bottom的css写成public css文件，方便后面引入。 然后单独写中间的内容部分。

底部也用lists和float完成，其中help部门用的是自定义list。