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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
8 ^2 X6 f- ?/ J) L首页模板的<div class="listbox"></div>内是区块列表的调用
<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>
6 i/ e4 f$ i+ n$ J' ~+ D4 Z6 B  }<ul class="d1 ico3">
: J4 u  h( {1 w+ r" J1 m2 |& x{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>
0 F1 p' t9 @* Y</dd>
- x/ r5 W+ O/ f$ G</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

! Z% d) C8 y6 }4 A( ^# j' V6 }纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
; ^: i" N( e" Q; m# R<ul class="c1 ico3">
5 d1 r, ^% k# U$ G2 i  S5 \/ W   {dede:arclist row='8'}
) c) ^* ?0 V! _4 v6 t# h7 }- r     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)

: T0 o3 r1 e* p5 ~% b可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
; ?) k. P8 f' ?% T) N- ~, v3 o   {dede:arclist row='8'}
     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
# ~* X5 q; V7 _$ f   {/dede:arclist}
/ V* d' ^; b0 C5 k# a</ul>
列表调用样式3 - 带日期的短标题列表(d2)

9 ~( _- M0 E- N! E" A4 R; [可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
   {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>
3 ^, R# U3 X9 `  P' @8 k( s: u$ N1 e, Y列表调用样式4 - 图文混排列表1(e5,c1)
. A; _% a2 k( H6 `$ E
左侧调用图片,右侧调用文字标题列表
<ul class="e5">
" U! S+ |8 X% Z" A- W- M9 a6 E, P     {dede:arclist row='2' type='image'}
4 i( M3 l9 ?7 n6 ^2 F     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
6 a2 I; \& W/ D2 J% m$ v4 {4 t<ul class="c1 ico3">
   {dede:arclist row='6'}
, K; ~  x6 d3 c7 F+ o6 l0 B0 H     <li><a href="[field:arcurl /]">[field:title /]</a></li>
; H7 v. D: I$ `4 t+ f7 o1 i   {/dede:arclist}
$ [: j0 |8 O$ B</ul>
# f( B# ?0 F+ }3 I+ q, h列表调用样式5 - 图文混排列表2(e6,d2)
; G1 [( [% k% b& a
上部调用图片,下部调用文字标题加长日期列表
/ y9 h& r5 z2 g5 |/ [3 C% @<ul class="e6">
     {dede:arclist row='3'   type='image'}
- J& o+ _. J" d     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="d2 ico3">
: J) v6 D. s1 }' z$ @' O/ V' h   {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)
- E1 F2 M* R% I6 S' y
% l1 X* I7 ?1 ^) I9 L上部调用图片,下部调用两列文字列表
1 X* K# Y. W* d$ h( r* d' Y8 i0 z<ul class="e6">
     {dede:arclist row='3'   type='image'}
8 \# G9 P, h9 L! M     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
% i" U% g# m; V7 S* E<ul class="c2 ico3">
4 }2 f9 f0 k2 u) {3 |   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
2 F2 A+ d. T! ?* I  V* ?& ^另外ico部分有3种ico可选择
4 S" L& Y% Q/ L: |) o: _分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
7 B9 \+ x" l5 k+ Y; G& V这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
' `- U8 k+ W; x0 Q/ l) B. ]$ I另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.