“完美日记”眼影产品展示页设计与实现改

　“ 完美日记 ” 眼影产品展示页的 设计与实现

　目 目 录 摘 要 ---------------------------------------------------------------------------------------------- 3 Abstract ------------------------------------------------------------------------------------------- 4 1 绪论 -------------------------------------------------------------------------------------------- 5 1.1 国内外研究现状 ---------------------------------------------------------------------- 5 1.2 研究目的和意义 ---------------------------------------------------------------------- 6 1.3 研究内容和技术路线 ---------------------------------------------------------------- 8 2 美妆类产品展示分析 --------------------------------------------------------------------- 10 2.1 美妆类产品展示特点 -------------------------------------------------------------- 10 2.2 主流页面展示技术 ----------------------------------------------------------------- 11 2.3 典型展示页案例 -------------------------------------------------------------------- 15 3 “完美日记”眼影产品展示页设计 --------------------------------------------------- 17 3.1 产品特点分析 ----------------------------------------------------------------------- 17 3.2 展示页框架 -------------------------------------------------------------------------- 18 3.3 展示页模块 ------------------------------------------------------------------------ 20 4 “完美日记”眼影产品展示页实现 --------------------------------------------------- 29 4.1 整体实现 --------------------------------------------------------------------------- 29 4.2 banner 实现和 footer 实现 ----------------------------------------------------- 29 4.3 购买与评论功能实现 -------------------------------------------------------------- 31 4.4 商品种类特点、公司介绍、友情链接功能实现 ------------------------------ 32 4.5 新闻中心 ----------------------------------------------------------------------------- 33 4.6 联系我们 ----------------------------------------------------------------------------- 34 5 总结与展望 --------------------------------------------------------------------------------- 34 5.1 研究总结 ----------------------------------------------------------------------------- 34 5.2 研究展望 ----------------------------------------------------------------------------- 35 参考文献 --------------------------------------------------------------------------------------- 36

　 摘 要

　随着 21 世纪互联网新时代的到来，商业市场越来越深入、广泛的运用网络技术,彩妆产品展示页在技术方面已基本成熟。商品展示使顾客能够对所购买的商品有足够的了解和比较,并能对自己的选择感到满意,是商品营销的重要手段。巧妙的展示产品能够反映品牌形象的逻辑、功能、审美和魅力。本文正是基于这种背景之下对于“完美日记”眼影产品展示页的设计与实现进行研究的。本文的主要研究了以下内容：第一章首先介绍了产品展示页的设计与实现的研究背景以及意义，以及对于本文涉及到的一些知识的研究背景进行了描述第二章对于商品展示页的设计与实现的基础知识进行了介绍，并且以百度和淘宝展示页进行了基础的分析。第三章“完美日记”眼影产品展示页设计进行了功能模块以及需求的分析；最后第五章对于“完美日记”眼影产品展示页实现的一些具体界面与代码进行了具体的展示与分析。

　关键词：展示页面，完美日记，页面展示技术

　Abstract With the advent of the new era of the Internet in the 21st century, the commercial market is more and more in-depth, extensive use of network technology, cosmetics product display page technology has been basically mature. Commodity display is an important means of commodity marketing, which enables customers to have a sufficient understanding and comparison of the purchased commodities and to be satisfied with their own choices. Ingenious display of products can reflect the logic, function, aesthetics and charm of brand image. Based on this background, this paper studies the design and implementation of the "perfect diary" eye shadow product display page. The main contents of this paper are as follows: the first chapter introduces the research background and significance of the design and implementation of the product display page, and describes the research background of some knowledge involved in this paper. The second chapter introduces the basic knowledge of the design and implementation of the product display page, and makes a basic analysis based on Baidu and Taobao display page. The third chapter "perfect diary" eye shadow product display page design has carried on the function module and the demand analysis; in the last fifth chapters, has carried on the concrete display and the analysis to the "perfect diary" the eye shadow product display page realization certain concrete interface and the code.

　Key words: display page, perfect diary, page display technology

　 1 绪论 1.1 国内外研究现状 1.1.1 国 国 外 研究现状 对于眼影产品展示页或者是其他化品或者服装等商品展示页的设计与实现的研究在国外一直是研究的重点，同时，产生的研究成果也是非常多的。

　zhang 等学者开发了一个基于设计规则的服装展示系统[1] 。系统由模型库、故事板、展示设计、截图和设计过程记录四个功能模块组成。为了实现这些系统功能，本研究采用了三维场景编辑与集成、三维模型交互显示、物理仿真与动画技术，为概念设计提供了智能化的功能和方便的操作。流通空间和流线型的功能，为设计师有效布局展示空间提供了有力的支撑。Baral 等学者[2] 提出了一个松散绑定的 SQL 扩展的设计和实现，它允许用户在 SQL 查询中包括高级显示规范，特别是在处理多媒体数据库时。我们描述了一种体系结构，它允许在独立应用程序或万维网页面上使用所提出的查询语言相对简单地实现动态查询浏览器。Jian等学者[3] 基于知识的产品配置系统，通过对大规模定制中产品配置的分析，提出了一般产品结构和一般产品结构约束的两种定义，并建立了一般产品结构模型模型和 Java、可扩展标记语言（XML）、结构化查询语言（SQL）服务器等流行的网络和数据库技术，设计并实现了一个产品建模器，实现了多种产品的通用配置知识表示。Anping 等学者[4] 构建了以服务为导向、以业务为导向的农产品价格短期预测系统（以下简称系统）。该系统基于 B/S 模式，采用 SSH 框架和 JAVA，参考 Spring、Struts 等开源项目，嵌入 Eviews 和 Easyfit，实现了农产品价格短期预测、农产品市场风险动态预警、农产品常规地图显示四大业务功能进京与农产品市场形势分析。该系统将经济模型转化为一个具有智能分析、可移植性强、运行稳定的可操作系统工具，增强了经济分析对农业市场管理的指导作用。

　1.1.2 国 国 内 研究现状

　在国内对于对于眼影产品展示页或者是其他化品或者服装等商品展示页的设计与实现也是渐渐开始了，从 21 世纪互联网开始高速发展，商品展示页的设计与实现的研究也是进一步深入，并且成为了互联网行业中研究的重点，同时，在中国研究成果也是非常多的。

　王月, 尹霄等学者[5] 在 2011 年的时候，在“长江大学学报”中，设计了一种基于交互设计（也就是人机交互）的互联网产品远程展示并且销售的平台，本平台是注重平台的稳定开发，更重要的是是设计了一种三维交互功能。何薇, 刘科伟等学者[7] 在 2019 年的时候，在杂志“北京印刷学院学报”中，对于服装 DIY产品的具体二种功能：展示与销售功能进行了设计与实现。白党强等学者[8] 在2018 年的时候，在杂志“电子技术与软件工程”中，基于 HTML5 的网页设计与实现进行了详细的讨论。

　唐州欢等学者[9] 在 2015 年的时候，在自己的毕业论文之中，对于具体的化妆公司的综合管理平台一些功能的设计与实现进行了设计。尹乐, 许刚强等学者[10] 在 2019 年的时候，在杂志“中国高新技术企业”中，基于 HTML5 的离线 Web 的技术以及它的应用设计与实现进行了深入的探讨。马衍明在自己的毕业论文之中[11] ，基于自制模板进而达到动态生成 HTML 页面的目的，动态的生成了财务报账系统。罗良夫, 张丽等学者[12] 在 2019 年的时候，在杂志“ 电脑知识与技术”中， 基于 PHP 的新的技术，进而可以实现格式化 HTML 代码的功能的设计与实现。

　1.2 研究目的和意义

　1.2.1 研究背景 随着商业市场越来越深入、广泛的运用网络技术,彩妆产品展示页在技术方面已基本成熟。商品展示使顾客能够对所购买的商品有足够的了解和比较,并能对自己的选择感到满意,是商品营销的重要手段。巧妙的展示产品能够反映品牌形象的逻辑、功能、审美和魅力。彩妆产品的展示重点在于不同肤色的试色,以

　及产品的安全性[13-14] 。因为消费者无法亲自使用到产品,所以产品展示页的用户体验模块很重要,消费者可以通过跟自己类似的肤色、肤质的使用者的评价来打消疑虑。产品展示设计是对产品展示的一种设计,其主体是产品,但本身不是对产品进行设计,而是对产品存在的客观环境进行设计,并通过这样的设计让产品的展示能够达到预期的效果和目的。电商产品的网页展示是电商企业在当前激烈的市场竞争中,争夺更多的用户和市场资源的重要手段之一,是电商企业谋求新发展的重要途径。随着 21 世纪的到来，网络行业得到了迅猛发展,各种电商已经融入人们的生活包括（淘宝，天猫，京东，以及最近起来的评多多等）[15-47] ,人们通过浏览网页的形式交互访问各类电商网站。通过网络渠道购买产品成了一种更时尚,更透明,更方便快捷,更节省人力物力的新型的购物方式。因此本文就是以“完美日记”眼影产品为研究对象，对于其展示页的设计与实现进行了论述。

　1.2.2 研究目的与意义 目的:本文主要是结合商业因素和页面设计技术对彩妆产品进行页面设计和实现,根据电子商务专业商务与技术结合的特点,综合运用大学所学到的相关课程的知识,完成毕业设计论文。

　意义:从小的方面讲可以检验对本人对于大学所学知识的一种全面的综合运用能力,加深本人对于对这些计算机知识的理解。通过本次毕业论文设计,对电商产品展示页设计原则、影响因素等有了深入了解,对以后从事相关工作会有一定的帮助。从大的方面讲，对于知网库的“完美日记”眼影产品展示页的设计与实现的研究总量进行了进一步的扩充。甚至是，可以通过自己的设计与完美日记实际官网进行比对，发现完美日记实际官网的一些不足，提出 bug，对于“完美日记”眼影产品展示页的改善[18-20] 。

　1.3 研究内容和技术路线

　1.3.1 研究内容 本文的研究工作主要集中于“完美日记”眼影产品展示页的设计与实现的研究本文的主要研究内容有首先介绍了产品展示页的设计与实现的研究背景以及意义，然后对于本文涉及到的一些知识的研究背景进行了描述，以及对于本文的研究内容以及安排做了简述。然后对于商品展示页的设计与实现的基础知识进行了介绍，并且以百度和淘宝展示页进行了基础的分析。接着“完美日记”眼影产品展示页设计进行了基础的了解；最后对于“完美日记”眼影产品展示页实现的一些具体界面与代码进行了具体的展示与分析，包括首页导航功能实现与代码展示，购买与评论功能实现与代码展示，商品种类特点、公司介绍、友情链接功能实现与代码展示。

　 1.3.2 研究方法 本文研究方法有：

　文献分析法：利用文献检索工具和搜索引擎工具对国内外相关文献、利用各种互联网平台，搜集关于美妆网站产品展示页设计与实现方面的信息数据； 现状分析法：对比同类型美妆产品展示页的设计和主流美妆产品展示页的设计，在保留自己特色的同时对它们的优点进行借鉴模仿；对各品牌美妆产品展示页的设计要素进行总结。

　论文整体技术路线如下图所示：

　 图 1.1 论文整体技术路线

　2 美妆类产品展示分析 2.1 美妆类产品展示特点 对于产品展示页而言，一般是具有六大页面元素，分别是展示页的配色、展示页的一些字体、展示页所选择的文案、展示页选取的构图、展示页不同的排版和展示页整体的氛围，对于常见的产品展示页而言，其具有的构成框架主要可以用下面的公示表示：

　产品价值+消费信任=下单，

　（2-1）

　从营销类学来说，营销中导流货就是你用来做引流产品的，把消费者拉进店的产品，如下图中的完美日记眼影，以及导流页面。

　图 2.1 营销中导流页面

　产品展示的根本立着点就是使得专业乃至是非专业人士角度去具体分析产品价值所在，进而使得消费者有进店消费的欲望。图 2.1 营销中导流货简单明了的展示出了“完美日记”眼影最近新品。

　营销中导流页面首先用吸引人眼球的各类型的美女使得购买者眼球一亮，整体白色服装和黑色“完美日记”logo相搭配有着引导消费者继续消费的欲望，进而起到导流的作用。

　2.2 主流页面展示技术 2.2.1 基于 html 语言和 css 语言的 选项卡 设置 HTML 中文全名叫做是超文本标记语言英文名称的全称是 Hyper Text Markup Language，是一种国际上标准通用的标记语言所使用的一个应用。HTML 究其本质上说来不是一种编程的语言，而是一种对于网页标记语言，是现代网页制作不可或缺的技术。

　对于本文而言，具体的“超文本”指的是页面之内可以包含除了文字之外的信息，比如图片、各种网站链接，甚至包括各种格式音乐、以及各种形式的程序等非文字元素。

　CSS 中文全称叫做是层叠样式表，也叫做 Cascading Style Sheets，CSS 是一种语言，是用来表现 HTML 或 XML 等文件样式的标准化的计算机语言。CSS 可以很好的静态修饰各种网页，CSS 更是可以配合各种脚本语言比如 json 等动态地的对于网页里面存在的各元素进行格式化。

　WEB 设计标准一般来说，指的就是 div+css 布局，div+css 布局是一种比较合理的网页的布局方法。和表格（table）布局定位这种普通的布局方法不同，div+css 布局可以顺利的达到网页页面内容与网页页面表现相进行分离的目的。

　这个技术在实际操作中经常用到，主要原理是：第一步是获取元素，利用for 循环历遍给按钮添加点击事件或鼠标悬浮事件，第二步通过 CSS 把所有的按钮样式设置伪类，也可以用 for 循环历遍把所有的按钮样式的显示属性设置的空，然后添加按钮响应样式，第三步利用 CSS 或者 JS 把当展示部分显示出来，显示属性设置为 block。具体效果如图 2.2 所示。

　 图 2.2 选项卡切换 2.2.2 动态语言与轮播图

　 动态语言，是指程序在运行时可以改变其结构：新的函数可以被引进，已有的函数可以被删除等在结构上的变化，类型的检查是在运行时做的，优点为方便阅读，清晰明了，缺点为不方便调试。

　轮播图这项技术主要用在页面展示中，例如 banner 图的轮播切换和页面中其他地方的图片切换等。轮播图的主要原理如下：将所有图片添加浮动依次排列，并给其添加一个父级元素，留一个部分显示图片，并将其他图片隐藏。将图片设置成对定位，利用 JS 控制图片 CSS 的属性，从起始位置到结束位置，需要先算出这两者间的像素距离，添加定时器，通过距离差值和移动的时间间隔，计算出每次需要移动的像素大小，利用定时器控制，实现图片的移动，然后开始切换。

　 图 2.3 轮播图效果 由于轮播图在实际工作中的需求不统一，手动写占用大量时间，不利于提升效率，所以在工作中网页设计师们经常用到插件来进行轮播图的处理，如图 2.3所示。

　2.2.3 JSON 数据处理 JSON 是一种易于消费者阅读和编写的数据交换格式。同时也易于机器解析和生成。本文“完美日记”眼影产品展示页大部分项目需要网页设计师自行处理数据，这些数据包括商品名称、商品链接、商品详情等等，通常结构比较简单，数据总量较少的情况下，及其容易处理，但在数据总量较多、数据结构相对复杂的时候，就需要用 JSON 来帮忙提高效率了，如图 2.4 所示。

　 图 2.4 JSON 应用场景 2.2.4 导航栏特效 导航栏对于一个网站的用户体验来说是至关重要的，因为根据用户的浏览习惯、从左到右，从上到下，当他们进入一个新的页面，导航栏通常是他们最先看到的地方。用户对于产品的第一印象是很重要的，因为它会一直伴随接下来的使用过程，而且第一印象无法更改。在网站中起到的作用如名称所示——导航作用，便于用户了解网站中包含的具体页面，并指引用户浏览网站。导航栏一般情况下具有按钮、浮动、伸展等效果，具体效果以滑动、反转、渐变等特效相结合而形成，最常见的就是下拉菜单特效了。虽然导航栏特效相对来说简单一些，但这是网页中必不可少的元素，称得上是一项关键技术，如图 2.5 所示。

