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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
0 P% S; `. h' N; h& C0 B8 v下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
3 ~& {3 Z, e6 J5 H( Q3 m5 s; A首页模板的<div class="listbox"></div>内是区块列表的调用
  n, \- W: _+ ^) B<dl class="tbox">
0 J+ `( F' j+ e. N  L# q3 V<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>
$ Y1 a8 A/ ^$ Q) u6 g+ _  [. e3 W<dd>
1 U6 A% k# j4 @0 ^# h<ul class="d1 ico3">
1 e% b$ W! M6 x: |0 m{dede:arclist titlelen='60' row='8'}
2 `9 G8 Z5 X" ^) I1 x5 ^( r3 |<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
' N( a* t+ {% }% j+ n{/dede:arclist}
</ul>
6 K6 Y4 x: c1 }7 `. S  G2 T0 Z</dd>
' ~# \/ G. _/ L9 G</dl>
其中<dd></dd>区域即为列表调用
  `/ I; D9 X0 p4 U: g/ n只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
8 D) Z4 q( E% w-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

9 N5 m) T" m: K! Q* I$ l% e纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
/ \  @' i, T: q% S<ul class="c1 ico3">
   {dede:arclist row='8'}
" I' C# A7 G1 D  y1 K     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
$ p# [! A2 M4 d: s</ul>
1 q$ X8 a! R6 {! x, a. {! E列表调用样式2 - 带日期的长标题列表(d1)
/ d6 \  A8 b) C% v. e6 a
可以调用23个中文字符的长标题和短日期
/ I% a- W. [3 U3 p/ @<ul class="d1 ico3">
   {dede:arclist row='8'}
( V7 A( T4 f7 K. v! s     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
1 J/ n) g+ M7 M# U: b! I   {/dede:arclist}
% j' ~; f9 {1 @  z+ m& V</ul>
+ O" }$ x" J0 e$ m1 G4 o列表调用样式3 - 带日期的短标题列表(d2)
4 Q0 ]  f% z6 f* y: K2 a! E
可以调用19个中文字符的长标题和短日期
0 b+ F: m7 O$ V6 s# m; F* ]* \<ul class="d2 ico3">
2 r( g8 @* u* N0 N& v3 E* E6 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}
</ul>
% E3 R" s! Y* G  @7 H' ~- V列表调用样式4 - 图文混排列表1(e5,c1)
2 Z. s& k9 _# M. a$ F4 T/ W
6 w0 D2 A  ]& g6 j左侧调用图片,右侧调用文字标题列表
<ul class="e5">
* f, e# \9 O0 I) X& E! Y     {dede:arclist row='2' type='image'}
     <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'}
, r3 V% [3 x5 H2 D) ]3 e. n1 M     <li><a href="[field:arcurl /]">[field:title /]</a></li>
. q1 i$ P) V8 R! B- J, |6 l9 c   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
, w4 `& ?; v1 g% Q, O' t
, j3 p. b4 z9 b' M4 b& D& P' e上部调用图片,下部调用文字标题加长日期列表
5 f) ]. d. x, R8 Z) {8 J; f<ul class="e6">
4 S$ i9 i. f+ Q! m     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
$ {5 B- O1 o) b* d; K- i/ U0 i2 H<ul class="d2 ico3">
* n# z8 B1 \; }5 k% [' I, c   {dede:arclist row='3'}
$ B! f1 G7 _+ j2 @. ~/ `* v" a     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
5 m' f, L6 C& K, G   {/dede:arclist}
</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
: b/ M* P" @+ Q& n8 e- O
3 Z+ }+ }+ L! x7 `6 c上部调用图片,下部调用两列文字列表
<ul class="e6">
/ \6 O6 d2 B8 ~0 ~  Q9 h4 p     {dede:arclist row='3'   type='image'}
' [4 Q9 c- H$ Q/ v! Y4 m0 v     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
  e9 x( v8 V8 N     {/dede:arclist}
9 i. i# ?" ^1 ~' B</ul>
<ul class="c2 ico3">
2 ?5 [1 }5 K$ X1 X6 ~! G   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
( B0 K6 b" b/ p</ul>
! m5 \/ j! q% W  e; Z, J9 i% p另外ico部分有3种ico可选择
, Q  ]9 M% [# Q" t/ l1 }! \分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.