拖拽版模块样式升级示例

这次升级主要是涉及到模块的更多样式设置，主要升级对象包括下图画红框的项目

下面我来简单介绍一下每项功能的基本使用和能实现的基本样式。

1、文字列表，文字+时间列表

首先是文字列表，文字列表升级的功能比较多，通过文字列表可以完成很多你们想要的设计效果具体是：

基本的新闻展示列表，可以设置列表项的上下左右边线，上下左右内边距，上下左右外边距，和默认背景颜色，文字效果，默认前标图片等。

和鼠标经过的上下左右边框颜色，上下左右边线，上下左右内边距，上下左右外边距，鼠标经过的背景颜色，鼠标经过文字效果，鼠标经过的前标效果等。

效果图：

具体的设置方法是：通过打开模块的样式然后点击更多设置，就可以看到里边有两个标签切换项，通过选择不同选项来设置默认状态和鼠标经过状态。

（1）在列表项默认状态下添加了，列表项的：上下左右边线、外边距、内边距、文字对齐方式、前标、链接文字样式等。

（2）在列表项鼠标经过下，同样有和默认状态相同的设置项，它主要是用来设置鼠标经过列表项时的样式。

示例2：

同时文字列表样式也可以设置成效果图2的多列新闻列表样式，主要需要设置的地方是，列表项默认样式中的：是否多行显示和每列占整行的宽度值，根据您的需求来设置不同的宽度，宽度值是用百分比来计算的，如果您想让新闻列表每行显示两条新闻那就设置成50%，如果想显示三条数据那就设置成33%，以此类推。其他效果和示例1的一样

示例3：

这个效果也是大家经常用到的效果，这个也是可以用文字列表来实现的具体实现方法是：

在列表项默认选项卡中，列表项显示设置中设置如图：多行显示为：是，列表宽度设置为自适应，这样就可以实现文字在一行显示的效果并且没有宽度了。

示例4：

这样的样式也是可以通过文字列表来实现的，结合我上边说的那些功能就可以实现，这里就不在具体阐述了。

2、单张图片效果

单张图片模块主要升级的是：增加了图片对齐方式、默认边框样式、外边距、内边距。

鼠标滑过边框样式，鼠标滑过内边距，鼠标滑过外边距等。

主要是为了能设置默认状态下边框为1像素，鼠标滑过的时候想让边框为10像素，那就可以通过设置默认的内边距来实现，当默认状态下内边距为10像素，鼠标滑过的时候由于边框增大了，所以相应的内边距缩小就可以实现好看的鼠标滑过效果了。

3、图文信息效果：

图文信息效果增加的功能和文字列表效果增加的功能是一样的，具体参照文字列表的一些设置。

具体增加的设置项有：是否可以单行显示，每项占总宽度的百分比。

默认状态下的上下左右边线、上下左右外边距、上下左右内边距、鼠标滑过状态下的上下左右边线、上下左右外边距、上下左右内边距等。

列表内容选项卡中主要包括：

项目图片样式设置：默认边线、鼠标滑过图片的边线效果、图片的内边距、外边距等。

项目标题样式设置: 隐藏显示、标题高度行高、标题对齐方式、文字的样式等、包括鼠标滑过的一些效果。

价格样式设置：对齐方式、文字的样式等。

简介基本设置：行高、文字的样式等

4、橱窗展示效果：

橱窗展示效果和图文信息的设置完全一样。

这里需要提出的一点就是现在的橱窗展示可以通过自己的设置来实现一行现实几个，和每个之间的间距等，通过调节项宽和边距可以达到想要的效果。

5、友情链接效果：

友情链接效果主要是借鉴了文字列表，和橱窗展示的效果设置，这里就不在具体阐述，可以借鉴前两个来实现这样的效果。