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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
# u+ L3 b! Z' b$ b  L7 P$ ?! V, M- O首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
0 Y0 T1 _7 h: E<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">
- j; v7 `  Y+ h# ?" l" H{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}
% D, Z: E. H) O" E1 J1 u7 F</ul>
6 z; s5 A- h0 L/ C9 p' }0 P</dd>
</dl>
4 u" Y3 \) E' H4 I) ]# [$ q其中<dd></dd>区域即为列表调用
* D6 @! o) s$ Y只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

  {% S* |$ I5 k6 T+ t: K  Y, a1 `/ f2 K纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
  f% V  g) z) D6 q& o3 i# J<ul class="c1 ico3">
+ c* f# H, X& h9 w5 ?6 M   {dede:arclist row='8'}
7 E& i2 |$ j. j) z     <li><a href="[field:arcurl /]">[field:title /]</a></li>
2 |9 }8 Y  x* R' d   {/dede:arclist}
, k" d+ ]: A1 [' g</ul>
! A0 n% H# @; ^. j' a; ?& [% D. p7 t列表调用样式2 - 带日期的长标题列表(d1)
4 B. L7 q% m6 T. ~# Q: p
可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
9 Y" P8 \4 Q' b; F  J. j   {dede:arclist row='8'}
% a2 Y* m, e, I% f+ Y     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
0 `7 D" R5 w7 b8 F% X</ul>
$ d  p/ a5 j$ U3 `& h7 [列表调用样式3 - 带日期的短标题列表(d2)
' u# h' I3 F! ?
可以调用19个中文字符的长标题和短日期
3 X% Z0 V& G7 g2 n! F6 e+ i! N<ul class="d2 ico3">
2 o, j' h- {0 r4 p: R) G* {   {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>
- Y6 g  [# t) Y" a4 `   {/dede:arclist}
- H; y- x5 D5 Z* M" x' J8 c</ul>
! I, k) H  R! b列表调用样式4 - 图文混排列表1(e5,c1)
* F% G3 {- S6 x: K. a
左侧调用图片,右侧调用文字标题列表
4 v. a- J2 x0 H: ~<ul class="e5">
     {dede:arclist row='2' type='image'}
3 @/ D. O% E' m* ~& Z     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
% c) O; ~, \6 O  L" |/ ~   {/dede:arclist}
& G0 c* `! p: s9 r. i</ul>
5 E8 b! R) n) |( V+ s5 [列表调用样式5 - 图文混排列表2(e6,d2)
. b7 ]6 i9 |* u/ l; f
上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
, _- `; L1 m! n+ z' @& O: ?     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
7 w) r, \8 @- L, R/ R. B     {/dede:arclist}
/ a% J0 _; S3 P- t</ul>
0 G" ]' f' D- }7 k/ w<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>
9 Y8 [+ V3 d6 F; O- i   {/dede:arclist}
+ |8 K6 g8 K$ S  @</ul>
+ j3 U6 X; k' q- @: o; c列表调用样式6 - 图文混排列表3(e6,c2)

上部调用图片,下部调用两列文字列表
<ul class="e6">
. u5 Z. _1 O9 ?8 c     {dede:arclist row='3'   type='image'}
6 U1 O% V$ k1 h" ~7 U     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
9 K2 t9 I) O; k, q! L7 E     {/dede:arclist}
</ul>
<ul class="c2 ico3">
- H7 s  ~- g; z  H. \   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
1 S" U9 q8 c# x6 f</ul>
另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
/ h+ w7 B$ R2 N# n3 e这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
9 w' K4 }+ A+ x  e5 x/ [另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.