基于视觉营销的陶宝化妆品店铺移动端UI设计研究

摘要

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。计算机技术的发展，特别是网络技术的飞速发展，给文档的保存和管理提供极大的方便。

本文依据陶宝化妆品店铺设计出来的移动UI购物客户端，做了全面的系统介绍。分为系统分析、构建动态网页、网页界面设计、系统详细设计等章节，介绍了我的移动UI购物客户端的设计和制作过程。该移动端拥有消息发布、留言发布、商品发布、链接管理等模块，基本能满足目前的全部需求。本论文中，将移动UI购物客户端设计的基本原理和方法应用到整个系统，并对其进行需求分析，提出了解决问题的具体方法。移动端建设中使用了Dreamweaver，Fireworks，Access等工具，架设平台为WindowsServer2003+IIS5.1，UML系统模型图来设计。移动端用asp语言编写并使用数据库保存信息，同时使用CSS等技术统一网页风格。并详细介绍了移动端是怎样构建的，还用了比较直观易读的流程图来表示了制作过程，最后附上部分设计的代码。

关键字：UI；化妆品；移动端

Abstract

WiththerapiddevelopmentofInternet,theInternethasbecomeanimportantchannelforpeopletoquicklyobtain,publishandtransmitinformation.Itplaysanimportantroleinpeople''spolitics,economy,lifeandotheraspects.Thedevelopmentofcomputertechnology,especiallytherapiddevelopmentofnetworktechnology,providesgreatconvenienceforthepreservationandmanagementofdocuments.

ThispapergivesacomprehensiveintroductiontothemobileUIshoppingclientdesignedbyTaoBaocosmeticsshop.Itisdividedintosystemanalysis,constructionofdynamicwebpages,webinterfacedesign,systemdetaileddesignandotherchapters.ItintroducesthedesignandproductionprocessofmymobileUIshoppingclient.Themobileterminalhasthemodulesofnewsrelease,messagerelease,commodityrelease,linkmanagementandsoon,whichbasicallymeetsallthecurrentneeds.Inthispaper,thebasicprinciplesandmethodsofthemobileUIshoppingclientdesignareappliedtothewholesystem,andtherequirementanalysisiscarriedout,andthespecificmethodstosolvetheproblemareputforward.Dreamweaver,Fireworks,Accessandothertoolsareusedinthemobileterminalconstruction.TheplatformisdesignedforWindowsServer2003+IIS5.1,UMLsystemmodeldiagram.ThemobileterminaliswritteninASPlanguageandstoredindatabase.Meanwhile,CSStechnologyisusedtointegratewebpagestyle.Italsodescribesindetailhowthemobileterminalisbuilt,andshowstheproductionprocesswitharelativelyintuitiveandeasytoreadflowchart.Finally,thecodeisattachedtothedesignpart.

Keywords:UI;cosmetic;mobileterminal







目录

1引言 1

2相关技术概述 2

2.1软件开发模式 2

2.2ASP.NETMVC 2

2.2.1.MVC模式概述 2

2.2.2ASP.NETMVC工作原理 4

2.3SQLServer2012 5

3系统分析 7

3.1需求分析 7

3.2实体—关系图 7

4移动端的界面设计 9

4.1网页界面构成要素 9

4.2网页的整体造型 10

4.3网页的色彩搭配 11

4.4DIV+CSS的技术 12

4.5DIV+CSS布局方法 13

4.6DIV+CSS布局设计 15

4.6.1整体布局 15

4.6.2动态链接样式 16

4.6.3图文混排 18

5系统详细设计 19

5.1移动端首页 19

5.2移动端页面组成 21

5.3移动端前台设计 22

5.3.1移动端的头部页面top.asp 22

5.3.2移动端的底部页面bottam.asp 22

5.3.3BB霜页面图 22

5.3.4搜索页面 23

5.3.6口红商品界面 25

6移动端测试 27

结束语 28

参考文献 29

谢辞 32



1引言



随着计算机及网络技术的飞速发展，Internet/Intranet应用在全球范围内日益普及，当今社会正快速向信息化社会前进，信息系统的作用也越来越大。计算机网络的快速发展以及市场经济的持续刺激，让网络购物这一个在国际发展中饱受争议的购物体系，在我国率先得到实质性的成功，当下的网络购物市场庞大而混杂，以阿里巴巴公司支撑的马里巴巴购物平台，淘宝网以及附属的淘宝商城、天猫网等移动UI购物客户端在当今中国的购物市场可谓人人皆知，销售数额巨大，为广大实体营销商垂涎，近几年，伴随着国内网络购物的持续发展，京东商城、易讯网、QQ商城等移动UI购物客户端纷纷成立，并投入大量的广告资金进行宣传造势，让整个网络购物市场变得更为完善，形成了有市场竞争、有质量保障、有运营体系的稳定市场。

