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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
+ b" o* h2 _/ M. m- _下面以首页区块调用位置为例
/ V+ Z0 D; \# t! t4 g我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
' v. E% m( l4 N2 s' ^<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>
6 b% h+ g$ O1 ~# ?8 [# S& }<dd>
7 E/ T4 ~; w4 U/ z3 z9 ?<ul class="d1 ico3">
) u6 h) U$ k4 _/ ?{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>
) p( u: t4 V; R</dl>
其中<dd></dd>区域即为列表调用
. |. n, t; h" v; j  l只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

! ]( H) {" v' H0 n8 J# l纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
$ R& v! j5 D- M4 P6 J   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
& O( C1 D3 W3 L, B   {/dede:arclist}
  m4 R  w0 e! H, ^8 T1 Y</ul>
* ^) A. w; f6 |3 \列表调用样式2 - 带日期的长标题列表(d1)

可以调用23个中文字符的长标题和短日期
  c, |3 ^3 k' w5 I7 {: A<ul class="d1 ico3">
. \" }2 {% C- U1 L) V$ a6 k# W   {dede:arclist row='8'}
/ C, p6 n" I6 Y3 J9 M8 B* ?     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
+ T- @: U5 S" R   {/dede:arclist}
</ul>
: K* b$ S( b' M7 n- x3 \  y1 l列表调用样式3 - 带日期的短标题列表(d2)

可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
   {dede:arclist row='8'}
  G" C" H/ ^/ S8 s- _: Q. x     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
3 `& h- k4 x/ U, C, j2 V0 t   {/dede:arclist}
1 x8 O: m2 a' z. w! d</ul>
. C  Y: I% A; u列表调用样式4 - 图文混排列表1(e5,c1)

3 O: |: r# V# h6 P' ~# u1 N左侧调用图片,右侧调用文字标题列表
<ul class="e5">
     {dede:arclist row='2' type='image'}
8 [2 q# z! U: f5 n     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
! I5 R9 B& I; G. G0 {</ul>
<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
, g/ o* o4 W( [( n2 q</ul>
/ B& I9 s2 Z5 z: e9 i列表调用样式5 - 图文混排列表2(e6,d2)
: ~" w' R7 d& U& ?' {& o2 d3 `6 {
- K" f/ e1 x# V# v+ B4 Z" n上部调用图片,下部调用文字标题加长日期列表
4 J: b$ c/ M2 \4 z<ul class="e6">
# s* _- `5 W' U$ X     {dede:arclist row='3'   type='image'}
8 L6 |/ E% J% f9 Q9 t     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
- ?% l. t, X2 _, V- D" L! x( `     {/dede:arclist}
</ul>
/ c- ?/ Z: h% f0 d<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>
   {/dede:arclist}
</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
2 T; N& ~2 u- r' T/ ~
上部调用图片,下部调用两列文字列表
% e2 v  {! G. N% e; i<ul class="e6">
     {dede:arclist row='3'   type='image'}
' \# _/ ~" J; ~  b     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
# J  n- j+ s6 @6 b! P     {/dede:arclist}
! A( D7 A& E8 Q# A% S( E6 ?+ m</ul>
<ul class="c2 ico3">
6 ]% ?: ?, z; o) K" K0 m/ I: s   {dede:arclist row='6'}
8 v; s: u+ p9 c! A8 u' X0 X     <li><a href="[field:arcurl /]">[field:title /]</a></li>
8 R3 T1 D! l) I8 f" m' q7 W' b   {/dede:arclist}
</ul>
另外ico部分有3种ico可选择
1 p3 Z# K2 A8 X# U- [/ z# @分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
  S- e) h) R; G) w4 D6 i3 y+ `: K这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.