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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
) M5 p( b5 |& W9 n+ [您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
( [  Q/ E( K  Q. s# M: z/ w# J: P我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
<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'}
' g2 D1 g; a0 d3 U% N7 b<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
! Z7 x6 ]$ d, z+ a' U; Y$ ]5 F</dd>
</dl>
其中<dd></dd>区域即为列表调用
7 E& K" J& Q6 H: S4 N只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
* ]1 _. N- J$ h4 b% `+ o7 D列表调用样式1 - 纯文本列表(c1)
( g' M1 t5 m. f& P5 G6 D' O
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
8 q' r/ U/ |' u3 j% E<ul class="c1 ico3">
   {dede:arclist row='8'}
, p( ~: W2 V+ j7 I7 L, L9 [     <li><a href="[field:arcurl /]">[field:title /]</a></li>
: ~6 Y4 h0 E& W& t   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)

可以调用23个中文字符的长标题和短日期
" ~9 `, A- ^5 y5 @& Y- P<ul class="d1 ico3">
1 V9 B8 b# {8 \! v3 u   {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>
& x: q$ H  F9 A: W( M列表调用样式3 - 带日期的短标题列表(d2)
$ U6 n- [+ F  P: o, |
可以调用19个中文字符的长标题和短日期
8 o1 J4 c/ G2 M2 ^6 y3 @# `, n<ul class="d2 ico3">
: z& x5 g( X: M& H$ `+ n3 }' \, z   {dede:arclist row='8'}
  N0 G9 F8 }1 P9 r( N# l     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
+ [* ?( W- r+ J9 J0 A. b   {/dede:arclist}
* b2 @! h, y& L8 v+ j. S5 T3 E9 t6 ?2 V</ul>
列表调用样式4 - 图文混排列表1(e5,c1)

6 s2 z: T8 w, \  P5 H左侧调用图片,右侧调用文字标题列表
<ul class="e5">
$ X2 X; p4 j  @( t# i( G     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
5 X& k/ S; _7 {* G! L: I! N</ul>
<ul class="c1 ico3">
: G3 R; A& H( E* P0 w, {7 R% }   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
4 v4 r' J- J) @0 e) Z</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
% @. g9 M7 [) e) T, n
上部调用图片,下部调用文字标题加长日期列表
% r: a; f" J. z% C9 i<ul class="e6">
# H, q* V! D' w9 b& H. L' W& E$ R     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
& f4 L) V, Q7 Z1 }* ^9 d* X     {/dede:arclist}
, a: E7 \% X0 h; N3 \</ul>
<ul class="d2 ico3">
+ C! V% v2 O. ]. P& v9 `   {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>
2 h. h  m( s1 V# H- ]列表调用样式6 - 图文混排列表3(e6,c2)

/ b9 f. b4 ]  Z/ I* o+ W" }$ n上部调用图片,下部调用两列文字列表
$ h3 W. f2 _/ g: B<ul class="e6">
* N5 Z- s; q/ _, w% D     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
, b: A# q& Y' F9 ]. A     {/dede:arclist}
</ul>
* \/ k, I1 q5 r. |* W<ul class="c2 ico3">
$ k! Y7 [$ w: ?* e  S9 Z" x$ x   {dede:arclist row='6'}
! U1 g' {$ E7 }. |4 A! m     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
- T$ I4 _; u% [% Y3 J</ul>
, [8 j9 L7 K3 S! \另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
# D5 \/ t$ ]8 \) }2 [% ]您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
4 I6 ~4 j! |+ @: l; O* G4 T这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.