本文主要以陶宝化妆品店铺移动UI购物客户端的设计与实现来进行设计。本系统拟通过一个平台，以个移动UI购物客户端的形式来展示个陶宝化妆品店铺的化妆品商品信息。通过移动UI购物客户端的设计，在展现商品的同时，还需要应用到当前的主流移动端设计形式，并且将数据库加入到设计中，体现动态移动端的设计。

移动UI购物客户端是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把作品、商品展示销售而制作的具有独立空间域名的物品交易移动端。

2相关技术概述

2.1软件开发模式

ASP（ActiveServerPages）是一个服务器端脚本编程环境，是由Microsoft公司所研发出来的，ASP程序是由文本、HTML和脚本组合而成的。在当前开放式Web应用程序中，ASP是较为流行的一种开发技术。ASP的主要特征表现在能联合脚本HTML、组件以及巨大的Web数据库访问功能，在服务器上形成一个能正常运转的应用程序，并将依照客户需求创建的HTML页面提供给客户端浏览器。在ActiveX技术范畴中，ASP就属于其中的一种服务器端技术。Java等技术动态页面的实现一般情况下是在客户端完成的，而ASP则有所不同，通过服务端，ASP的指令与脚本进行解释执行，最后将形成的HTML页面传送至浏览器。由于是在服务端执行脚本，因此对于脚本是否能被浏览器执行，研发者们是不需要过分担心的。与此同时，考虑到仅仅是将形成的HTML页面结果传送至浏览器，ASP程序通过浏览器是观察不到的，所以能有效避免程序代码的遗失。此外，ASP还具备诸多优势。首先，对于用户的请求，在Web服务器的同一程序中，ASP运行能更为快捷，更加高效的进行处理；其次，ASP供给了更为便捷的数据库访问模式，以数据库驱动为基础的Web应用程序研发将显得更为轻松。



2.2ASP.NETMVC

2.2.1.MVC模式概述

MVC模式是一种软件架构模式。它把软件系统分为三个部分：模型（Model），视图（View）和控制器（Controller）。MVC设计模式的作用是使得软件开发处于一种动态过程，因为这样使以后能够对已开发的程序功能进行修改，并且有可能重复使用程序中的某一个模块。另外，此MVC模式在简化过后，能够使程序结构更加明朗清晰。在MVC模式中，一个应用被分成三个层次——模型层、视图层和控制层，实现了将一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，使它们在应用系统中分别担当不同的角色，完成不同的任务。MVC模式的结构如图所示。















图2.1MVC结构模式图

（1）视图

视图（View）层能够实现相关功能的数据显示。在视图中，一般没有程序上的逻辑。为了达到实现视图上的刷新功能，视图需要访问它监视的数据模（Model），因此应该事先在被它监视的数据那里注册。

（2）模型

模型（Model）用于对程序中的用于处理业务逻辑的数据以及对该数据的处理方法。Model

能够直接读取相关数据，如通过ADO.NET对数据库进行直接访问。Model与View以及Controller是相互独立的，他们不需要在意其他部分是怎么显示和操作的。在使用这种机制的时候，必须在模式上注册用于监视此模型的视图，这样的话，视图可以很好的掌握数据模型上发生的变化。

（3）控制器

控制器（Controller）

控制器并不进行任何的数据处理。例如，用户点击一个连接，控制器接受该请求后,并不处理业务信息，而只是把用户的请求信息传递给模型，告诉模型做什么，最后，选择符合要求的视图返回给用户。因此，一个应用可能有多个控制器，每个控制器

只负责应用的某个特定领域的处理。MVC模式三层结构模型包括：用户界面层(UI层)、业务逻辑层和数据层，它们之间的关系如图所示。















图2.2ASP.NET系统结构图

2.2.2ASP.NETMVC工作原理

动态网页程序设计语言，是Microsoft最新发布的一种用来替代CGI的网络编程技术。可以应用ASP.NETMVC、数据库、HTML语言和ActiveX元件等多方面的计算机相关技术，建立动态的交互式Web站点，搭建功能强大的移动端服务器。ASP.NETMVC的几点优点总结如下：

