|
拖拽版模塊樣式升級(jí)示例這次升級(jí)主要是涉及到模塊的更多樣式設(shè)置，主要升級(jí)對(duì)象包括下圖畫紅框的項(xiàng)目
下面我來簡(jiǎn)單介紹一下每項(xiàng)功能的基本使用和能實(shí)現(xiàn)的基本樣式。 1、文字列表，文字+時(shí)間列表 首先是文字列表，文字列表升級(jí)的功能比較多，通過文字列表可以完成很多你們想要的設(shè)計(jì)效果具體是： 基本的新聞?wù)故玖斜�，可以設(shè)置列表項(xiàng)的上下左右邊線，上下左右內(nèi)邊距，上下左右外邊距，和默認(rèn)背景顏色，文字效果，默認(rèn)前標(biāo)圖片等。 和鼠標(biāo)經(jīng)過的上下左右邊框顏色，上下左右邊線，上下左右內(nèi)邊距，上下左右外邊距，鼠標(biāo)經(jīng)過的背景顏色，鼠標(biāo)經(jīng)過文字效果，鼠標(biāo)經(jīng)過的前標(biāo)效果等。 效果圖：
具體的設(shè)置方法是：通過打開模塊的樣式然后點(diǎn)擊更多設(shè)置，就可以看到里邊有兩個(gè)標(biāo)簽切換項(xiàng)，通過選擇不同選項(xiàng)來設(shè)置默認(rèn)狀態(tài)和鼠標(biāo)經(jīng)過狀態(tài)。 （1）在列表項(xiàng)默認(rèn)狀態(tài)下添加了，列表項(xiàng)的：上下左右邊線、外邊距、內(nèi)邊距、文字對(duì)齊方式、前標(biāo)、鏈接文字樣式等。 （2）在列表項(xiàng)鼠標(biāo)經(jīng)過下，同樣有和默認(rèn)狀態(tài)相同的設(shè)置項(xiàng)，它主要是用來設(shè)置鼠標(biāo)經(jīng)過列表項(xiàng)時(shí)的樣式。
示例2：
同時(shí)文字列表樣式也可以設(shè)置成效果圖2的多列新聞列表樣式，主要需要設(shè)置的地方是，列表項(xiàng)默認(rèn)樣式中的：是否多行顯示和每列占整行的寬度值，根據(jù)您的需求來設(shè)置不同的寬度，寬度值是用百分比來計(jì)算的，如果您想讓新聞列表每行顯示兩條新聞那就設(shè)置成50%，如果想顯示三條數(shù)據(jù)那就設(shè)置成33%，以此類推。其他效果和示例1的一樣
示例3：
這個(gè)效果也是大家經(jīng)常用到的效果，這個(gè)也是可以用文字列表來實(shí)現(xiàn)的具體實(shí)現(xiàn)方法是： 在列表項(xiàng)默認(rèn)選項(xiàng)卡中，列表項(xiàng)顯示設(shè)置中設(shè)置如圖：多行顯示為：是，列表寬度設(shè)置為自適應(yīng)，這樣就可以實(shí)現(xiàn)文字在一行顯示的效果并且沒有寬度了。
示例4：
這樣的樣式也是可以通過文字列表來實(shí)現(xiàn)的，結(jié)合我上邊說的那些功能就可以實(shí)現(xiàn)，這里就不在具體闡述了。 2、單張圖片效果
單張圖片模塊主要升級(jí)的是：增加了圖片對(duì)齊方式、默認(rèn)邊框樣式、外邊距、內(nèi)邊距。 鼠標(biāo)滑過邊框樣式，鼠標(biāo)滑過內(nèi)邊距，鼠標(biāo)滑過外邊距等。 主要是為了能設(shè)置默認(rèn)狀態(tài)下邊框?yàn)?像素，鼠標(biāo)滑過的時(shí)候想讓邊框?yàn)?0像素，那就可以通過設(shè)置默認(rèn)的內(nèi)邊距來實(shí)現(xiàn)，當(dāng)默認(rèn)狀態(tài)下內(nèi)邊距為10像素，鼠標(biāo)滑過的時(shí)候由于邊框增大了，所以相應(yīng)的內(nèi)邊距縮小就可以實(shí)現(xiàn)好看的鼠標(biāo)滑過效果了。
3、圖文信息效果：
圖文信息效果增加的功能和文字列表效果增加的功能是一樣的，具體參照文字列表的一些設(shè)置。 具體增加的設(shè)置項(xiàng)有：是否可以單行顯示，每項(xiàng)占總寬度的百分比。 默認(rèn)狀態(tài)下的上下左右邊線、上下左右外邊距、上下左右內(nèi)邊距、鼠標(biāo)滑過狀態(tài)下的上下左右邊線、上下左右外邊距、上下左右內(nèi)邊距等。 列表內(nèi)容選項(xiàng)卡中主要包括： 項(xiàng)目圖片樣式設(shè)置：默認(rèn)邊線、鼠標(biāo)滑過圖片的邊線效果、圖片的內(nèi)邊距、外邊距等。 項(xiàng)目標(biāo)題樣式設(shè)置: 隱藏顯示、標(biāo)題高度行高、標(biāo)題對(duì)齊方式、文字的樣式等、包括鼠標(biāo)滑過的一些效果。 價(jià)格樣式設(shè)置：對(duì)齊方式、文字的樣式等。 簡(jiǎn)介基本設(shè)置：行高、文字的樣式等
4、櫥窗展示效果：
櫥窗展示效果和圖文信息的設(shè)置完全一樣。 這里需要提出的一點(diǎn)就是現(xiàn)在的櫥窗展示可以通過自己的設(shè)置來實(shí)現(xiàn)一行現(xiàn)實(shí)幾個(gè)，和每個(gè)之間的間距等，通過調(diào)節(jié)項(xiàng)寬和邊距可以達(dá)到想要的效果。 5、友情鏈接效果：
友情鏈接效果主要是借鑒了文字列表，和櫥窗展示的效果設(shè)置，這里就不在具體闡述，可以借鑒前兩個(gè)來實(shí)現(xiàn)這樣的效果。 |
