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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
0 G, ^6 I% U# `2 Y/ _! }- _! J2 x下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
/ \! o" g( L1 ~# ]. h8 J8 g<dl class="tbox">
# k$ f2 a4 I$ @- G# x* v0 w<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>
; D* }9 S8 ?  t1 _<dd>
<ul class="d1 ico3">
  C2 Y% t" S" J4 J{dede:arclist titlelen='60' row='8'}
. {. V5 n* h- ?5 G" l9 u: L7 D<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
+ r% l& [; x9 F$ v* c1 v& u" E& C</ul>
% T1 K2 `, H# ^6 @</dd>
</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
* q# o/ H9 a% ^列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
   {dede:arclist row='8'}
0 U- `: v1 p4 B" [+ S) W( r% s     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
/ F5 A( q' d- d" T& T列表调用样式2 - 带日期的长标题列表(d1)

# [* o# u( B4 Z/ p0 \6 T可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
   {dede:arclist row='8'}
6 l9 l1 {5 Z* x* x+ n     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
. ~( K4 `4 D+ @& R   {/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)

% q5 s) ^% M. `0 [% n+ Q; P可以调用19个中文字符的长标题和短日期
4 e5 g0 }3 W1 x& _9 H9 |<ul class="d2 ico3">
+ Q- t( m# Y2 B0 A" }8 U! Q+ m   {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}
: P1 e! _7 F2 `( N</ul>
0 v: m8 A% U& @9 h' ^9 M) k9 {0 K列表调用样式4 - 图文混排列表1(e5,c1)

% J5 A; _. m/ [+ I% R* x5 A左侧调用图片,右侧调用文字标题列表
! \, C* t! U4 \& f3 N<ul class="e5">
5 O( ~6 d3 b# }: Y9 B     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
  H3 e6 ?1 ]0 ?( {; q     {/dede:arclist}
, l0 M) x" K7 D! T* p) n/ m# p& X; Z</ul>
/ x! b: ^/ i! C9 u<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
4 a( ?/ {  S; g: q</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
% e% B( I" [' y  Y% L* @<ul class="e6">
" G2 t6 Q. ?( t8 C& m4 z2 ]3 e     {dede:arclist row='3'   type='image'}
4 o% }) @# e, O- S! u3 v     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
& @/ T. F9 Q& v$ C# W, h     {/dede:arclist}
" w3 \! J! q& q3 w( v</ul>
3 I2 B1 K5 y7 j4 @& S, s2 P<ul class="d2 ico3">
, ]- I7 O  Y9 Z   {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}
3 U9 a" H: |& H+ P/ t</ul>
, s+ O( |# `4 ?+ d0 [列表调用样式6 - 图文混排列表3(e6,c2)

$ G" a- t$ p! [6 H' ?上部调用图片,下部调用两列文字列表
<ul class="e6">
$ F1 x) g5 S0 n, ^     {dede:arclist row='3'   type='image'}
' D9 D" J1 N, W! A* V5 u4 D     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
# N7 g- X( `" J     {/dede:arclist}
</ul>
<ul class="c2 ico3">
   {dede:arclist row='6'}
- D* N. c  R6 K, O2 Q     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
* n3 m# O; ?' ?% m$ n2 v  u3 L另外ico部分有3种ico可选择
7 |& A) A  P# |$ K& H# j  b3 X: \9 ~" j分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
% {  W% w, G" m% p# O您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.