（1）使用像普通记事本之类的文本编辑工具，就可进行编辑与设计。

（2）可以使用VBScript和JAVASCRIPT脚本语言一起编写程代码，与HTML语言完美结合，可以很容易的建立一个小规模的移动端。在VBScript和JAVASCRIPT，两个编程语言中选择哪一种语言没有太大的差别，网络服务器都可以顺利运行使用两种语言编写的程序，最后把程序运行结果以HTML格式通过浏览器发送到客户计算机。

（3）可以隐藏ASP.NETMVC程序代码，在客户端计算机上只能看到HTML格式的网页文件和文件的代码，并看不到编写的源程序代码，这样防止了源程序的外泄，避免被一些有不良目的黑客发现破绽，导致移动端受到攻击。

（4）ASP.NETMVC除了能与VBScript、JAVASCRIPT、ActiveX相兼容外，还可以通过嵌入的方式使用其它编程语言，例如Perl语言等。负责处理脚本语言程序的组件是COM组件。

（5）ASP.NETMVC是在服务器端运行的程序，所以不用担心客户机是否能够运行ASP.NETMVC编程语言，仅仅需要在客户端安装识别HTML代码的浏览器就可以，在服务器端ASP.NETMVC程序运行完毕后，服务器会将程序的执行结果传送给客户机，这种运行方式减轻了客户端计算机浏览器的压力，在一定程度上提高了程序的执行效率。

2.3SQLServer2012

StructuredQueryLanguage的缩写就是SQL，中文翻译是结构化查询语言，它语法简单、功能强大，包括：定义、查询、操纵和控制等功能，它的主要特点是：结构统一、高度非过程化、操作方式面向集合、两种使用方式由同一语法结构提供、语言简单、容易学、容易用。

SQL语言是IBM公司发明的，后来得到了美国计算机行业的认可，被许多软件公司接受，从而得到了广泛的应用，成为最通用的数据库编程语言。SQL语言的组成部分有两个：DDL：最主要的操作命令有：修改(ALTER)、建立(CREATE)、删除（DROP）等。建立表、视图、存储过程等对象，修改或删除对象，类似这些工作都是由DDL来完成的，DDL的主要任务是建立对象。DML：它们是UPDATE、SELECT、DELETE、INSERT，这四个命令是对数据库里的数据进行操控的语言。了解了这两部分的异同，对今后如何更方便的使用带来诸多帮助。因为许多的SQL语言的约束，也是基于这种分类来划分的，例如：你要在ORACLE中建立数据库链，只有DML类语言能对链接的数据库进行相关操作。SQL作为一个ANSI标准，一直在不断改进。SQLSever2012的主要特点：主要特点是所有SQL数据库中的数据都存储在表中。一个表由行和列组成。这个表有两列。有三行，每一行都包含一组数据。一条记录由一行的数据组合在一起。无论你何时向表中增添新的数据，你就增加了一条新的记录。而一个数据表则可以由几十个记录组成，也可以有成千甚至上亿个记录组成。你也许永远不会需要储存十亿个Email地址，但能这样做总是好的，或许有一天你会用到你所记录的一切。你的数据库有可能包含几十个或几百个表，所有存储在你数据库中的信息都被存储在这些表中。

3系统分析

软件工程包含技术和管理两方面的内容，是管理与技术的紧密结合。目前软件工程方法学分为传统方法学和面向对象方法学。在移动UI购物客户端数字化建设的课题中，主要用传统方法学的思路和原理来建设。

3.1需求分析

传统的软件工程方法学使用结构化分析技术，完成分析用户需求工作。需求分析要了解用户的情况，接下来通过与用户交流，对用户的基本要求反复细化，以得出对目标系统的完整、准确和具体的需求。需求分析是为了发现用户的真正需求，首先应从宏观角度调查、分析用户所面临的问题，也就是说，需求分析的第一步是尽可能准确地了解用户当前的情况和需要解决的问题。在移动UI购物客户端移动端中，用户所需要的无非就是获取标本信息，并查询到满足自身查询条件标本的详细商品资料。因此在做查询系统时，充分考虑到了一样标本的自身属性和用户有可能用到的查询条件，两都有机结合，这样才能更好的为用户服务。

3.2实体—关系图

结构化分析实质上是创建模型的活动。数据模型包含三种相互关联的信息：数据对象、描述数据对象的属性及数据对象彼此间相互连接的关系。

