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


下面以首頁(yè)區(qū)塊調(diào)用位置為例
我們來詳細(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)用樣式

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


列表調(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樣式.

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

查看更多 DedeCms教程  織夢(mèng)模板  織夢(mèng)DedeCms視頻教程  織夢(mèng)dedecms專題