拖拽版模塊樣式升級示例

這次升級主要是涉及到模塊的更多樣式設(shè)置，主要升級對象包括下圖畫紅框的項目

下面我來簡單介紹一下每項功能的基本使用和能實現(xiàn)的基本樣式。

1、文字列表，文字+時間列表

首先是文字列表，文字列表升級的功能比較多，通過文字列表可以完成很多你們想要的設(shè)計效果具體是：

基本的新聞?wù)故玖斜�，可以設(shè)置列表項的上下左右邊線，上下左右內(nèi)邊距，上下左右外邊距，和默認背景顏色，文字效果，默認前標圖片等。

和鼠標經(jīng)過的上下左右邊框顏色，上下左右邊線，上下左右內(nèi)邊距，上下左右外邊距，鼠標經(jīng)過的背景顏色，鼠標經(jīng)過文字效果，鼠標經(jīng)過的前標效果等。

效果圖：

具體的設(shè)置方法是：通過打開模塊的樣式然后點擊更多設(shè)置，就可以看到里邊有兩個標簽切換項，通過選擇不同選項來設(shè)置默認狀態(tài)和鼠標經(jīng)過狀態(tài)。

（1）在列表項默認狀態(tài)下添加了，列表項的：上下左右邊線、外邊距、內(nèi)邊距、文字對齊方式、前標、鏈接文字樣式等。

（2）在列表項鼠標經(jīng)過下，同樣有和默認狀態(tài)相同的設(shè)置項，它主要是用來設(shè)置鼠標經(jīng)過列表項時的樣式。

示例2：

同時文字列表樣式也可以設(shè)置成效果圖2的多列新聞列表樣式，主要需要設(shè)置的地方是，列表項默認樣式中的：是否多行顯示和每列占整行的寬度值，根據(jù)您的需求來設(shè)置不同的寬度，寬度值是用百分比來計算的，如果您想讓新聞列表每行顯示兩條新聞那就設(shè)置成50%，如果想顯示三條數(shù)據(jù)那就設(shè)置成33%，以此類推。其他效果和示例1的一樣

示例3：

這個效果也是大家經(jīng)常用到的效果，這個也是可以用文字列表來實現(xiàn)的具體實現(xiàn)方法是：

在列表項默認選項卡中，列表項顯示設(shè)置中設(shè)置如圖：多行顯示為：是，列表寬度設(shè)置為自適應，這樣就可以實現(xiàn)文字在一行顯示的效果并且沒有寬度了。

示例4：

這樣的樣式也是可以通過文字列表來實現(xiàn)的，結(jié)合我上邊說的那些功能就可以實現(xiàn)，這里就不在具體闡述了。

2、單張圖片效果

單張圖片模塊主要升級的是：增加了圖片對齊方式、默認邊框樣式、外邊距、內(nèi)邊距。

鼠標滑過邊框樣式，鼠標滑過內(nèi)邊距，鼠標滑過外邊距等。

主要是為了能設(shè)置默認狀態(tài)下邊框為1像素，鼠標滑過的時候想讓邊框為10像素，那就可以通過設(shè)置默認的內(nèi)邊距來實現(xiàn)，當默認狀態(tài)下內(nèi)邊距為10像素，鼠標滑過的時候由于邊框增大了，所以相應的內(nèi)邊距縮小就可以實現(xiàn)好看的鼠標滑過效果了。