DEDECMS V5.3 官方默認模板預設列表樣式說明_DedeCms教程

2024-08-30 19:09:52

字體：大中小

來源：轉載

供稿：網友

DEDECMS V5.3在(layout.css)中預設了6種區塊列表樣式
您可以根據自己的實際需要修改使用

下面以首頁區塊調用位置為例
我們來詳細介紹這六種列表樣式的結構和class

首頁模板的<div class="listbox"></div>內是區塊列表的調用
<dl class="tbox">
<dt><a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a><a href="{dede:field name='typeurl'/}">更多...</a></dt>
<dd>
<ul class="d1 ico3">
{dede:arclist titlelen='60' row='8'}
<li>[field:pubdate function="MyDate('m-d',@me)"/]<a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
</dd>
</dl>

其中<dd></dd>區域即為列表調用
只需修改<ul>的class和內部<li>的結構即可更換列表調用樣式

-------------------無聊的分隔線--------------------------------------------

列表調用樣式1 - 純文本列表(c1)

純文本列表只調用標題,適合標題比較長的列表形式,長度約為26個中文字符.
<ul class="c1 ico3">
 {dede:arclist row='8'}
 <li><a href="[field:arcurl /]">[field:title /]</a></li>
 {/dede:arclist}
</ul>

列表調用樣式2 - 帶日期的長標題列表(d1)

可以調用23個中文字符的長標題和短日期
<ul class="d1 ico3">
 {dede:arclist row='8'}
 <li>[field:pubdate function="MyDate('m-d',@me)"/]<a href="[field:arcurl /]">[field:title /]</a></li>
 {/dede:arclist}
</ul>

列表調用樣式3 - 帶日期的短標題列表(d2)

可以調用19個中文字符的長標題和短日期
<ul class="d2 ico3">
 {dede:arclist row='8'}
 <li>[field:pubdate function="MyDate('Y-m-d',@me)"/]<a href="[field:arcurl /]">[field:title /]</a></li>
 {/dede:arclist}
</ul>

列表調用樣式4 - 圖文混排列表1(e5,c1)

左側調用圖片,右側調用文字標題列表
<ul class="e5">
 {dede:arclist row='2' type='image'}
 <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
 {/dede:arclist}
</ul>
<ul class="c1 ico3">
 {dede:arclist row='6'}
 <li><a href="[field:arcurl /]">[field:title /]</a></li>
 {/dede:arclist}
</ul>

列表調用樣式5 - 圖文混排列表2(e6,d2)

上部調用圖片,下部調用文字標題加長日期列表
<ul class="e6">
 {dede:arclist row='3' type='image'}
 <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
 {/dede:arclist}
</ul>
<ul class="d2 ico3">
 {dede:arclist row='3'}
 <li>[field:pubdate function="MyDate('Y-m-d',@me)"/]<a href="[field:arcurl /]">[field:title /]</a></li>
 {/dede:arclist}
</ul>

列表調用樣式6 - 圖文混排列表3(e6,c2)

上部調用圖片,下部調用兩列文字列表
<ul class="e6">
 {dede:arclist row='3' type='image'}
 <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
 {/dede:arclist}
</ul>
<ul class="c2 ico3">
 {dede:arclist row='6'}
 <li><a href="[field:arcurl /]">[field:title /]</a></li>
 {/dede:arclist}
</ul>

另外ico部分有3種ico可選擇
分別是:ico1:實心方塊,ico2:實心箭頭,ico3:描邊箭頭.
您也可以根據自己需要替換images目錄下的ico文件或更改layout.css增加新的ico樣式.

這些類型的列表樣式可以應用在模板的首頁區塊列表調用,右側列表調用及頻道頁區塊列表調用.
另外layout.css中還包含了部分特殊類型的列表調用樣式,有興趣的朋友可以自行研究.

上一篇：DEDE5.3隆重盛大發布,無憂鼎力支持!_DedeCms教程

下一篇：DedeCmsV5.1函數及文件參考手冊_DedeCms教程