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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
+ ]: V* n* k" Z5 J; f% G您可以根据自己的实际需要修改使用
  T& g; L7 `% _& j. L' B9 m0 \5 i下面以首页区块调用位置为例
% Z3 I& `% p' f& M! }我们来详细介绍这六种列表样式的结构和class
' z! a- p! K+ u; _首页模板的<div class="listbox"></div>内是区块列表的调用
9 X+ z4 D- |/ Y3 v<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">
{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>
0 P/ _# n. n4 ]{/dede:arclist}
</ul>
</dd>
" I" m8 ]' ~1 {% h3 f0 M</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
5 I. n- ]) k- l4 c% M! ]( L-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)
- z( y6 Q6 Y0 I
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
6 v1 P3 |4 s: a  W0 l3 s3 `- T, L- e- O<ul class="c1 ico3">
6 N  E8 t/ M6 |5 X   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
4 A2 f0 u  q9 i' I列表调用样式2 - 带日期的长标题列表(d1)
* V) Y+ L" i& H1 a2 [4 q
8 |( a" \! z& d. K. m可以调用23个中文字符的长标题和短日期
# q) \& E- q; f0 X<ul class="d1 ico3">
/ |, C7 Q0 e; `# f4 B5 p   {dede:arclist row='8'}
     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
& }$ u3 }  W. D) J5 Y" `$ u   {/dede:arclist}
</ul>
9 r* X) [5 Q: `# H7 P$ K4 ?7 T列表调用样式3 - 带日期的短标题列表(d2)

可以调用19个中文字符的长标题和短日期
" N9 y! m! N3 P0 c  E<ul class="d2 ico3">
. B4 Z0 e9 `. E0 n; \2 {   {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>
; F: x* |& V$ D   {/dede:arclist}
( L5 X5 H9 l* U/ _</ul>
! D+ ]2 ~& H! v/ J+ Z% D列表调用样式4 - 图文混排列表1(e5,c1)

左侧调用图片,右侧调用文字标题列表
<ul class="e5">
! c! K" I& u' T; Z, S3 G) M+ h* i     {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'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
3 D& C% h3 Z0 O9 u   {/dede:arclist}
' t( t6 l" s2 g( Q</ul>
' q) d3 b* \) _5 Y/ N1 P$ q1 Q2 {列表调用样式5 - 图文混排列表2(e6,d2)

7 R" A, f  p! ?上部调用图片,下部调用文字标题加长日期列表
9 g& L- z; X8 w* _3 E' Y<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>
<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>
- m' ]! A' y! g1 F   {/dede:arclist}
$ ^! G0 Q5 e7 E* T/ W+ |: I</ul>
0 E$ c3 \) w/ c3 T% J. x  d列表调用样式6 - 图文混排列表3(e6,c2)
  r9 C/ H: _+ J& Q
上部调用图片,下部调用两列文字列表
) c, ^% k4 g1 Z: R& L# K6 u<ul class="e6">
. h6 ]+ O$ Q) M( f7 I2 C  y     {dede:arclist row='3'   type='image'}
% |; f- |) x* Q9 X) K( X     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
* O; S+ K: [6 R) I</ul>
" c5 _9 ^7 U. C- Y2 J<ul class="c2 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
4 K/ |% [9 W  ?6 V# ~8 ?' {</ul>
另外ico部分有3种ico可选择
' e1 f% E; N% x& J# \$ y分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
/ I2 C+ m1 f2 R* z: @+ S您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
. u% Q! l; _3 K另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.