数据对象是对软件必须理解的复合信息的表示。所谓复合信息是指具有一系列不同性质或属性的事物。在这个查询系统中，数据对象就是标本和用户。

属性是指数据对象的性质，在确定属性时，应该根据对所要解决的问题来理解。关系是指数据对象之间相互连接的方式。





















图3.1实体关系图

从图3.1可以看到，标本分为科、属、种、标本四种属性，而用户的属性在这里是不重要的，也就是说用户的属性对整个查询没有影响。用户可以通过精确、模糊两种查询方式来获取标本信息。因此在制作整个系统时，充分考虑到以上因素，并以其思想贯穿整个系统。

















4移动端的界面设计

由于，除了具有传播信息的功能外，还。建设商业化和广告化的趋势，对网页设计的艺术性提出了更高的要求。虽然HTML语言提供了对常用Windows标准控件的支持，但是，由于Windows标准控件的形状和颜色十分单一，网页的视觉效果可能会很差。例如列表框和下拉列表框只能呈现凹陷边框，而且下拉列表的箭头的颜色不能改变，滚动条只能出现在窗口的下边和右边，当网页分成多个帧的时候，滚动条就不可避免的出现在网页的中间，破坏网页的整体性。若在网页的设计中主动配合Windows标准控件的形状和颜色，网页的创作空间就会受到限制。因此，有必要实现网页中的自定义控件，以满足网页设计艺术化的要求。与传统媒体不同，网页除了文字和图像以外，还包含声音、视频和动画等新兴多媒体元素，更借助由代码语言编程所实现的各种交互式效果，增加了网页界面的生动性和复杂性，也使得网页设计者需要考虑更多页面元素的排布、优化。文字：文字元素是信息传达的主体部分网页中的文字主要包括标题、信息、文字链接、几种主要形式。标题和传统媒体中信息传达的基本作用相同，是内容的简概说明一般比较醒目、优先编排。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的字体、大小、颜色和排布对页面整体设计影响极大图形：图形在网页界面中具有重要作用合理的运用图形。可以生动直观、形象地表现设计主题。网页中常用的图形格式包括jpg和gif，这两种格式压缩比高，得到了规范浏览器的支持，下载速度快，具有跨平台的特性，不需要浏览器安装插件即可直接阅览。图形元素包括标题、背景、主图、链接图标四种。页面版式：版式是网页界面设计的重要组成部分，它将文字、图形等视觉元素进行组合配置，使页面整体视觉效果美观和谐，便于阅读，实现信息传达的最佳效果。色彩：彩色网页比单色网页更具吸引力；色彩本身具有象征作用多媒体：网页构成中的多媒体元素主要包括音频、视频和动画。这些是界面构成中最吸引人的元素技术：网页的技术要素并非任何情况下在网页中都能直观体现，但是代表了设计的整体水平，也是衡量设计成功的重要标准。网页界面设最基本的技术要求包括：浏览器、传输速度、屏幕分辨率、颜色显示。.2网页的整体造型

网页的整体造型在整个制作中至关重要，一个杂乱无章的网页，给人第一印象极。

差的网页，用户访问过之后是不会再访问的。在制作本网页时，主要以学校主页界面形式作为参考，因为它看上去比较柔和、简洁、和谐，给用户清新的感觉。

造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。

对于不同的形状，它们所代表的意义是不同的。比如矩形代表正式，规则，注意到很多ICP和政府网页都是以矩形为整体造型；圆形代表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状代表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。

制作中主要采用Dreamweaver作为主要制作工具，其中插入了Flash元素，还用了Photoshop处理其中图片，这样能使网页更加生动。



4.3网页的色彩搭配

打开一个移动端，给用户留下第一印象的既不是移动端丰富的内容，也不是移动端合理的版面布局，而是移动端的色彩。色彩对人的视觉效果非常明显，一个移动端设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，必须要高度重视色彩的搭配。

色彩五颜六色、千变万化。其中，红、黄、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。色彩有冷暖色之分，冷色(如蓝色)给人的感觉是安静、冰冷；而暖色(如红色)给人的感觉是热烈、火热。冷暖色的巧妙运用可以让移动端产生意想不到的效果。

色彩与人的心理感觉和情绪也有一定的关系，利用这一点可以在设计网页时形成自己独特的色彩效果，给浏览者留下深刻的印象。一般情况下，各种色彩给人的感觉是：

红色代表热情、活泼、热闹、温暖、幸福、吉祥

橙色代表光明、华丽、兴奋、甜蜜、快乐

