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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
$ i6 }; L' y  F您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
- d2 u2 y+ Y3 e$ f8 C首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
  G6 G7 w" v, }# O) T6 W% v8 N<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'}
; o/ X4 L) y; M; M, G<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
4 Z$ I) _( F7 |& ?</ul>
- h: C4 S8 r- U/ `. E4 ^$ t</dd>
( l+ _) ]6 w  @9 ^9 s. X$ ]' n</dl>
其中<dd></dd>区域即为列表调用
: Y6 M6 A! d5 Z4 k只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
- C0 v9 m8 X  D, G' H-------------------无聊的分隔线--------------------------------------------
8 a- h9 a, K4 [" E- i列表调用样式1 - 纯文本列表(c1)
3 D& ?8 t/ Q4 k- v
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
: k7 h# D' t5 M; G. R<ul class="c1 ico3">
   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
8 Q) B' ^8 G7 [9 ]0 g4 m4 W   {/dede:arclist}
$ m  v' p4 C4 _3 |$ }& y, t- M% I</ul>
列表调用样式2 - 带日期的长标题列表(d1)
$ }1 F6 D1 Q: z
0 s( B, v8 _! M0 G0 O' \  G# U可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
   {dede:arclist row='8'}
9 @" ?" T6 e& J7 r" y     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
" |$ x* q, G2 O4 q9 x   {/dede:arclist}
</ul>
* F5 S8 I3 a  N4 T6 ^7 G3 c列表调用样式3 - 带日期的短标题列表(d2)

2 E% P' S7 U' R/ U/ K可以调用19个中文字符的长标题和短日期
0 I& F: i7 M* X: Z<ul class="d2 ico3">
   {dede:arclist row='8'}
* z7 T2 d. w9 z) F     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
1 `- A5 N) T& s5 s6 S</ul>
列表调用样式4 - 图文混排列表1(e5,c1)

+ i! F' _- t3 e- ~# T左侧调用图片,右侧调用文字标题列表
: Q8 n9 K3 k9 \8 M5 R<ul class="e5">
     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
& n, ^* N- ^2 y) N" h1 g     {/dede:arclist}
</ul>
$ [: H) M5 C* H3 i<ul class="c1 ico3">
   {dede:arclist row='6'}
1 s1 O5 U4 h: Y4 f5 R     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
$ ]$ v/ S; M: L9 r! p( F- c</ul>
3 J+ a$ Z' u0 S! P6 K列表调用样式5 - 图文混排列表2(e6,d2)
' H7 F3 Z/ Y2 N7 ?$ A% S$ F
5 F9 w' R5 S1 Q上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
4 B, r) |! h. d     {dede:arclist row='3'   type='image'}
9 i. S/ {: O8 r2 G     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
  G. \. d6 {# `<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}
$ A& `  @2 i; V) v+ L6 W</ul>
& T  O- m5 U; P9 U2 V列表调用样式6 - 图文混排列表3(e6,c2)

. H6 V' f+ R- s7 `" P: j7 c上部调用图片,下部调用两列文字列表
: Q6 C) H, w# b. J# x) e. T9 h<ul class="e6">
7 e" }% D+ j8 _- F- f& j5 J     {dede:arclist row='3'   type='image'}
  q8 @4 Y9 o3 H( F) y0 n6 Q5 |/ t     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
8 f. h" G; a- G! f5 T: O' z1 e9 T     {/dede:arclist}
3 v& ~6 H6 V1 x( ~</ul>
<ul class="c2 ico3">
8 @; _3 K; C. ]) S% G! f   {dede:arclist row='6'}
  d& j4 D4 @' Y9 i& H1 U) F# ?     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
. }! F. j! g9 O另外ico部分有3种ico可选择
8 D( J, d  ?3 S4 ]分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.