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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
1 J  M) K6 H) I) x. c6 H( I8 A% N首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
) c/ q5 l, n! ?* e<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>
& i9 Q4 {: \1 E+ F" y<dd>
<ul class="d1 ico3">
6 v* a" i5 i& i! l7 B  P9 [) ]{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>
/ w# _1 R$ E1 A# y0 \# z{/dede:arclist}
</ul>
</dd>
</dl>
其中<dd></dd>区域即为列表调用
) |- F/ A) M5 u/ y$ _' J只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
6 B  Z- J  n- G) a3 l4 c2 E9 I+ J-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
! I+ P9 i$ I+ y" l6 y   {dede:arclist row='8'}
' q/ c9 C- K: a# L     <li><a href="[field:arcurl /]">[field:title /]</a></li>
' K9 O2 ?, E. l  H   {/dede:arclist}
</ul>
  X( m* B' n/ ~7 p+ P列表调用样式2 - 带日期的长标题列表(d1)
  L7 w* r- T  [; E9 i! e
9 w& K* H  p( J  [1 j( Y5 |5 ^可以调用23个中文字符的长标题和短日期
' _5 h7 O$ ^% P! P' v# [7 l/ \<ul class="d1 ico3">
1 v$ k1 W$ @2 _& h% t  P) V* C; J   {dede:arclist 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>
列表调用样式3 - 带日期的短标题列表(d2)

% R$ B* L2 W* T+ n& O% V可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
8 N. T) p7 Q2 E6 d* y   {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>
: @) |2 `( |1 K列表调用样式4 - 图文混排列表1(e5,c1)

9 P7 p- u8 J' C左侧调用图片,右侧调用文字标题列表
<ul class="e5">
' {$ p" j2 _- t" G( s- \# I5 N     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
8 E7 ]' N- q  ]7 W, O     {/dede:arclist}
</ul>
<ul class="c1 ico3">
/ j: J+ q: @. ?" x4 L% S- u   {dede:arclist row='6'}
. F  S) M8 P$ A( n, r9 f+ ?* C, g; n     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
' f2 G+ U* ^# F: d/ ~. h3 @</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
8 H; Q. N9 y; p5 ?8 W2 R* q
8 _% N$ S6 W, z# K上部调用图片,下部调用文字标题加长日期列表
# I' |7 ^+ I! x3 H/ @, a5 r) X! Y<ul class="e6">
/ z& m& v# d' N+ i0 A9 w0 X     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
0 p0 S- J1 @/ K</ul>
" |2 V8 N. b- U1 v: W<ul class="d2 ico3">
; x  c& e# K/ ^* A( A+ f* {   {dede:arclist row='3'}
# x" j! U3 r* O, b/ b5 M     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
: f: i4 j! j6 n2 ~列表调用样式6 - 图文混排列表3(e6,c2)

3 M6 Y: }) l+ K7 e4 g; h上部调用图片,下部调用两列文字列表
. d$ j5 M6 i3 b# o# Y9 p<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}
  R- D# x9 B1 @7 A, F5 p  J) H</ul>
<ul class="c2 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
, t7 x/ \* d8 n7 }7 x7 I- M   {/dede:arclist}
" {' y6 o; Q- x1 y% l3 N' S0 F' |</ul>
另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
& c3 E. I- z" p# K. B您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
' n3 O; Q, K% y# W这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
0 F: o: v5 ^, q* O7 m: Y4 H/ _另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.