论文总字数：16064字

摘 要

在计算机技术迅猛发展的时代，电子商务作为一种新的商务发展模式，与计算机技术的发展紧密相连，随着智媒体终端的普及，电子商务的内涵也变得更为深刻。相比于传统商务发展模式，电子商务模式下的交易时间更加灵活，人们可以不受时间和地点的约束进行线上体验店的交易。在经济全球化的发展背景下，计算机技术在电子商务领域的应用越来越广泛。

本论文通过深入分析国内外护肤行业发展背景及现状，将国内外护肤电商平台的运营模式、发展历程及规模进行比较，对容里护肤响应式网站的发展趋势进行展望。行业统计的数据表明，在未来几年，我国的护肤品市场会保持年平均15%的增长速度。通过分析Nordstrom、Macy’s、Tmall等电商平台的市场占比和护肤产品销售占比可以看出，护肤品具有广阔的消费者市场和发展空间。2019年涌现了大量的国潮爆品，国妆品牌已占据中国化妆品市场的“半壁江山”，并且正在营销、渠道、产品等各个赛道完成自己的超越。护肤品作为人们生活的刚需品，一直以来广受各个年龄层、女性消费群体的喜爱，且伴随着VR技术“虚拟体验店”的应用、护肤品网购活动的用户体验变得更加真实，极大地提升了消费者购物体验感和满意度。基于对互联网产业、电商行业和护肤业的发展动态研究分析，确定本课题设计是基于Bootstrap框架的容里护肤响应式网站设计与实现，运用Bootstrap框架组件，基于CSS，HTML5和JavaScript实现容里护肤网站前端的设计与开发。

本论文首先介绍了国内外护肤行业发展现状、历程和趋势，阐述了容里护肤前端网站开发的背景和意义，接着论述了容里前端网站的系统设计思想、采用的前端开发技术。之后对容里网站进行了系统分析，系统分析包括可行性分析和需求分析，在此基础上进行系统设计，利用相关软件绘制系统功能图，根据容里系统设计进行功能模块的开发与实现，同时展示容里网站首页、各子页面的效果图，响应式功能测试对比效果图。最后，本文对容里护肤网站前端开发工作进行总结，指出此次网站设计中存在的问题和不足。

关键词： Bootstrap 前端开发 响应式布局 容里 护肤

Design and Implementation of Roalli Skin Care Responsive Website Based on Bootstrap Framework

ABSTRACT

In the era of rapid development of computer technology, e-commerce as a new business development model is closely connected with the development of computer technology. With the popularization of smart media terminals, the connotation of e-commerce has become more profound. Compared with the traditional business development model, the transaction time under the e-commerce model is more flexible, and people can conduct online experience store transactions without the constraints of time and place. In the context of economic globalization, the application of computer technology in the field of e-commerce is becoming more and more widespread.

This paper analyzes the development background and current situation of the skin care industry at home and abroad, compares the operation mode, development process and scale of the skin care e-commerce platform at home and abroad, and prospects the development trend of Rongli skin care responsive website. Statistics from industry statistics show that in the next few years, my country's skin care market will maintain an average annual growth rate of 15%. By analyzing the market share of e-commerce platforms such as Nordstrom, Macy ’s, Tmall and the proportion of sales of skin care products, it can be seen that skin care products have a broad consumer market and room for development. In 2019, a large number of explosive products of the national tide have emerged. The national makeup brand has occupied the "half of the country" in the Chinese cosmetics market, and is completing its own transcendence in marketing, channels, products and other tracks. Skin care products, as people's daily necessities, have been widely loved by women of all ages and female consumer groups, and the user experience with the application of VR technology "virtual experience store" and skincare online shopping activities has become more real and greatly Increased consumers' shopping experience and satisfaction. Based on the dynamic research and analysis of the development of the Internet industry, e-commerce industry, and skin care industry, it is determined that the design of this subject is based on the design and implementation of the skin care responsive website based on the Bootstrap framework. Design and development of the front end of the skin care website.

This paper first introduces the development status, history and trend of skin care industry at home and abroad, expounds the background and significance of the development of Roalli skin care front-end website, and then discusses the system design ideas and adopted front-end development technology of Roalli front-end website. After that, the system analysis of Roalli website was carried out. The system analysis included feasibility analysis and demand analysis. On this basis, the system design was carried out. The relevant software was used to draw the system function chart. Display the renderings of the home page and subpages of Roalli website, and compare the renderings of responsive functional tests. Finally, this article summarizes the front-end development work of Roalli skin care website and points out the problems and deficiencies in the website design.

Key Words: Bootstrap; Front-end development; Responsive layout;Roalli;Skin care

目 录

摘 要 I

ABSTRACT Ⅳ

第一章 绪论 1

1.1 研究背景及意义 1

1.2 研究思路和方法 2

1.3 论文组织框架 2

第二章 文献综述 3

2.1 设计思想 3

2.1.1 国内外研究现状 3

2.1.2 研究内容 6

2.1.3 研究目标 6

2.2 相关技术 6

2.2.1 Bootstrap 6

2.2.2 CSS 6

2.2.3 HTML5 7

2.2.4 JavaScript 7

2.3 开发环境 7

第三章 系统分析与设计 8

3.1 系统分析 8

3.1.1 可行性分析 8

3.1.2 需求分析 9

3.2 系统设计 10

3.2.2 响应式栅格布局 10

3.2.3 系统功能模块划分 11

第四章 系统功能模块实现及测试 12

4.1 网站前端页面实现 13

4.1.1 网站首页实现 13

4.1.2 精选系列页面实现 15

4.1.3 博客分享页面实现 16

4.1.4 心愿单页面实现 17

4.1.5 响应式功能测试 18

第五章 总结与展望 21

5.1 开发经验总结 21

5.2 系统中存在的不足 21

5.2.1 系统兼容性问题 21

5.2.2 商品定制问题 21

参考文献 23

致 谢 25

第一章 绪论

1.1研究背景及意义

移动智能产品随着时代的发展不断迭代更新，越来越多的用户使用手机等智能产品下载应用软件，通过互联网获取自己想要的信息。据2020年4月28日中国互联网络信息中心（CNNIC）发布第45次《中国互联网络发展状况统计报告》显示：截至2020年3月，我国手机网民规模达9.04亿，互联网普及率达64.5%，这几年发展速度迅猛。庞大的网民数量使中国的消费市场前景广阔，数字经济随着互联网的发展，渗透进各行各业，逐渐沉淀潜在用户。由于移动端的快捷性，网民上网设备进一步向移动端集中。而传统的网页制作方式大多只适用于PC端的浏览器，在智能终端多尺寸的显示屏上的浏览效果却不尽如人意。因此，在进行前端开发时，很有必要探索出一种能自适应各种电脑手机屏幕，让网页能够在不同终端设备上自动响应，调整布局，满足用户的浏览需求，增强用户体验。

请支付后下载全文，论文总字数：16064字