　图 2.5 导航栏效果

　2.2.5 数据库

　 数据库本质上也是一个存储数据的库，数据库可以对数据保存和管理，数据库的开发到现在已经有了 50 年左右的历史了，数据库的应用可以说是已经渗入

　到我们生活的方方面面了，不管是出行的 12306 还是日用的淘宝，还有更经济相关的银行都是用到了数据库技术，可以说现在运用到的所有系统里面，都多多少少的运用到了数据库技术，数据库拥有效率高、安全性高等一些非常好的功能。MySQL 数据库本质上是数据库的一种，具体的源代码是对外开放的，MySQL数据库是瑞典公司发布的，具体的 MySQL 数据库使用的是结构化的一种语言来进行操作的，进行查询进行管理，并且由于 MySQL 数据库所使用的源代码的复杂度较低，因此代码跑起来的速度非常快，并且由于其开源，所以 MySQL 数据库开发的成本也是非常低的，可以说 MySQL 数据库，不管是企业还是各种国家机构都非常喜欢的软件系统。

　2.3 典型展示页案例 2.3.1 百度页面案例 本文首先进行分析的一个案例就是 21 实际以来互联网行业的领头网站的展示页来进行分析的，也就是百度主页的展示页进行分析的，具体百度主页的的页面如下：

　图 2.6 百度主页的展示页 本文从图 2.6 百度主页的展示页可以看出来，首先图片的分布字体的处理，连接更是加上了时事新闻，肺炎相关的工作，等方面的 html 语言的处理很好，

　div+css 布局布局更是从直观面上看起来很仔细。并且导航栏一般情况下具有按钮、浮动、伸展等效果，具体效果以滑动、反转、渐变等特效相结合而形成。JSON应用场景搜索分布十分齐整，并且具有登陆设置，数据库设置数据记录完整。

　2.3.1 淘宝页面案例

　 本文接着进行分析的一个案例同样也是 21 实际以来互联网行业的领头网站的展示页来进行分析的，也就是淘宝主页的展示页进行分析的，具体百度主页的的页面如下：

　 图 2.7 淘宝主页的展示页

　根据图 2.7 淘宝主页的展示页可以看出来，与百度主页的展示页的简约直白不同的是，淘宝主页的展示页多而复杂，展示了不同的商品而且对于热卖商品而言还有着动态语言的变化，而且 div+css 布局布局更是从直观面上看起来很仔细排版的很好，并且导航栏，动态布局，都十分清楚，商业价值十分清楚。JSON应用场景搜索分布，各个商品布局十分齐整，并且具有登陆设置，数据库设置数据记录完整，并且具有热评热销推荐等引人瞩目的东西。

　3 “完美日记”眼影产品展示页设计 3.1 产品特点分析 完美日记的眼影还是挺好的。颜色比较全，而且动物眼影盘的话价钱也挺合适的，能涂出很多种效果。完美日记眼影和其他的眼影相比较而言，说区别还是有一些的。完美日记的款式会多一些，可供选择就会多一点，比如少女的，复古的，冷艳的，成熟的都有。其他的眼影比如：玛丽黛佳的就两个选择，色系也不是特别多，适合初学的少女。主要特点就是价格平民化，款式多样化，少女系列主打，以消费者为主。

　经过前期沟通，合作方的具体页面需求如下：

　1.体现青春与活力，因为“完美日记”眼影产品展示页的消费对象主要为年轻女性，所以青春与活力的主题更适合作为该项目主题； 2.介绍公司概况情况，给消费对象一个良好的第一印象； 3.链上“完美日记”官网和“完美日记”其他产品的链接； 4.各种品牌展示，包括展示其价格与评论； 5.在校招网页上链上各个参与招聘企业的官网链接； 6.自适应手机端； 7.展示页页面需要轮播图。

　合作方给出的素材资源，其中文字资源共计 2586 个字包括 8 个公司简介，图片资源共计 23 张图片，链接 68 个包括 1 个公司官网链接、60 个商品官网链接、7 个“完美日记”其他产品链接，详情如表 3.1 所示。

　表 表 3.1

　素材资源 资源种类 企业资源 文字资源 2586 字 图片资源 23 张 链接资源 68 条

　3.2 展示页框架 本文具体对于“完美日记”眼影产品展示页的框架具体的构成如下图框架如图所示：

　图 3.1 “完美日记”眼影产品展示页的框架

　从图 3.1 “完美日记”眼影产品展示页的框架可以看出来，整个“完美日记”眼影产品展示页主要有四个模块，主要有对于完美日记公司的整体介绍，“完美日记”眼影产品的特色以及具体种类的介绍，还有这些眼影产品的展示，还可以对于写产品的售价，以及连接点入的直接购买，甚至是可以在购买相应的产品之后，可以进行评价的操作，并且其他用户可以浏览这些评论，来引导自己的购买导向。甚至是“完美日记”眼影产品展示页还设置了友情链接，来引导消费者来购买“完美日记”其他系列产品，比如说：卸妆水，口红，等一些系列的产品，甚至是对于网站还设置了，收藏本文网址，加入 VIP，登陆，注册，新闻中心，以及联系客服等一系列服务。

