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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
' q, _* ]8 T; X4 N; g下面以首页区块调用位置为例
. o$ O3 V% X, {: O% y3 Y, s我们来详细介绍这六种列表样式的结构和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>
! Y8 k. a! N* f" w$ n' o0 U<ul class="d1 ico3">
{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>
+ f! [. u, i7 Y! T( v. G* S% [" C{/dede:arclist}
% @% j2 g7 e+ G</ul>
</dd>
- |. v' o8 v/ T- A$ i- Q8 _</dl>
" ?% {& i5 I  s7 \+ D$ p其中<dd></dd>区域即为列表调用
4 o, x' {1 q1 ?4 J只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
/ \3 t: |) z* Y. }2 d! a-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

3 H/ o: ?1 T2 r" W* d" [% y4 U2 d纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
   {dede:arclist row='8'}
- P/ U6 j6 m7 p& s+ D( q4 s     <li><a href="[field:arcurl /]">[field:title /]</a></li>
- t+ m. ]4 C; O, E1 V   {/dede:arclist}
# n( M; g  s$ N  ^& s* ]3 ]</ul>
8 L2 L5 G$ I$ C' L  N2 D列表调用样式2 - 带日期的长标题列表(d1)
, }4 s! v6 M$ B. @3 d
可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
0 G1 {  X" L9 ]0 p2 Z- n   {dede:arclist row='8'}
4 L& P7 n) h- e* Y     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
# K3 }' f! ]0 b  ]! y! I" }, J   {/dede:arclist}
</ul>
& l3 a' s; i- n6 h9 g4 n列表调用样式3 - 带日期的短标题列表(d2)

. @0 |4 g% b; N# n2 w6 O5 c可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
   {dede:arclist row='8'}
# }! {* N* Y2 i     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
: L+ t. X6 k$ A: i列表调用样式4 - 图文混排列表1(e5,c1)
7 H: m" j. h, h) {8 B
; L# \6 Q7 J- [: a9 i左侧调用图片,右侧调用文字标题列表
. r9 C$ W: X& Q9 J% T; U% `# @<ul class="e5">
+ z" K2 X, q" a! D) }6 E     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
# f" X7 {; I- \2 _0 L7 C9 [3 f; d     {/dede:arclist}
0 s  T0 A5 g, {9 Y& `% O</ul>
<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
* _$ U) `' X* V. o0 @2 c8 G( S) ^</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
' Q4 Q; h0 ~3 o<ul class="e6">
     {dede:arclist row='3'   type='image'}
4 v! q" _* O6 k" u+ h     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="d2 ico3">
0 K! v; j- V) g   {dede:arclist row='3'}
- ]8 S/ H/ `- _- |9 ?     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
9 U0 Q2 S9 }$ X列表调用样式6 - 图文混排列表3(e6,c2)
' x5 f) a3 V% Z  V- K
! x( Y# g. Z% ^( G. V上部调用图片,下部调用两列文字列表
7 A! J/ q- q8 x' ^5 v<ul class="e6">
     {dede:arclist row='3'   type='image'}
  I/ F; W6 J6 |0 r0 h& Z     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
0 s0 y5 q' f% B' A3 m* c2 }1 f5 z     {/dede:arclist}
</ul>
<ul class="c2 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
$ F# l: G3 `1 m6 W5 L3 ~7 n4 G   {/dede:arclist}
- ?8 z3 |/ @! q3 u9 @</ul>
另外ico部分有3种ico可选择
8 f* a3 i! {& u4 s2 D" J分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
5 a3 c; ]1 s1 ^  M另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.