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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
) E- C, u5 X- H7 Q您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
( u0 F& I. M. M" O# b5 u<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>
. \/ }4 Z) J8 P6 u<dd>
3 D, u+ q3 h6 w9 a+ t" E! C% n<ul class="d1 ico3">
3 s  F9 x+ ?4 Z4 d8 g- l{dede:arclist titlelen='60' row='8'}
7 c: F1 W$ y& o3 }<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
$ u! u' e# a2 V% n! F$ o{/dede:arclist}
</ul>
</dd>
</dl>
5 W! S  c8 p  M$ N6 w; Y其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
, e1 A/ G7 M; d( w# z-------------------无聊的分隔线--------------------------------------------
) Q! ]+ J& |- ?8 c8 w$ s) X0 g列表调用样式1 - 纯文本列表(c1)
6 ~9 h9 K" ?- p8 c' g* e# b* S
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
1 n( Y9 f" Q% b; ]<ul class="c1 ico3">
5 [! q+ y) y. ]. O0 J2 g5 C   {dede:arclist row='8'}
; F  C. x# k) R, i( w( H5 J0 m     <li><a href="[field:arcurl /]">[field:title /]</a></li>
, v: d. f; S6 k  g   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)
; ]& p0 r: x, C: U( u5 }
7 V* I) \1 D5 D0 Q" e可以调用23个中文字符的长标题和短日期
5 @4 X0 @3 R9 Q" i9 R7 w4 v<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}
$ j. q& U$ o2 X2 w/ W! t$ M" {</ul>
列表调用样式3 - 带日期的短标题列表(d2)
9 ?% ^$ R7 z8 V% ]
0 r8 G7 J+ v: Z) T7 N可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
9 r) i9 ~2 E. I( q8 ]4 M$ y   {dede:arclist row='8'}
, e* Z0 x# z# O9 D  C* @/ y8 g     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
+ g5 G* T. [: }列表调用样式4 - 图文混排列表1(e5,c1)
6 b9 |* ~+ D( P4 [3 H
左侧调用图片,右侧调用文字标题列表
7 J; v+ i4 d( G$ J" K1 [9 N( `<ul class="e5">
     {dede:arclist row='2' type='image'}
/ Z+ R; `. h* S3 n1 L     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
$ P. @1 ]: C7 n' J2 O* X3 s1 [</ul>
/ b* T4 [3 y' o- h<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
9 P% q: U8 _) v! b3 l" S</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
) H- s" ~' F7 R  s6 t" U! x     {dede:arclist row='3'   type='image'}
% E" w  v6 m# s5 {- q     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
) @- I( N& [2 }$ c# }     {/dede:arclist}
</ul>
9 x+ w  d$ ]/ m6 H+ Q6 x<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}
% S: J& [% J" f5 x</ul>
- d4 T3 S2 d; x% Z, H5 |  d列表调用样式6 - 图文混排列表3(e6,c2)
8 T; e8 i; ?; H  A
上部调用图片,下部调用两列文字列表
<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}
0 F9 J9 ?- `) D/ v</ul>
<ul class="c2 ico3">
6 _- X9 O. b' d  J   {dede:arclist row='6'}
/ T" ^8 p3 R) [7 E' G  f) B9 S9 @     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
  h  E: d- O3 b% |% g1 }( A</ul>
另外ico部分有3种ico可选择
2 ]) [- y  f# c分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
- k2 x% y% W: q8 D* o您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
6 i. b8 B7 R8 t  ^9 v这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
; e* P2 Q3 ?; Z% p* a另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.