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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
( T: Y6 N8 G" l: X& [: D您可以根据自己的实际需要修改使用
7 N/ w6 O3 S5 ^" s. |4 b$ m$ P下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
& C6 Z; g% J0 G. i5 z) i* |首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
7 ~, q" A9 d, i. d; B<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>
  N1 ~+ i) n/ `! S1 A<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>
  l6 F0 ^( P" B) U{/dede:arclist}
</ul>
+ {) x" E) B. g: X9 l9 u</dd>
</dl>
4 {6 s1 h) @& i1 E/ i其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
3 i4 H/ r. I1 z) c6 e; q7 V2 }-------------------无聊的分隔线--------------------------------------------
! u2 Z# u# x. U列表调用样式1 - 纯文本列表(c1)
7 \' f( Z7 y8 S+ e( w
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
   {dede:arclist row='8'}
/ h  v" I$ j' w4 h! I$ q     <li><a href="[field:arcurl /]">[field:title /]</a></li>
) ]5 C  L& ^+ }) ]   {/dede:arclist}
</ul>
5 [: Y, w3 h( O列表调用样式2 - 带日期的长标题列表(d1)

可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
   {dede:arclist row='8'}
     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
' l& v& H' ]: p! a3 ^) U, K   {/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)
' H- S0 m" N' w/ H3 M6 C+ _
: @9 O1 m1 H: f. m  P9 K% h: P可以调用19个中文字符的长标题和短日期
+ x; Q( p0 M; L8 s+ x5 t9 P/ D<ul class="d2 ico3">
7 l. A( [# G* ?   {dede:arclist row='8'}
' T4 R. S. h+ X; G; ?8 Q& Y     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
' W  W  d8 g5 f3 f& p- w   {/dede:arclist}
</ul>
6 Z* w* v( V& Z3 I. }列表调用样式4 - 图文混排列表1(e5,c1)
9 F" J" S3 [6 C9 `. ]* L8 a
左侧调用图片,右侧调用文字标题列表
9 |7 U5 R' u1 O) c$ t<ul class="e5">
( A* X) n4 M0 {3 @* ?8 ~     {dede:arclist row='2' type='image'}
% Z# M8 T1 L  n: R9 J8 r     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
! D8 H0 y# \' ]; X7 R" d     {/dede:arclist}
! S! e& T2 s* A# n</ul>
& e- X; [0 C. w' V2 O7 [<ul class="c1 ico3">
   {dede:arclist row='6'}
! z7 o3 |% ~' s6 J$ ?     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
: ], ^# _7 B* M$ S+ t9 k/ W# G  R列表调用样式5 - 图文混排列表2(e6,d2)
' V( t7 m* D& f6 i# {
上部调用图片,下部调用文字标题加长日期列表
% a+ z; p  i! ?/ c  m/ b  I<ul class="e6">
     {dede:arclist row='3'   type='image'}
% n0 d6 R' D* R6 m     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
0 K" V- [0 q! {2 ?     {/dede:arclist}
  r3 O7 w/ @; t( R6 K</ul>
9 \$ R% P. k; D" A: N* @7 w<ul class="d2 ico3">
   {dede:arclist row='3'}
) z7 W3 I* u, G: E; I     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
# }3 y6 w+ m# ~( T9 O2 g6 f   {/dede:arclist}
# m, ]9 l  t' P. l7 c! z9 a) Q</ul>
" A( X4 }2 H2 s列表调用样式6 - 图文混排列表3(e6,c2)
1 d9 V" o2 p1 R5 R; C( h" b# @
上部调用图片,下部调用两列文字列表
" I, ^; v, N/ v% A. Q<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>
, |1 f" F/ H4 D  n' e' J<ul class="c2 ico3">
% h# X5 m8 D3 A   {dede:arclist row='6'}
: g) A" F* `) p. X; F  c     <li><a href="[field:arcurl /]">[field:title /]</a></li>
4 _# y$ x, a2 W! ^   {/dede:arclist}
</ul>
# D4 E: K. W* u9 C% E5 \0 {1 o另外ico部分有3种ico可选择
/ F0 P- g: M4 i4 R& X1 l& l分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.