DEDECMS V5.3 官方模板 6种列表样式说明

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
0 \0 C: ^6 U; {9 {5 y我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
9 k0 b3 }3 }+ k! S% Z/ u9 K<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}
  o6 K3 J0 J) U# S: `% _+ o! ~</ul>
</dd>
2 E2 ?5 M0 r% F7 c& t3 F</dl>
其中<dd></dd>区域即为列表调用
/ |  R2 @2 ?% t& }+ [只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
  B! ^  E  x6 S# s-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

) Q+ d; Q/ S9 o: |纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
% P) P% F  D' ?, h6 G<ul class="c1 ico3">
   {dede:arclist row='8'}
8 K8 n3 o* j' ]/ [9 K" ~$ E) J     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)
: P  t( X/ w& C5 N1 n7 J# W
, j: D7 z9 i! G3 c: y/ z) _可以调用23个中文字符的长标题和短日期
* X  m2 I! h# r5 e/ T/ ^$ E' u<ul class="d1 ico3">
   {dede:arclist row='8'}
. f' L0 ~9 V+ b  L& C" d! f/ E     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
  O4 r# r) X* N/ v6 x6 [/ i   {/dede:arclist}
! \: e2 s$ O% M4 k; U! h6 {</ul>
1 r. X$ `& ~2 w7 l! _/ s列表调用样式3 - 带日期的短标题列表(d2)

可以调用19个中文字符的长标题和短日期
6 n- g" z9 H/ R: I# @1 V! ~<ul class="d2 ico3">
8 `! [, @. [4 d   {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}
0 g: o' I, S3 f, ?, E5 k7 D</ul>
) b+ I" G. a1 B2 V$ O" S/ X6 S列表调用样式4 - 图文混排列表1(e5,c1)

! e+ t0 H  `8 ?8 _$ t左侧调用图片,右侧调用文字标题列表
<ul class="e5">
     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
# b+ G- M: o3 h1 t, Y1 _     {/dede:arclist}
</ul>
; M, b6 Y" ?, o( o7 U<ul class="c1 ico3">
  D/ N9 U+ K- z7 q" B   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
, _4 C* J/ P5 B; V+ N+ _- H( A# k   {/dede:arclist}
</ul>
; F6 f  p* ^* E) C/ v* `" S列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
/ j. ^5 e+ z' f     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
( l( [# ~# p/ {</ul>
<ul class="d2 ico3">
   {dede:arclist row='3'}
* g6 U! @6 x: n& |# Q# ^! i     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
9 A3 O0 J/ ?5 `   {/dede:arclist}
5 ?6 |+ f  x, D- J5 u9 W! B5 G</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
0 {# P6 @1 U1 r  i: d7 b* b( l
上部调用图片,下部调用两列文字列表
, m+ ?3 h* b+ b<ul class="e6">
: a3 W- i! q7 H0 p# E     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
. e/ i" W4 `  u6 C8 H</ul>
<ul class="c2 ico3">
   {dede:arclist row='6'}
: P- @  G" U$ W0 ]/ ~) ]     <li><a href="[field:arcurl /]">[field:title /]</a></li>
$ Z3 {( C* L2 z' R' K* K   {/dede:arclist}
</ul>
另外ico部分有3种ico可选择
* Z, n& X: c' o6 t7 `分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
8 t" R2 L7 W* C! o: u+ W9 q8 n这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
& b& r0 L% n9 @2 Q8 q  {另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.