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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
/ X$ I6 B& h, r$ v: A8 d您可以根据自己的实际需要修改使用
) I0 {6 c, Q! k( `$ w1 m0 P  `下面以首页区块调用位置为例
0 G. n/ i# C! T1 v: _; ~( Z1 Y  G我们来详细介绍这六种列表样式的结构和class
1 o, ?' h! D% q- y. K+ |6 ^首页模板的<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">
6 _. J6 ]( x) c( A8 A& W{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>
" o! [, |. ]; _( j{/dede:arclist}
</ul>
9 k, b* ?9 t5 [1 s. |</dd>
% F2 `3 }, R  L8 o; |: E</dl>
; q1 l+ C, i$ @/ k5 U; A1 u其中<dd></dd>区域即为列表调用
2 ?! b) e% r, U0 g* |# h3 S只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
, M& S' l' {5 R/ A' G. Y7 D& q-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

& _! m3 m2 Z7 [0 C纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
9 q, f& ~( R! N  K5 ^<ul class="c1 ico3">
   {dede:arclist row='8'}
8 X: I" T; L, C3 Q. Y8 ?     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
7 m0 n& l! h: Q7 t9 C列表调用样式2 - 带日期的长标题列表(d1)

可以调用23个中文字符的长标题和短日期
1 t* W1 f6 u" ~. Y; j6 q<ul class="d1 ico3">
+ }* ~  T  E1 a0 I  K   {dede:arclist row='8'}
5 N* v# N  t6 O0 Q) R+ K     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
0 A6 ]8 ~' a2 ]( h$ h  a   {/dede:arclist}
. a$ a  }# F8 E% j</ul>
列表调用样式3 - 带日期的短标题列表(d2)

可以调用19个中文字符的长标题和短日期
$ a- o5 a$ }& |* S% U9 k! p. x<ul class="d2 ico3">
+ [4 w9 C" g- N7 r9 u9 ]0 z/ C   {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}
9 E5 z6 J8 h. J5 i; U</ul>
列表调用样式4 - 图文混排列表1(e5,c1)
/ [8 {6 c6 v, {+ H. g$ i
+ F" H5 V1 Z8 U. \左侧调用图片,右侧调用文字标题列表
6 {( Z6 `; w( s7 H+ M- Q<ul class="e5">
" R' D$ {: U8 V; a' z4 B- n$ T     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
/ V' C+ X% O9 V1 d* W( F# W+ N" }     {/dede:arclist}
</ul>
9 W- ^. f9 |4 A* m<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
/ ~8 f# Y3 O' M. ^8 T   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

0 K0 f! R' [8 \7 Y# B上部调用图片,下部调用文字标题加长日期列表
<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}
' Y2 @9 I9 a" A, J2 {</ul>
1 q2 s) y5 I% I2 W/ N<ul class="d2 ico3">
6 r2 ~; |0 X! ]. x/ U   {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}
: I; q$ R% a! C) `( v</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
- h: w( |) N6 Q( E4 b
6 m8 W  @" ?! q* M上部调用图片,下部调用两列文字列表
<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}
</ul>
<ul class="c2 ico3">
1 R: W9 V! C" _   {dede:arclist row='6'}
  @. T; p2 m2 \3 d+ j     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
8 A. q9 F7 E3 _5 ~9 J4 w您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.