　对于“完美日记”眼影产品展示页在页面结构上分为三大部分，展示页的页面结构如图 3.2 所示，将在外部结构上采用多页面上下框架型布局而内部content 的结构视具体页面而定，内容上采用图文结合的方式来进行布局，分为三大板块，banner 页、content 页、footer 页，该页面结构在本次设计中用于除引导页以为的所有页面，即下文中介绍的“完美日记”眼影产品展示页的首页导航功能实现、“完美日记”眼影产品展示页的商品购买与评论功能实现、“完美日记”眼影产品展示页的商品种类特点、公司介绍、友情链接功能实现、商品种类特点、公司介绍、友情链接功能实现、“完美日记”眼影产品展示页的新闻时事功能实现。

　图 3.2 展示页结构 1.区情概况 （1）在功能上，该页面介绍“完美日记”的基本情况、公司简介、新闻中心、产品中心、联系我们等信息； （2）在结构上，content 部分采用上下框架的结构、图文结合的方式来进行设计； （3）在功能上导航栏添加伪类特效，banner 图轮播，添加各个功能链接，链接评论、买家晒图等功能。

　2.商品种类特点、公司介绍、友情链接 （1）在功能上，该页面介绍商品种类特点、公司介绍、友情链接；

　（2）在结构上，content 部分采用图表结合的表达方式来进行设计； （3）在功能上导航栏添加伪类特效，banner 图轮播。

　3.商品购买与评论 （1）在功能上，每一个商品都附带购买的链接以及图片展示，并且可以常看相应的评论，以及自己发表评论； （2）在结构上，content 部分采用图片展示的表达方式来进行设计； （3）在功能上，导航栏添加伪类特效，banner 图轮播，添加参加招聘企业的官网链接。

　4.新闻时事 （1）在功能上，用来介绍最近公司的一些新闻实事，以及新品发布的消息； （2）在结构上，content 部分采用左右框架的结构，图文结合的方式来进行设计； （3）在功能上，导航栏添加伪类特效，banner 图轮播，加 json+ccc+div进行格式布局与排版。

　3.3

　展示页模块 在“完美日记”眼影产品整体版面布局里面，为了使得排版更加合理需要更多运用其他或者更多主流页面展示技术，比如 CSS 样式和 html 代码等，这样就可以使完美日记”眼影产品整体网站无论在色彩搭配上还是版面布局之上，甚至是与用户交互上，都能更加好的体现出产品的特色和优势。

　对于“完美日记”眼影产品整体版面布局来说，需要完成“完美日记”眼影产品展示页的各类预期效果：“完美日记”眼影产品展示页图片色彩温馨，“完美日记”眼影产品展示页整体版面清爽，文字、图片、链接等搭配合理，使得受众方便阅读原则,“完美日记”眼影产品展示页版式设计的首要目的是让消费者以最好的方式找到消费者所需要的各种消费相关的信息。

　内容上采用图文结合的方式来进行布局，分为三大板块，banner 页、content页、footer 页。

　在本项目设计中，所有网页的 banner 部分和 footer 部分采用一样的效果。

　3.3.1 banner 部分设计 根据合作方要求，采取图片加文字展现，这一部分包括合作方 logo 和图片，具体形式为图片加文字展现，具体效果将在下文实现部分展现。其次是导航栏部分，导航栏分为四个按钮，由于每个分页面较为简单，就不采用下拉菜单制作。导航栏的颜色主要使用蓝、白色，契合该项目主题，凸显青春与活力，预设效果当鼠标悬浮在按钮上，按钮的背景、边框变为蓝色，字体下方标记蓝色，没有触发事件的效果，字体下方没有标记蓝色，如图 3.3 所示，并且在最右侧设置了注册，登录，搜索等超链接的效果，点击可以跳转到相应的页面进行相应的操作。

　图 3.3 分区情概况 banner 部分 3.3.2 footer 部分设计 footer 这一部分背景颜色采用蓝色与主题对应，文字部分是应完美日记公司版权声明，包含的信息包括：版权信息，网站信息，以及具体的联系我们的链接，如图 3.4 所示。

　图 3.4 分区情概况 footer 部分 3.3.3 content 部分设计 本文具体按照“完美日记”眼影产品展示页的框架进行 HTML+CSS 等代码构成，这一部分采用图文结合的表达方式，背景颜色按内容分为白色+蓝色+黑色，使内容之间加以区别，但又不显得突兀。第一部分区情概况，图片导航设置，文字部分介绍导航的基本情况；第二部分官方指定图片展示，图片部分采用的是合作方给出的图片资源，文字部分介绍基本经济情况；第三部分产品中心与友情链接部分，图片部分采用的是合作方给出的图片资源，文字部分是产品中心与友情

　链接部分对应的文字；第四部分商品售卖与评论，图片部分采用的是合作方给出的图片资源，文字部分介商品详情，以吸引消费者注意；得到的“完美日记”眼影产品展示页如图所示：

　图 3.5 “完美日记”眼影产品展示页 从图 3.5 “完美日记”眼影产品展示页可以看出来，“完美日记”眼影产品展示页包含了多个功能模块的信息，有友情链接模块，商品售卖信息模块，评论查看模块，产品种类模块，“完美日记”的公司简介、“完美日记”眼影产品

　的特色，收藏本文网址，加入 VIP，登陆，注册，新闻中心，以及联系客服等的链接。对于“完美日记”眼影产品展示页的各类预期效果：“完美日记”眼影产品展示页图片色彩温馨，“完美日记”眼影产品展示页整体版面清爽，文字、图片、链接等搭配合理，等要求完美的满足了消费者。

　1. 购买与评论功能实现

　具体的“完美日记”眼影产品展示页的商品购买与评论功能实现截面图如下图 4-3、4-4 所示：

　图 3.6 “完美日记”眼影商品购买功能实现界面

　图 3.7 “完美日记”眼影商品评论功能实现界面 从图 3.6 “完美日记”眼影商品购买功能实现界面以及图 3.7 “完美日记”眼影商品评论功能实现界面可以看出来， “完美日记”眼影商品购买功能齐全，图片整齐有代表性，并且商品总数繁多，总共有数页码的眼影，每一个商品下方有该商品总共的点评数目，双击打开评论，可以看到消费者对于改商品的评价，并且对于这些评价做了统计；图 4-4 “完美日记”眼影商品评论功能实现界面可以看出来统计如下：极其好用(390) 用着舒服(174) 颜色漂亮(14) 不会掉渣(7) 没有失望(6) 柔润顺滑(3) 优质好用(2) 清洁干净(1) 毛毛细软(1) 安全可靠(1) 材质优良(1) 不占空间(1) ，并且做了统计汇总，如果需要对数据进行统计汇总，对于数据库的利用是不可或缺的，本文使用到的数据库系统就是MySQL 数据库，本质上是数据库的一种，具体的源代码是对外开放的，MySQL数据库是瑞典公司发布的，具体的 MySQL 数据库使用的是结构化的一种语言来进行操作的，进行查询进行管理。

　本文具体用到的数据库如下所示：

　表 3.1 管理员表 字段名

　类型

　宽度

　是否为空

　说明

　adminUserName

　varchar

　20

　Not null

　登录名

　adminPassword

　varchar

　32

　Not null

　登录密码

　roleId

　Int

　 Not null

　验证码

　JobNumber

　varchar

　50

　null

　工作编号

　 表 3.2 用户权限的表格 字段名 数据类型 限 权限 ID 主键/ 外键 是否为空 P_id Int（10）

　权限 ID P Not null P_type Varchar（20）

　权限类型 x Not null P_remark Varchar（100）

　备注 x Null gmt_create DateTime 创建时间 x Not null gmt_modify DateTime 修改时间 x Not null Is_delete Char（1）

　是否删除 x Not null

　 表 3.3 信息类型表 字段名 数据类型 权限 ID 主键/外键 是否为空 i_t_id Int（10）

　信息分类 ID P Not null i_t_type Varchar（20）

　一级分类 x Not null i_t_2rd_type Varchar（20）

　二级分类 x Null i_t_remark Varchar(100) 备注 x Null gmt_create DateTime 创建时间 x Not null gmt_modify DateTime 修改时间 x Not null Is_delete Char（1）

　时候删除 x Not null

　表 3.4 用户信息表 字段名称 字段类型 长度 是否为空 默认值 备注 id int

　NO

　主键，有索引 username varchar 20 NO NULL 用户名 password varchar 20 NO NULL 密码

　uid varchar 255 YES NULL 姓 name varchar 255 YES NULL 名字 sex int

　YES NULL 性别 address varchar 255 YES NULL 地址 hometown varchar 255 YES NULL 家庭住址 access varchar 255 NO 1 身份 从上面表 3.1 管理员表，表 3.2 用户权限的表格，表 3.3 信息类型表，表 3.4用户信息表所示，可以读出一些“完美日记”眼影产品展示页实现的基本信息，比如表,3.2 用户权限的表格就具体的阐述了权限 ID、权限类型、备注、创建时间、修改时间、是否删除等基本的权限以及信息，表 3.3 信息类型表就具体的阐述了信息分类 ID、一级分类、二级分类、备注、创建时间、修改时间、时候删除等信息，表 3.4 用户信息表就具体的阐述了主键，有索引、用户名、密码、姓、名字、性别、地址、家庭住址、身份等一些用户的基本信息。

　2. 商品种类特点、公司介绍、友情链接功能实现 具体的“完美日记”眼影产品展示页的商品种类特点、公司介绍、友情链接功能实现截面图如下图 3.8、3.9、3.10、3.11 所示：

　 图 3.8“完美日记”眼影产品展示页的产品中心与友情链接

　图 3.9 “完美日记”眼影产品展示页的产品特点介绍

　图 3.10 “完美日记”眼影产品展示页的一些详细信息

　 图 3.11 “完美日记”眼影产品展示页的公司信息 从图 3.8、3.9、3.10、3.11 商品种类特点、公司介绍、友情链接功能实现可以看出来，以图片和文字进行结合方式呈现出来的，使用文字，图片线条的有机的进行结合，增加整体“完美日记”眼影产品展示页的网站舒适度。整体对于“完美日记”公司的整体情况进行了介绍，产品种类主要介绍了几种，粉状眼影，膏状眼影，霜状眼影，并且对于其特色产品探险家十二色动物眼影，有冰狼，斑虎，小猪，鳄鱼的详细信息进行了介绍，并且对于“完美日记”公司其他产品，给出了相应的链接。

　3. 新闻中心

　本文在新闻中心文字量比加大，并且每个新闻链接都附带超链接，json 易于消费者阅读和编写的数据交换格式。同时也易于机器解析和生成。本文“完美日记”眼影产品展示页大部分项目需要 json 处理这些页面文字与图片与链接，具体的“完美日记”眼影产品展示页的新闻中心功能实现截面图如下图 3.12 所示：

　 图 3.12 “完美日记”眼影产品展示页的新闻中心

　4. 联系我们

　这一部分采用大部分是 td 形式的空格表达方式，背景颜色按内容分为白色，四周留白，既有层次感又不显得突兀。设计了专门的意见填写栏目，达到点击跳转的作用，并且在下面还专门提供了 qq 在线咨询，点击即可实现跳转功能，租后给出了客户服务热线以及相应的邮箱；如图 3.13 所示

　图 3.13 “完美日记”眼影产品展示页的联系我们

　4 “完美日记”眼影产品展示页实现 4.1

　整体实现 在制作方面，采用软件 Hbuilder 来进行制作。新建好项目文件，开始制作网页。首先，在 CSS 文件夹中放入 wanmeiriji.css，用来重置整个项目 CSS 样式，清除默认样式，将项目中会用到的插件提前放进项目文档中，之后开始按照设计稿来编辑制作网页，项目 image 具体表示上一级提供的图片，css，json 表示排版布局演示，然后每一个 html 文件表示不同的功能实现，如图 4.1 所示。

　 图 4.1 项目文件夹 4.2 r banner 实现和 r footer 实现

　首先设计的是 banner 部分，采取图片轮播形式展现，由于需要效果较为简单，所以这一效果直接自行编写 JS。1.获取 banner 图片元素，设置好需要替换的图片地址；2.编写好图片替换函数；3.页面打开运行程序。JS 代码如下文所示：

　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>完美日记</title> <link href="css/gongy.css" type="text/css" rel="stylesheet" />

　<link href="css/news.css" type="text/css" rel="stylesheet" /> <script src="js/jquery-1.8.3.min.js"></script>

　 利用 CSS 设置样式，为了便于维护，版权中文字的时间，采用 JS 来自动获取，并生成在页面上。利用 CSS 设置 footer 宽度、背景颜色、溢出设置、字体大小、文字居中、边框大小样式以及图片的位置等。核心 CSS 代码如下文所示：

　 <div class="footer"> <div class="shu"><p>联系我们

　 技术咨询热线: 4000-569-869

　 Copyright 2011-2014 完 美 日 记 服 装 有 限 公 司

　E-mail:info@perfectdiary.com

　Web:www.mycodes.net</p></div> <span style="font-family:Arial">1999-<script language="JavaScript">var nowD = new Date();var year = nowD.getFullYear();document.write(year);</script> </span> </div> <body> <!--头部--> <div class="t-yan"></div> <div class="barder"> <div

　class="barder-l"> <a href="#"><img src="images/loge.jpg" /></a></div> <div class="barder-c"> <ul> <li><a href="index.html">首页</a></li>

　 <li><a href="gongsi.html">公司简介</a></li>

　 <li><a href="new.html">新闻中心</a></li>

　<li><a href="chanp.html" class="bootm">产品中心</a></li>

　 <li><a href="lianxi.html">联系我们</a></li> </ul>

　4.3 购买与评论 功能实现 对于上图 “完美日记”眼影产品购买与评论的代码的具体介绍，如下所示展示出了部分代码：

　 具体 CSS 代码如下：

　 .content{

　margin-top: 50px;

　position: relative;

　width: 100%;

　background: #e5e5e5; } .content>div>div{

　width: 1000px;

　margin: 25px auto 0; } .content p{

　font-size: 16px;

　color: #333333;

　letter-spacing: 1px;

　indent: 2em;

　text-align: justify;

　line-height: 30px; } „„ <div class="mainr-chc"> <a href="javascript：" class="lefi"></a> <a href="javascript：" class="riget"></a> <div class="yifu">

　 <ul>

　 <li><img src="images/chan01.png" /></li>

　 <li><img src="images/chan02.png" /></li>

　 <li><img src="images/chan03.png" /></li>

　 <li><img src="images/chan04.png" /></li>

　 <li><img src="images/chan05.png" /></li>

　 </ul> </div> </div>

　从代码可以看出来，购买评论等栏目 html 标记都是超链接标记 href；商品用的图片都是经过 Photoshop 处理过的；并且用了大量的 css 语言与 div+css 布局进行布局整理，使页面进行圆润的处理，并且选择性的使用了 json，JavaScript等语言进行细节的处理。

　4.4 商品种类特点、公司介绍、友情链接 功能实现 从商品种类特点、公司介绍、友情链接功能实现的代码可以看出来，对于产品种类，友情链接等代码展示之中可以看出来，html 标记都是超链接标记 href；商品用的图片都是经过 Photoshop 选择的都是 420*250 像素的图片处理过的；并且用了大量的 css 语言与 div+css 布局进行布局整理，使页面进行圆润化处理，并且选择性的使用了 json，JavaScript 等语言进行细节的处理。对于上文商品种类特点、公司介绍、友情链接功能实现的代码的具体介绍，如下所示展示出了部分代码：

　<div class="mainl-c"> <ul> <li><a href="#">松粉状眼影<br /><span>concupt</span></a></li> <li><a href="#">膏状眼影<br /><span>Crewneck sweater</span></a></li> <li><a href="#" class="no">霜状眼影<br /><span>hire</span></a></li> </ul> </div> <div

　class="mainl-f"> <ul> <li

　>

　 <a href="#"class="bg">友情链接<br /><span>Link</span></a>

