DEDECMS V5.3 官方默認(rèn)模板預(yù)設(shè)列表樣式說(shuō)明_DedeCms教程

2024-08-30 19:09:52

字體：大中小

供稿：網(wǎng)友

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

下面以首頁(yè)區(qū)塊調(diào)用位置為例
我們來(lái)詳細(xì)介紹這六種列表樣式的結(jié)構(gòu)和class

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

其中<dd></dd>區(qū)域即為列表調(diào)用
只需修改<ul>的class和內(nèi)部<li>的結(jié)構(gòu)即可更換列表調(diào)用樣式

-------------------無(wú)聊的分隔線--------------------------------------------

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

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

列表調(diào)用樣式2 - 帶日期的長(zhǎng)標(biāo)題列表(d1)

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

列表調(diào)用樣式3 - 帶日期的短標(biāo)題列表(d2)

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

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

左側(cè)調(diào)用圖片,右側(cè)調(diào)用文字標(biāo)題列表
<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>

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

上部調(diào)用圖片,下部調(diào)用文字標(biāo)題加長(zhǎng)日期列表
<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><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
  {/dede:arclist}
</ul>

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

上部調(diào)用圖片,下部調(diào)用兩列文字列表
<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:實(shí)心方塊,ico2:實(shí)心箭頭,ico3:描邊箭頭.
您也可以根據(jù)自己需要替換images目錄下的ico文件或更改layout.css增加新的ico樣式.

這些類(lèi)型的列表樣式可以應(yīng)用在模板的首頁(yè)區(qū)塊列表調(diào)用,右側(cè)列表調(diào)用及頻道頁(yè)區(qū)塊列表調(diào)用.
另外layout.css中還包含了部分特殊類(lèi)型的列表調(diào)用樣式,有興趣的朋友可以自行研究.

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

下一篇：DedeCmsV5.1函數(shù)及文件參考手冊(cè)_DedeCms教程