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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
  I* e/ u  X' j5 m$ }1 I您可以根据自己的实际需要修改使用
2 k& _+ p6 }: H9 i# \2 j& R- u  T下面以首页区块调用位置为例
8 D# ]! K) w4 o8 v+ h, O& \, w我们来详细介绍这六种列表样式的结构和class
9 S# w+ n& s) S* n5 ?首页模板的<div class="listbox"></div>内是区块列表的调用
8 W+ R& t- i- i) ]6 b<dl class="tbox">
0 z4 Z6 g0 D& M/ n$ 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>
<dd>
<ul class="d1 ico3">
% G- B/ Z( h9 l* s7 ?{dede:arclist titlelen='60' row='8'}
8 s. E( a  Y# h$ U8 X, @" F<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
3 {, Y- }% I% v0 N! I: e</ul>
</dd>
% G- B, b' `' _' s6 G, D</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
3 R; \5 l; a# o列表调用样式1 - 纯文本列表(c1)
( l. H+ R* E5 D. h/ E
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
  J# d; ^8 T# w8 N<ul class="c1 ico3">
   {dede:arclist row='8'}
* v  W9 p4 U$ \. z     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
6 z/ R5 y) G; j% }1 w- h  ]! g1 a0 Z</ul>
+ F- Z4 M6 t) H, H; |5 M列表调用样式2 - 带日期的长标题列表(d1)
" g4 p% ]" b( m+ O& z
/ H1 ?) M, N3 o- \9 `. X可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
   {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>
  A- B2 M1 A/ E列表调用样式3 - 带日期的短标题列表(d2)

可以调用19个中文字符的长标题和短日期
: J2 Y6 w1 T. F/ R( z6 h<ul class="d2 ico3">
: p# G+ j; y7 }5 h   {dede:arclist row='8'}
. q0 n. U4 x$ k* X# k     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
# B4 Q9 y  s1 y8 @   {/dede:arclist}
</ul>
列表调用样式4 - 图文混排列表1(e5,c1)

左侧调用图片,右侧调用文字标题列表
<ul class="e5">
     {dede:arclist row='2' type='image'}
, m$ f* l- t- s     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
% }, @) m: @/ S* \, i2 t     {/dede:arclist}
</ul>
<ul class="c1 ico3">
0 X0 \) x3 n, a& \4 U1 z3 }5 l7 ]' D+ n   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
' T9 i; C$ O  f2 B4 K; B</ul>
: g" y+ X" z4 [  t6 N3 }列表调用样式5 - 图文混排列表2(e6,d2)

1 V5 v; [! K! J; {+ Q: w$ W上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
# x6 @( r2 l9 j     {/dede:arclist}
3 V# Y" U" a( q7 V</ul>
+ B. _  E! D$ ^) K& P<ul class="d2 ico3">
' u( x  v! ?. E+ Z- H6 _   {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 J2 L4 `/ N( [9 I2 x3 \</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
9 K# q% b( X3 X/ V( o
6 z5 j; f) c, H5 A/ g& |; M0 \$ q3 z  b上部调用图片,下部调用两列文字列表
+ C; z% a; I0 G7 w( I5 u: i<ul class="e6">
     {dede:arclist row='3'   type='image'}
5 V5 k' v3 b) w4 T. k+ w" d" O. }     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
. D$ ]% L6 R& [  U/ U4 s2 H4 h  f     {/dede:arclist}
</ul>
<ul class="c2 ico3">
  N3 z& S3 q( c9 |% W# Z   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
& W/ p' |% e. M. B/ }   {/dede:arclist}
</ul>
. s- q" E4 @/ T另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
" J% R7 R" ]3 E5 a7 k另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.