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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
  z2 ?5 c& m. ]$ o: c/ x3 f我们来详细介绍这六种列表样式的结构和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">
3 x% q  r8 o) {; S{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>
{/dede:arclist}
</ul>
</dd>
, O7 V# Q3 @9 e  A</dl>
! y6 f  a' O# m7 @0 c$ I其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)
+ s. ]7 R3 H5 @* p6 J
; p5 [& B% \+ o* V  o纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
   {dede:arclist row='8'}
+ S( i5 c* G8 W' `3 l8 ]! {     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)

  L0 `2 S$ a* q# a可以调用23个中文字符的长标题和短日期
- R, l6 N  [! m' r1 t  @<ul class="d1 ico3">
4 G% p( P+ B2 b6 X$ K+ e3 [# H# c   {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>
列表调用样式3 - 带日期的短标题列表(d2)
- i! c' q  x+ w! X6 u# m
) L9 Q8 K0 N+ p0 v& a, L1 G+ E- L可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
   {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>
* e: Z, ?6 H/ g8 j2 z4 B) s, D* g   {/dede:arclist}
</ul>
列表调用样式4 - 图文混排列表1(e5,c1)
& W2 o) q+ B2 z% s7 h) v
- k8 ?& _% |) g: {/ ?4 e/ S2 ]左侧调用图片,右侧调用文字标题列表
<ul class="e5">
     {dede:arclist row='2' type='image'}
8 A  v, V& X& ^1 J     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
8 U) U# ]- w0 r+ P     {/dede:arclist}
5 V2 h( A, e% y+ k; W) I/ `</ul>
. H, G; b4 K7 u& Z* ]( s<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
) }/ b5 f8 `, D% F- |2 }/ ~   {/dede:arclist}
( b: u: x* ^: k4 I$ g- t</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
- q7 h& A9 V5 W4 O5 F8 i5 Y) I6 D: j<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}
  Q0 Q# w& q. F. g" W3 X( Z</ul>
<ul class="d2 ico3">
   {dede:arclist row='3'}
8 }! y( y5 k: w9 Y2 P     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
( F, t2 b4 y% m' r/ i' L9 ^   {/dede:arclist}
9 r$ h( R% A1 ~. i: O* l</ul>
列表调用样式6 - 图文混排列表3(e6,c2)

" N2 Y5 P. g+ p6 l5 x* H6 K% F0 Q上部调用图片,下部调用两列文字列表
<ul class="e6">
' ?8 l2 s# f. ?: D     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
9 c+ m: Z7 Q( K3 q     {/dede:arclist}
3 o, N8 `/ q. a</ul>
, g8 ]/ D. y- a7 ]! u+ o<ul class="c2 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
/ k" A9 w6 H) c+ O! e: T   {/dede:arclist}
</ul>
另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
, p9 h4 X, e3 A6 k1 L另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.