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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
) O6 j2 ]5 u6 D) y您可以根据自己的实际需要修改使用
% `. }7 T: a1 i( ?6 A下面以首页区块调用位置为例
5 H- J) s$ F4 x! ~6 v% Z我们来详细介绍这六种列表样式的结构和class
3 N% ?" G1 {% D. W5 n, _3 t" G8 p首页模板的<div class="listbox"></div>内是区块列表的调用
- c* ~# [$ `+ V0 K3 {<dl class="tbox">
  r8 ?" ]" i( b' J& Q* p2 L! J! \<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>
1 \6 X0 U2 u" o8 |$ c8 f6 `<dd>
<ul class="d1 ico3">
. ^% [2 E- A" i* o' Y& _! x' v{dede:arclist titlelen='60' row='8'}
! p9 u9 m! Z. O- y4 m  b4 b3 I<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
</dd>
! n/ s# ~" O& B6 \4 u3 M</dl>
其中<dd></dd>区域即为列表调用
5 t; `- m: t1 @9 N9 V: R/ n4 [6 ]只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
+ s* ]# U  f: b-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
   {dede:arclist row='8'}
) w9 }; V- t) L  \1 L     <li><a href="[field:arcurl /]">[field:title /]</a></li>
, V4 [" F9 W" @1 g) q   {/dede:arclist}
- t& _" u% q1 i4 b- ^8 {</ul>
9 Z: u! U6 E# i* _4 `/ F9 G- }8 x0 @- |列表调用样式2 - 带日期的长标题列表(d1)
( n6 g  M4 i  _) i6 _% r8 g1 }4 e
可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
   {dede:arclist row='8'}
1 i) R) G/ S6 z( P6 Z     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
# Z2 o7 ]2 d: P' E* g% i1 B   {/dede:arclist}
: ^7 w4 o7 o6 s! }+ T) R* W# p+ u2 c</ul>
" l, F8 V8 t- D0 l6 D; ~列表调用样式3 - 带日期的短标题列表(d2)

可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
   {dede:arclist row='8'}
1 E! ]6 y! t; }- ~     <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+ `6 ]4 P# \  g$ f# V</ul>
- [9 h) s' ~; @: V0 m列表调用样式4 - 图文混排列表1(e5,c1)
" C8 I4 z* ?4 [, h* R
左侧调用图片,右侧调用文字标题列表
<ul class="e5">
, r8 D3 ?2 y* z8 r  s- p     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
1 @( w) R; r1 \# l" L! w6 c: h     {/dede:arclist}
$ }" y( V, r: ?! Q1 v</ul>
<ul class="c1 ico3">
7 a3 }' M9 o8 E   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
( O5 X$ C- t5 M- p</ul>
9 `% l( t' F6 a3 Z& j% M列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
/ Z% g# v1 J  I1 m<ul class="e6">
" ~' X. Z+ l* k% F' w8 I     {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">
$ T4 r! W' l) `. W' s( w7 X0 G* r   {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>
: d5 a: G5 ?" n" ?   {/dede:arclist}
</ul>
$ ~3 @! d* [2 y$ L6 ?7 a7 `0 ]列表调用样式6 - 图文混排列表3(e6,c2)
3 T8 ~* O. m) |! |* g1 d  U: f
上部调用图片,下部调用两列文字列表
" P* N0 P: X3 P9 t# a& U! W<ul class="e6">
% t+ ]% [8 _$ I- i: L; m3 Q0 ]     {dede:arclist row='3'   type='image'}
( V' \; f. e6 k$ J7 g  w) I- K     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
7 \  I; E4 B0 ?. t! f<ul class="c2 ico3">
   {dede:arclist row='6'}
6 Z) @) ]/ o: O6 o" x7 \0 \: G     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
3 s6 q" Q7 |) g0 P这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.