黄色代表明朗、愉快、高贵、希望

绿色代表新鲜、平静、和平、柔和、安逸、青春

蓝色代表深远、永恒、沉静、理智、诚实、寒冷

紫色代表优雅、高贵、魅力、自傲

白色代表纯洁、纯真、朴素、神圣、明快

灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞

黑色代表崇高、坚实、严肃、刚健、粗莽

在色彩搭配中一般遵循下述一些原则：

1特色鲜明：一个移动端的用色必须要有自己独特的风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。

2搭配合理：网页设计虽然属于平面设计的范畴，但它又与其它平面设计不同，它在遵从艺术规律的同时，还考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。

3讲究艺术性：移动端设计也是一种艺术活动，因此它必须遵循艺术规律，在考虑到移动端本身特点的同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合移动端要求，又有一定艺术特色的移动端。

在设计移动UI购物客户端时主要考虑的因素是要能让用户浏览过之后，以后还会再登陆移动UI购物客户端移动端，因此用了朴素、大方、简洁、和谐的设计原则。

4.4DIV+CSS的技术

传统html标签时，标签有两种结构，但也表现标签DIV+CSS网页设计的技术，是一种思维设计变更的方式，这使得页面分离的结构和性能，因此，同样的内容和结构，它可以

要使用不同的CSS样式定义CSS样式的方法，在不改变的前提下的页面内容和结构，实现不同的形式，改变布局和性能结果页面。

1、DIV技术DIV全称为division，就是区分/分离装置。

标记是一个文档中的HTML内容的块级元素所对应的一组开始标记

和结束标记提供HTML文档和背景的块结构块

构成由

通常定位>标签属性或引用CSS样式来实现DIV标签定义块可以嵌套复杂的页面布局，因此，这为网页布局提供了有利技术支持另外，在所构成的块中，可以放置文字图像和表格等各种网页元素，方便对网页进行设计。

2、CSS技术CSS是英语CascadingStyleSheets(层叠样式表)的缩写,它是一种用来表现HTML或XML等文件样式的标记性语言,用于网页的排版和风格设计,可以弥补HTML的不足,使Web变得更丰富。在使用表格布局时,也曾接触和应用到CSS。CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。它的基本语法为:选择器(selector){属性(property):值(value)}。选择器通常是需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性是希望设置的样式属性(styleattribute),每个属性有一个值,属性和值被冒号分开。如果要定义多个声明,则需要用分号将每个声明分开。

4.5DIV+CSS布局方法

1、DIV+CSS盒模型盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容内边距（padding）边框（border）和外边距（margin）组成网页就是由许多个盒子通过不同的排列方式（纵向排列横向排列和嵌套排列）堆积而成。



图4.1CSS盒子模型

2、DIV+CSS定位。定位是通过实现位置属性的值的最重要的技术页面布局，CSS定位，属性值有以下4种，即：staticrelativeabsolutefixed

Static：静态定位：;默认值没有特殊的定位，定位对象遵循HTML规则，按照这个时间显示在页面上框的总体布局。

Relative：相对定位：使用该属性值框中仍然是常见的布局，占据其位置，在定位的计算，只能通过left，right，top，bottom等属性，使得相对于箱子到原来的起点显示举动。

Absolute：绝对定位：相对于与位置属性最接近母块绝对定位盒位置将是，如果尚未定位的父块，则相对于body对象，即浏览器窗口绝对定位的元素抛开了文档排列布局，相当于游离于文档页面之上，所以各对象会相互覆盖，而其层叠顺序可由z-index属性改变。

fixed：固定的位置：类似于绝对的，但它仅仅是相对于浏览器窗口中的浏览器定位和固定到一个位置，不与滚动条滚动和滚动。

3.根据上述浮动框定位模式，盒子并未出文档的控制流，排列，而仍在非常与使用一个浮箱技术的限制使盒从文档的向左侧流动或右，和多样化的安排，布置灵活浮动元素会生成一个块级框，可以向左或向右移动，直到整个容器盒边境或其他浮箱，直到盒通过设置float属性值实现浮动外缘，属性值有以下三种：none、left、right其中none表示不浮动；left表示浮在左边；right表示浮在右边。

有时，浮动不当会导致页面错位出现的话，那么你可以使用Clear方法来清除浮球，不仅可以解决错位页面的问题，还要解决孩子的浮动元素不能引起上级元素自适应背景通过设定清晰透明浮法财产价值实现的子元素的高度问题，属性值有以下四种：：noneleftrightboth其中none表示允许两边都可以有浮动对象；left表示不允许左边有浮动对象；right表示不允许右边有浮动对象；both表示不允许有浮动对象。

