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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
- |" i& J# |8 |, J下面以首页区块调用位置为例
* u( M" h1 M* M& l我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
* {% w* W# {5 K: f<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>
9 C% M, f- V( T+ W2 U" v& M<dd>
<ul class="d1 ico3">
& _  z+ A' R2 `: q9 i. j4 c# b{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>
  }9 a- }4 e8 A; L! t1 W</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
( o& a8 b3 }% e, E-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)
) f% x. H7 k/ h4 ?* ?
, W; r9 f$ D, w6 M纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
5 |* z) Y: l& u5 Z! }/ i5 z! X3 \9 r<ul class="c1 ico3">
/ d+ h, T% G) k; K- U5 D   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
5 p; m% v9 s/ H$ A3 e列表调用样式2 - 带日期的长标题列表(d1)

' h  l! |1 g8 ^1 }$ i可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
2 d. _1 O# p' P8 R8 q- ^3 w   {dede:arclist row='8'}
     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
4 n. {' `8 \3 y- v4 ]   {/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)
  q8 q$ K) F1 j
7 t8 t4 b5 U% |9 e+ o- d9 @可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
! x. R! U8 @: S# {   {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>
2 |* O' [1 Q# _6 V) m! M   {/dede:arclist}
! }8 N0 U/ c( \, F</ul>
列表调用样式4 - 图文混排列表1(e5,c1)

; I6 k+ \2 W* ]. N左侧调用图片,右侧调用文字标题列表
! p' o" y2 m; {" p3 `<ul class="e5">
7 c9 ?" \5 U/ c     {dede:arclist row='2' type='image'}
* d' Z# {9 c: T2 E! p" O' {     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
( ~% y1 E9 i" ^* C2 Y9 R; F7 m4 x     {/dede:arclist}
9 v' t; k9 c0 L% @9 b</ul>
1 A5 d/ m% m5 b% v<ul class="c1 ico3">
+ m' n9 @2 N1 w2 Z* D5 ]) o   {dede:arclist row='6'}
, }- _7 R" N$ i' ~     <li><a href="[field:arcurl /]">[field:title /]</a></li>
3 E- k; h0 l( i) P. g; M2 V   {/dede:arclist}
</ul>
, B* {, }1 A& R列表调用样式5 - 图文混排列表2(e6,d2)

; X% C, H! t, k# w; J& @上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
/ y& _& }- Q: h     {/dede:arclist}
</ul>
<ul class="d2 ico3">
; M- U( L, Z) ?1 j   {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>
& B6 E' B8 @" `  H& h   {/dede:arclist}
</ul>
$ P5 E8 ~6 w2 ~: [. C2 c( T列表调用样式6 - 图文混排列表3(e6,c2)

上部调用图片,下部调用两列文字列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
/ N, u+ L! B9 ?& i# {. z     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="c2 ico3">
, D- B3 B# e9 G% U$ \7 O   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
/ i7 B: @' B. _* Q) k8 y   {/dede:arclist}
- `3 {6 |4 m9 M5 y% H7 X</ul>
另外ico部分有3种ico可选择
5 @5 C( X7 w! f2 k分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
5 J. [6 t& h6 S您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.