　 </li></ul> </div> <div class="mainl-c"> <ul> <li><a href="#" class="shang"><img src="images/disini.png" /></a></li> <li><a href="#"><img src="images/tuzi.png" /></a></li> <li><a href="#" ><img src="images/xinwenf3.png" /></a></li> </ul> </div>

　4.5 新闻中心 这一部分表格用 table 标签实现，设置好标签格式填入内容。接下来是表格下方的图片，利用 CSS 排版实现，过程较简单，不做详细说明，这样实现即区分内容，又不显得突兀。table 标签格式如下文 HTML 代码：

　 <img src="images/NEWS.png"class="news"

　/>

　 <p>新闻中心<br /><span>THE NEWS CENTER</span></p> </div> <div class="mainr-sr"><a href="#">当前位置</a> ><a href="#"> 首页</a> ><a href="#"> 新闻中心</a> </div> </div> <div class="lie"> <ul>

　 <li><a href="news.html">perfectdiary 深动演讲，完美订货。</a><span>2019-04-20 </span></li>

　 <li><a

　href="news.html">perfectdiary2019 重塑记忆 秋季订货会，让完美的你添加更多色彩。。</a><span>2019-04-20 </span></li>

　 <li><a

　href="news.html">perfectdiary 缔造完美女神，成就卓越的你。</a><span>2019-04-20 </span></li>

　 <li><a

　href="news.html">perfectdiary 十年感恩，一路有您，感恩回馈，优惠大礼。</a><span>2019-04-20 </span></li>

　 <li><a

　href="news.html">perfectdiary 春夏灵感主题——自然之声，让颜色更能体现出生面的律动。</a><span>2019-04-20 </span></li>

　 <li><a

　href="news.html">perfectdiary 关注我们【新浪微博】【微信平台】等相关平台。</a><span>2019-04-25 </span></li>

　 <li><a

　href="news.html">perfectdiary 秋冬遇见，让你的童年更加丰富。</a><span>2019-07-24 </span></li>

　 <li><a

　href="news.html">perfectdiary 我们上【天猫】啦！！！折扣打不停，优惠促销活动。</a><span>2019-05-25 </span></li>

　 <li><a

　href="news.html">perfectdiary 新品上市。</a><span>2019-04-22 </span></li>

　 <li><a

　href="news.html">perfectdiary 上市，热销款式席卷而来。</a><span>2019-08-25 </span></li>

　 <li><a

　href="news.html">perfectdiary 武林店隆重开幕——优雅邂逅。。</a><span>2019-05-22 </span></li>

　 <li><a

　href="news.html">perfectdiary 春夏灵感主题——自然之声，让颜色更能体现出生面的律动</a><span>2020-01-20 </span></li> <ul>

　4.6 联系我们 这一部分主要是由消费者填写，我们页面只需设置><td class="ge">留言标题：</td>即可，留取足够的空白行给消费者发表自己的的消费感言，以及自己的意见或者建议，设计了专门的意见填写栏目，达到点击跳转的作用，并且在下面还专门提供了 qq 在线咨询，点击即可实现跳转功能，租后给出了客户服务热线以及相应的邮箱，具体的 html 代码如下所示：

　<div style="width:938px;height:428px;border:#ccc solid 1px; overflow:auto;" id="dituContent"></div>

　 <form>

　 <table>

　 <tr><td class="ge">留言标题：</td><td><input type="text" class="txt" /></td></tr>

　<tr><td class="ge">留言内容：</td><td><textarea cols="60" rows="6" class="nei"></textarea></td></tr>

　 <tr><td class="ge">联系邮箱：</td><td><input type="text"

　class="txt"/></td></tr>

　<tr><td class="ge">联系电话：</td><td><input type="text" class="txt" /></td></tr>

　 <tr><td class="ge">联系人：</td><td><input type="text" class="txt" /></td></tr>

　<tr><td></td><td><input

　type="image" src="images/tijiao.jpg" /></td></tr>

　 <tr><td></td><td></td></tr>

　 <tr><td class="ge">其他在线联系方式：</td><td class="kuan"><input

　type="image" src="images/lianxi.jpg"

　/></td></tr>

　 <tr><td></td><td

　class="kuan">客户服务热线</td></tr>

　 <tr><td></td><td

　class="kuan dian">400-569-8694</td></tr>

　 <tr><td></td><td

　class="kuan"></td></tr>

　 <tr><td></td><td

　class="kuan">邮箱</td></tr>

　 <tr><td></td><td

　class="kuan dian">www.moshi@163.com</td></tr>

　5 总结与展望 5.1 研究 总结 本文的研究工作主要集中于“完美日记”眼影产品展示页的设计与实现的研究。随着社会的发展，互联网行业快速发展起来，各种电商已经融入人们的生活包括（淘宝，天猫，京东，以及最近起来的评多多等）,人们通过浏览网页的形式交互访问各类电商网站。通过网络渠道购买产品成了一种更时尚,更透明,更方

　便快捷,更节省人力物力的新型的购物方式。本文的研究工作主要有以下几个部分：

　1、对于商品展示页的设计与实现的基础知识进行了介绍，以美妆类产品展示特点为例，展示了主流页面展示技术，包括 HTML，css 等技术，最后以百度和淘宝展示页进行了基础的分析。

　2、“完美日记”眼影产品展示页设计进行了基础的了解，包括“完美日记”眼影产品特点分析，展示页的基础...