4、DIV+CSS技术优势与传统网页设计技术相比，DIV+CSS技术有明显优势：

1.页面访问量，因为大多数写在CSS页面，这使得该页面体积容量大大降低了代码，速度更快。

2.保持风格一致的移动端使用DIV+CSS技术，将控制与来自不同区域或不同的页面相同的CSS文件中的所有页面反映偏差的影响。

3.移动端更容易维护维修人员需要将文件的内容;修改到外部作风，提高工作效率。

4.更好的搜索引擎，由于独立CSS样式表书面文件，这使得该页面的主体显著便于包括搜索引擎获得的更突出的部分索引。

5.劳动分工更有利于团队采用DIV+CSS技术，内容与表现分离，在劳动分工中团队开发更容易，减少相互联系。

4.6DIV+CSS布局设计

DIV+CSS是从排版习惯的传统观念不同的新的出版布局将是整个第一页

标记的每个块上，然后添加CSS定位块，最后加入适当的样式在每个块下面的内容最常见的三栏布局作为他们分配方法的一个例子概述。

4.6.1整体布局

首先根据网页内容把网页区分成不同的区块这里共分为topcontentfooter三个区域分别作为网页的顶部内容和版权区域然后在各区块内编写文档代码如下：






charset=utf-8"/>









此处显示id"header"的内容

此处显示id"left"的内容

此处显示id"main"的内容

此处显示id"footer"的内容

然后分别设置CSS样式如下

{margin:0px;padding:0px;}

body{text-align:center;padding-top:6px;}

#box{width:800px;margin:0auto;text-align:left;}

#header{height:60px;width:100%;border:1pxsolid#C63;}

#content{height:350px;width:100%;margin-top:5px;margin-

bottom:5px;}

#left{float:left;height:350px;width:200px;bor-der:1pxsolid

#06C;}

#main{float:right;height:350px;width:590px;border:1pxsolid

#000;}

#footer{height:90px;border:1pxsolid#633;}

其中设置box的margin属性的左右为0auto实现网页的居中显示设置left的float属性为leftmain的float属性为right实现中间两个竖栏的显示为border设置边框属性实现如图显示的边框效果。

4.6.2动态链接样式

链接可以说是HTML，HTML超文本文件的命脉，是通过链接选项卡固本散周围的文字和音乐视频链接等信息世界图像，以便动态显示是一个非常重要的网页设计技术，使用最广泛的四种类型链路状态a:link已访问的链接a:visited鼠标指针悬停在链接的状态a:hover以及被激活的链接a:active在网页设计中通过定义链接伪类使其呈现这些状态但必须按照linkvisitedhoveractive的顺序进行定义。

• 首页



• HTML基础知识介绍



• CSS入门知识学习



• 网页布局技术大揭秘



• 网页设计高手教程



• 在线知识手册

首先在顶部区域新建两个子DIV区块分别放置一个banner图片和一个导航菜单列表然后再编写动态链接CSS样式设置如下：

#headerli{float:left;list-style-type:none;margin:08px;}

#headerlia,#headerlia:link,#headerlia:vi-sited{text-

decoration:none;}

#headerlia:hover{background-color:#F00;}

#nav{height:30px;text-align:center;padding-top:8px;

padding-left:0px;padding-bottom:0px;}

#bannerimg{width:800px;height:87px;}

4.6.3图文混排

图文混排是网页内容排版的的重要内容下面通过一个简单实例在#main区块内实现图文混排的效果，代码如下：

DIV+CSS网页布局技术应用研究

使用Table进行页面布局是传统的网页布局显示技术随着Web2.0标准化设计理念的普及

CSS样式设置如下：

#mainh2{text-align:center;color:#F00;margin-top:10px;}

#mainimg{float:left;height:220px;margin:15px;}

#mainp{margin-top:15px;padding:2px;font-size:14px;text-

indent:2em;color:#03F;}

在CSS样式中通过定义图片和说明文字的属性使两者一起向左浮动实现图文混排的效果。







5系统详细设计

5.1移动端首页



图5.1移动端首页图

栏目设置：

封面、购买商品、BB霜、口红、粉底专区、化妆品、金币商城

主页包括以下功能：本站公告、本站动态、会员登录、友情链接

首页模块代码: